ContentfulからWebhockでGitHub Actions叩いてGatsbyのプロジェクトをビルドしてNetlifyにDeployする

はじめに

こんにちは.TikTokで日向坂46のメンバーの目の部分の切り抜きでも誰だか分かるよね？という感じの趣旨の動画を見たのですが、推しの松田好花さんだけわかりませんでした.悔しいです.筆者です.

さて、GatsbyのプロジェクトをNetlifyでホスティングしております.
今までNetlifyでビルドしてましたが、意外と無料枠超えるのではという不安が発生しました.

Netlifyの無料枠超えるのでは

Netlifyの無料枠では1か月で300分までビルドが可能です.

筆者はHeadless CMSのContentfulを用いてサイトのコンテンツを管理しております.
そのため、Contentfulでの編集をトリガーにWeb HockでNetlifyのビルド&デプロイしてました.

今までのサイト公開のフロー

今までは以下のフローで公開していました.

メリット

1. 設定はNetlifyとContentfulだけ

デメリット

1. Netlifyでビルドしているのでビルド時間が掛かるプロジェクトだと、無料枠を使い切る可能性がある.

現在のサイト公開のフロー

メリット

1. Netlify内でビルドしないでのずっと無料

デメリット

1. GitHub Actionsの設定.
2. GitHubの当該リポジトリをPublicに変更 => Privateリポジトリでも無料枠ありますが、完全無料にしたいので公開しました.

実践！

それでは、Netlify完全無料化を目指して進めていきましょう！

Netlifyのビルド設定を解除します.

GitHub Actionsの設定

1. Actions作成ページに遷移する.

https://github.com/{{ user_name }}/{{ repository_name }}/actions/new

以下の通りクリックしてもたどり着けます.

↓

2. テンプレートではなく白紙からつくります.

3. ymlを書きます.

自分のはこんな感じです.
ポイントは最後に echo y しているところです.
理由は、Netlifyで自動公開offにしているのに本当にデプロイしていもいいの？ 的なこと聞かれるので、 echo y yesと回答している次第です.

書いたら保存しましょう

name: Netlify

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  repository_dispatch:
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: '15.x'

      - run: npm ci
      - run: npm run build
        env:
          ACCESS_TOKEN: ${{ secrets.CONTENTFUL_ACCESS_TOKEN }}
          SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }}
      - run: npx netlify-cli deploy --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
      - run: echo y

4. secretsを設定します.

yml内に環境変数を渡しているので、必要な値を以下で設定します.
https://github.com/{{ user_name }}/{{ repository_name }}/settings/secrets/actions

ContentfulとNetlifyのtoken等を設定してます。それらの取り方は別途ググっていただけると

以下の通りクリックしてもたどり着けます.

↓

ContentfulでWeb Hockの設定をする.

設定する項目は大きく分けて以下の5項目です.

1. Name
2. URL (https://api.github.com/repos/{{ user_name }}/{{ repository_name }}/dispatches)
3. Triggers (お好みで追加してください.)
4. Headers(Add custom headerをクリックして入力欄を表示できます.)
   1. Accept: application/vnd.github.everest-preview+json
   2. Authorization: token {{ Personal access tokens }} =>GitHubで取得してください.
   3. User-Agent: {{ user_name }}
   4. Content type: application/json
      1. こちらはデフォルトで表示されているので、プルダウンメニューから選ぶだけです.
5. Payload
   1. Customize the webhook payloadを選択.
   2. {"event_type": "update_contentful"}と入力(GitHubでアクション実行時の名称として使用されます、お好みで変更してください).

全体でみるとこんな感じです↓

おわりに

いかがでしたでしょうか。
ここまですれば、Netlifyのビルドの無料枠にとらわれることはありません
どなたかのお役に立てれば幸いです！
それでは！