Nuxt.js + Netlify + Contentfulを利用した、「完全サーバレス構成」のメディア・ブログサイト制作のご紹介です。EkanLabのコーポレートサイトはこの構成で運用しています。
構成図
Nuxt.js
vue.jsのフレームワークです。SPA（シングルページアプリケーション）だけでなく、サーバーサイドレンダリングが可能なため、SEOを考慮したWebサイト・アプリケーションが構築可能です。
今回はNuxt.jsの「静的ファイル出力機能」を利用し、ビルド時に全ページを静的ファイルとして出力します。
Netlify
静的ファイルのホスティングサービスです。Githubとの連携がとても強力で、指定のブランチにpushすると自動でデプロイ＋ビルドが実行させることができます。今回はNuxt.jsの「静的ファイル出力」をビルド時に実行しています。
SSL署名書やフォーム機能も無料で利用できます。
Contentful
ヘッドレスCMSと呼ばれるコンテンツ管理サービスです。WordPress管理画面と同じようなもので、記事の作成・管理のみを行い、API連携で記事を外部配信します。また、記事作成・更新する際にNetlifyで自動的にビルドが走るような連携が可能です。
普段WordPressに使い慣れている方は違和感なく利用できますが、エディタがマークダウン形式な点には注意が必要です。
この構成のメリット
- SSLやお問い合わせフォーム、メール通知機能は無料で利用可能
- （各サービスの制限内であれば）NetlifyやContentfulの費用も無料。サーバー費はゼロ円〜
- システム構築が不要なため製作速度が速い。サーバーの管理者が不要になりコストも削減
- WordPressのアップデートに悩まされることがなくなる
- 静的ファイルなため、表示速度が非常に速い。Yahoo砲に怯えなくて済む
注目のポイント
何と言っても「静的ファイルなのにお問い合わせフォームが使える」という点です。
（こちらのお問い合わせページでも利用しています）
問い合わせ内容はNetlifyにポストされ、以下のように管理画面から一覧を閲覧できます。CSVダウンロードや、問い合わせ内容をメールで通知する機能も無料で使うことが可能です。
無料プランでの制限内容
以下の制限を超える場合は、Netlify、Contentfulそれぞれで費用が発生します。
有料プランを利用しても、管理者の人件費が不要なためトータルの費用が安くなる可能性があります。
Netlify
- 環境は1つ
- 閲覧時の制限不可
- 転送量は100GB/月まで
- ストレージの容量は100GBまで
- 500リクエスト/分制限
テスト環境やベーシック認証が必要な場合は、有料プランへの加入が必要です。
導入の際のハードルになりやすい点ですね。
Contentful
こちらは主にコンテンツの数が導入の際の検討事項になりそうです。
- 記事＋アセットの合計が5000レコードまで
- コンテンツ種類は24種まで
- 3デプロイ/1分
こんなケースにおすすめ
ケース1：スモールスタートで、改善スピード重視な場合
素早くリリースし、改善のサイクルを早めたいというケースにピッタリです。
リリースまでの時間を大幅に削減できるため、開発コストを改善予算に回すことができます。
PVや機能が増え、サーバーが必要になったタイミングで環境を移行することも容易です。
ケース2：PVや更新頻度の少ないサイト
各種サービス制限内であれば運用費を無料にすることができるため、このようなケースにもおすすめです。今までは最低でもレンタルサーバー費用は必須でしたが、その費用も不要になります。
向いていないケース
コンテンツ数が非常に多いメディアの移行
コンテンツの数が数十万件あるようなケースでは、本構成を無条件に採用するべきではありません。サーバーを借りたほうがコストが安くなる可能性が出てくるため、事前に料金の検証が必須です。
また、ビルドの時間は記事本数とともに伸びていくため、静的パブリッシュ自体が適していないということも考えられます。
CGM・SNS系のサイトや自社データベースとの同期が必要な場合
SEOを考慮しつつ自社データベースとの同期が必要だったり、定期実行させるプログラムと連携させるようなケースは、静的ファイル出力とは相性が悪いです。
また、コメントなどをユーザーに頻繁に投稿させ、その内容をサイト上に反映させるようなケースには利用するべきではありません。
ビルドのキューがたまり続け、常にビルドし続けるような状態になってしまう恐れがあります。
サーバー上で動的な処理を実行することをおすすめします。
以上、（2019年時点では）モダンな環境のご紹介でした。
これからメディア・ブログを構築される際、選択肢の一つに入れてみてはいかがでしょうか。