Nuxt.jsとContentfulでブログを構築

Posted at 2020-11-05

このブログはNuxt.jsとContentfulによって構築しています。この記事ではブログの技術スタックについて紹介します。

• Contentful (Headless CMS)
• Nuxt.js (Frontend)
• Vercel (Infrastructure)

このブログのソースコードはGitHubで公開しています。 github.com/hareku/mycode.rip

Contentful

Contentfulは、いわゆるHeadless CMSというもので、ブログの管理画面とAPIのみを提供します。これによりフロントエンド部分は自由に差し替えることが可能です。

Contentfulは個人利用では無料です。画像などのアセットのアップロード容量は50MBまでなので、画像を多用する方は他のHeadless CMSを考えた方が良いかも知れません。詳しくはContentfulのPricingを参照。

Nuxt.js

Vue.jsのフレームワークです。Nuxt.jsのウリは、設定をほとんどせずにVue.jsアプリケーションを作れる点です。SSRも可能ですが、本ブログでは全てのページをビルド時に静的なHTMLファイルを生成し、完全静的サイトとして配信しています。

プラグインも豊富で、Google AnalyticsやAMPの対応もNPMパッケージ1つで手軽に導入できます。エコシステムはかなり充実していますし、ReactのNext.jsとほとんど変わらない優秀さです。

Vercel

インフラはVercelを利用しています。Vercelはフロントエンドを手軽に配信できるクラウドプラットフォームです。個人利用では全て無料です。

GitHubを使っている場合は、Vercelと連携するだけでCIの設定が可能で、指定のブランチにpushするだけで勝手にデプロイしてくれます。

静的なNuxt.jsサイトを配信する場合は、Vercelのビルドコマンドをnuxt generateにするだけです。もしSSRしたい動的なページがある場合も、vercel-builderを使用すれば可能です。

Vercelを使う前は、AWSのCloudFrontやS3を作成してCodePipelineでCIを設定して…という作業をTerraformで行っていましたが、Vercelのおかげでフロントエンドのインフラ管理が無くなりました。以前のTerraformリポジトリ: github.com/hareku/mycode.rip-terraform

VercelはWebhookからデプロイの呼び出しができるので、Contentfulの更新時にもきちんとデプロイが回せます。ドメインはVercelのサブドメインであれば無料で利用でき、カスタムドメインも利用可能です。