なぜNuxt.js+Contentful+Netlifyにしたか

自分のサイト（本サイト）を作るにあたり、要件は以下とした。

• 基本的に静的サイト
• ブログを書けるようにしたい
• ブログ記事はマークダウンでさらっと書きたい
• 問い合わせフォームは必要
• インフラにかける費用は抑えたい

これらの要件を満たせるよう最終的に以下のような環境にした。

• フロント
  • Vue.js （Nuxt.js）
• ホスティング
  • Netlify
• 問い合わせフォーム
  • AWS API Gateway + Lambda + SES
• ブログ記事管理
  • Contentful

もちろん他にも選択肢はあるが、自分が使ってみたい技術を使った。
Nuxt.jsを試したかったのと、ヘッドレスCMSを使ってみたかったというのが大きい。

作ってみて良かった点

• Nuxt.js最高
  今回スターターテンプレートを使用したのだが、必要なものが十分揃っている。
  gulpfile.jsやwebpack.config.jsをせこせこと書いていく必要もなく、やりたいことが揃っている。
  今後のちょっとしたWeb制作もNuxt.jsで書いてGenerateという形で進めたい。

• Contentfulよい
  ブログの記事管理するためのだけにWordPressにしたくないな…と考える人は多いだろう。
  シンプルにブログを書きたいだけなのに色々カスタマイズしないと重い。
  WordPress入れた瞬間にソースコード管理やステージング環境の管理が面倒になる。（みんなどうやっているんだろうといつも思う。）
  ブログ記事を管理するのにContentfulは必要十分。
  無料枠で5,000記事まで管理可能。月間のAPIリクエスト数にも上限があるが、Nuxt Generateする方法で使うなら問題にはならないだろう。

• Netlifyへのデプロイが便利すぎる
  Netlifyは初めて使ったのだが手軽で便利。独自ドメインの設定もSSLの設定も分かりやすい。

作ってみての課題など

• サイト全体をVue.js（Nuxt.js）で作るのが初めてだったので、コンポーネント設計や粒度をどうすべきかというところの知見が無く悩んだ
  このサイトレベルの規模であれば、設計が無くても作れてしまうというのもNuxt.jsの導入しやすさでもあるとは思う。
  とはいえコンポーネント設計は今後のWeb制作において重要度が増すだろうから学んでいく。

• 後からどんどん要件が増えるような場合は辛くなるかも
  Web制作という観点での話となるが、クライアントが後からあれもこれもと言ってくるような場合は辛いかもしれない。WordPressのようにググってプラグイン入れて終了とは行かないので。

• Contentfulは英語
  ドキュメントが英語。これは頑張るしかない。
  とはいえ、Nuxt.jsで使うためのチュートリアルもあるので、使うだけならそのソースを見れば十分理解できる。

• AWS S3 + CloudFrontへのデプロイができなかった
  始めはホスティング先はS3+CloudFrontにしようとしていた。問い合わせフォームで結局AWSを使うので。
  しかし、デプロイしていろいろ試してみたがうまくいかなかった。
  トップページにアクセスするぶんには問題ないのだが、下層ページへの直接アクセスができなかった。
  Nuxt側でSPAフォールバックの設定をしたり、S3側のRedirection Rulesで何とかしようとしたのだがうまくいかず結局Netlifyに変更した。
  Netlifyがこれだけ簡単だと、Nuxt.jsのホスティング先としてはよほど理由がなければAWS S3 + Cloud Frontを選択する必要もないという気がする。

まとめ

Nuxt.jsの書きやすさ、気軽さが非常に感じられた。今後の案件にも可能であれば積極的にNuxt.jsを採用していきたい。

しかし、コンポーネント設計やデータをどうハンドリングしていくかの設計が重要になってくると身にしみた。
このあたりはフロントエンドとはいいつつ、サーバーサイドでロジックを組み立てた経験があるかないかで理解のスピードも変わってきそう。
当たり前だが、ゆるく始めるにはVue.jsは最適とは言っても、まともなものを作るならちゃんとした設計が必要ですということだろう。
そういう意味では今回はTypeScriptは導入しなかったが、今後必須になってくるような気がしている。

近々Nuxt2がリリースされるとのことで、そのキャッチアップと、今後はFirebaseやNowなどのホスティングサービスも使ってみたい。