Contentfulのチュートリアルで作ったgatsbyなプロジェクトをNetlifyで公開する

前回 Contentfulチュートリアルメモ - kz-kazuki’s blog の続き

Netlifyでホストする

迷いましたがNetlifyでホストしてみることに

準備

• とりあえずgithubの認証でアカウントを作成
• 前回作成したgatsby.jsなプロジェクトをgithubにpushしておく

gitignoreは

# contentful config file
 .contentful.json
 
 # dotenv environment variables file
 .env

となっているので、tokenがコミットされちゃうことはないです。

gatsby.jsなプロジェクトの環境変数を確認しておく

gatsby-config.jsは

contentfulConfig = {
   spaceId: process.env.CONTENTFUL_SPACE_ID || contentfulConfig.spaceId,
   accessToken: process.env.CONTENTFUL_DELIVERY_TOKEN || contentfulConfig.accessToken,
 }

ということなので、後々Netlifyの方で環境変数を上記のkeyで設定すればよさそう。

githubにあるプロジェクトを手動デプロイ

Hosting on Netlify | GatsbyJS

公式にあるように設定していく。

• netlify上で、new site from git を選択
• github連携を画面でポチポチやる
• 下記画像のようにコマンドと公開ディレクトリを設定

• 環境変数を設定する
  • settings -> build & deploy -> Build environment variables
  • CONTENTFUL_DELIVERY_TOKENとCONTENTFUL_SPACE_IDを.contentful.jsonからコピー

この時点でサイト上から手動でデプロイをして、正常に動くことを確認。

Contentfulの更新に合わせてビルドされるようにする

Netlifyでbuild_hook用のurlを発行する

• settings -> Build & deploy -> Build hooksで適当に名前をつけてurlを生成する

発行されたurlに対してPOSTするとビルドが実行される模様

Contetful側でコンテンツを更新した際に、先程のurlを叩くようにする

ContentfulでSettings -> Webhooks画面に行くと、テンプレートがあるので選択する

webhookのテンプレートリスト

hook用urlを入れるフォームが出てくるので、入れてオッケー

デフォルトのトリガー設定

一旦デフォルトで良さそう。

このあと記事のタイトルを更新したらビルドが走ることを確認。楽すぎる...