🐕
Next.jsヘッドレスCMS構成でNetlifyにデプロイしてみる
概要
Next.jsでヘッドレスCMS構成で開発したアプリケーションを、Netlifyに自動デプロイしてみます。
コンテンツ更新経路（やりたい運用）は次のようになります。
- 通常は高速にビルド済みの静的サイトが表示されている。
- 運用者（業務部門）がmicroCMSでニュースを更新すると、Netlifyで自動ビルドが走りサイト（ニュースリリース部分）が更新される。
- 開発者（制作・システム部門）がGitHubにソースをPUSHすると、Netlifyで自動ビルドが走りサイト（テンプレート部分や個別ページ部分）が更新される。
準備
Next.jsでヘッドレスCMS構成でアプリケーションを作成しておきます。
環境構築や、簡単なアプリケーションのつくり方は以下を参考にしてみて頂ければと思います。
ヘッドレスCMSはmicroCMSを用いますが、contentful等でも同じだと思います。
本記事では簡単なアプリケーション自体は既に存在することを前提に、GitHubリポジトリ経由でデプロイを行い表示確認をするところまでを行います。
手順
GitHubにリポジトリを用意する
GitHub上で、Next.jsのプロジェクトを管理するリポジトリを用意しておきます。
手元のソースをGitHubにプッシュする
Next.jsのプロジェクトフォルダ（package.json等が入っているフォルダ）を、GitHubリポジトリに接続し、プッシュします。
git init
git remote add origin https://github.com/[Organization Name]/[Repository Name].git
git branch -M main
git push -u origin main
※[Organization Name]、[Repository Name]の部分はリポジトリによります。
※package.json等が入っているフォルダで実行します。
Netlify側でリポジトリの取り込み設定を行う
-
Sites-Add new site-Import an existing projectを選択 -
Connect to Git providerでGitHubを選択- この際、対象の組織とリポジトリを聞かれるので、連携したいもののみを選択するようにする。
- 次のような設定を行う
- owner:任意（サイトのオーナーに設定したいものを選択）
- branch to deploy:デプロイ対象にしたいブランチを選択（main）
- Base Directory:未設定
- Build command：
next build - Publish Directory：
.next
-
Deploy Siteを押下
※実際には独自ドメインの設定が必要になると思います。
Netlify側でWebhookの設定を行う
- Netlifyの
Build & deploy-Build hooks-Add build hookを選択 - 以下の設定を実施
-
Build hook name：任意の名前を設定（例：microCMS Hook） -
Branch to Build：Hookをトリガにビルドするブランチを設定（main)
-
- URLが表示されるのでコピーしておく
microCMS側でWebhookの設定を行う
-
API設定-Webhookを選択する。 -
追加を押下しNetlifyを選択する。 - 以下の設定を実施
- 識別名：任意の名前を設定（例：ニュース更新）
- URL：先ほど取得したURLを設定
- 通知タイミングの設定
-
コンテンツの公開時・更新時：すべて選択 -
コンテンツの非公開時：すべて選択 -
公開中コンテンツの削除時：すべて選択
-
以上で、GitHubプッシュまたは、ヘッドレスCMS側でコンテンツを更新すると、Netlifyで自動ビルドが走り、５分くらいで公開サイトに反映されます。
所感
- 更新後即時反映したいとか、すごく頻繁に更新したいとか、機能を作りこみたいといったところがそこまでなければ、画面の動き自体は、静的ホスティング＋Next.js(Client-Side Navigation：画面リロードせずに遷移する技術)で表示もサクサク快適なので、小規模なコーポレートサイトやランディングページには良い感じですね。
Discussion