当サイトをNuxt.jsでリニューアルしました!
当事業サイトをNuxt.jsでリニューアルしました。
今回はデザイナーさんにデザインして頂きました!
以前はWordPressで作成していましたが、変更点は以下の通りです。
- フロント部分をNuxt.jsで構築
- ブログ部分をmicroCMSで実装
- サーバーはレンタルサーバーからGoogle Cloud Runに移行
- お問い合わせフォームのメール送信機能をsendGridで実装
簡潔に説明していきます。
フロント部分をNuxt.jsで構築
Nuxt.jsとはVue.jsベースのJavaScriptフレームワークです。
「ナクスト」と読みます。
特徴としてSSR(サーバーサイドレンダリング)を利用できます。
SSRとはJavaScriptをサーバーで実行してHTMLを生成し、そのHTMLをブラウザに返す仕組みです。
JavaScriptは本来ブラウザで実装されるものですが、サーバーで実行することにより処理の高速化が可能です。
ブログ機能をヘッドレスCMS「microCMS」で実装
このようなブログの機能をmicroCMSで実装しました。
ブログ機能のプログラムをサーバーごと提供してくれます。
処理の流れとしては
- 自サーバーのNuxt.jsのサイトからmicroCMSに記事情報を要求
- microCMSのサーバーから自サーバーに記事情報を送信
- 自サーバーのサイトで記事情報を取得して表示
といった感じです。
サーバーをGoogle Cloud Runに移行
Nuxt.jsのサイトを公開するにはNode.jsが実装できるサーバーにアップすることが条件となります。
レンタルサーバーでもできなくはないですが、手間がかかりそうだったので候補から外しました。
Google Cloud Runなら設定ファイルを記述してGoogle Cloud Runのサービス画面で設定すればアップ完了です。
また、githubとも連携できるのでコードを修正してpushすれば自動で修正内容が本番環境に反映されます。
こまめに機能追加などしていきたいと思っていたので、Google Cloud Runを選びました。
お問い合わせフォームのメール送信機能をsendGridで実装
sendGridはメール送信機能を提供してくれます。
Google Cloud Runの公式に推奨されているメール送信アプリがsendGridでしたので採用しました。
お問い合わせフォームに入力された情報をsendGridへ送信し、sendGridから指定のメールアドレスにメールが送信されます。
まとめ
Vue.jsすら触ったことがない状態でNuxt.jsでのサイト制作を開始したので、完成まで時間がかかりました。
わからない部分は公式ドキュメントを見て調べたり、わかる人に聞いたりして、なんとか完成できました。
またNuxt.jsのバージョンは正式リリースしたばかりの3.0.0で実装しました。
情報がほとんどなく苦労しましたが公式ドキュメントを読む癖がついたのでよかったです。
以上です!