🐕

Next.jsヘッドレスCMS構成でNetlifyにデプロイしてみる

2022/02/10に公開

概要

Next.js でヘッドレス CMS 構成で開発したアプリケーションを、Netlify に自動デプロイしてみます。

コンテンツ更新経路（やりたい運用）は次のようになります。

通常は高速にビルド済みの静的サイトが表示されている。
運用者（業務部門）が microCMS でニュースを更新すると、Netlify で自動ビルドが走りサイト（ニュースリリース部分）が更新される。
開発者（制作・システム部門）が GitHub にソースを PUSH すると、Netlify で自動ビルドが走りサイト（テンプレート部分や個別ページ部分）が更新される。

Next.js でヘッドレス CMS 構成でアプリケーションを作成しておきます。
環境構築や、簡単なアプリケーションのつくり方は以下を参考にしてみて頂ければと思います。

ヘッドレス CMS は microCMS を用いますが、contentful 等でも同じだと思います。
本記事では簡単なアプリケーション自体は既に存在することを前提に、GitHub リポジトリ経由でデプロイを行い表示確認をするところまでを行います。

GitHub 上で、Next.js のプロジェクトを管理するリポジトリを用意しておきます。

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 等が入っているフォルダで実行します。

Sites-Add new site-Import an existing projectを選択
Connect to Git providerでGitHubを選択
1. この際、対象の組織とリポジトリを聞かれるので、連携したいもののみを選択するようにする。
次のような設定を行う
1. owner:任意（サイトのオーナーに設定したいものを選択）
2. branch to deploy:デプロイ対象にしたいブランチを選択（main）
3. Base Directory:未設定
4. Build command：next build
5. Publish Directory：.next
Deploy Siteを押下

※実際には独自ドメインの設定が必要になると思います。

Netlify のBuild & deploy-Build hooks-Add build hookを選択
以下の設定を実施
1. Build hook name：任意の名前を設定（例：microCMS Hook）
2. Branch to Build：Hook をトリガにビルドするブランチを設定（main)
URL が表示されるのでコピーしておく

以上で、GitHub プッシュまたは、ヘッドレス CMS 側でコンテンツを更新すると、Netlify で自動ビルドが走り、５分くらいで公開サイトに反映されます。

更新後即時反映したいとか、すごく頻繁に更新したいとか、機能を作りこみたいといったところがそこまでなければ、画面の動き自体は、静的ホスティング＋ Next.js(Client-Side Navigation：画面リロードせずに遷移する技術)で表示もサクサク快適なので、小規模なコーポレートサイトやランディングページには良い感じですね。

トッカシステムズは、受託開発や自社製品・サービス開発を行うエンジニアリング企業です。Webサービスやアプリ、電子マネー、認証機能などの開発や、CMSによるWebサイト構築などを行っています。 Java,PHP,React,Nextでの開発や、AWSを用いた基盤構築・運用等を行っています。