3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

はじめに

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

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

Netlifyの無料枠超えるのでは

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

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

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

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

Untitled Diagram.png

メリット

  1. 設定はNetlifyとContentfulだけ:thumbsup:

デメリット

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

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

Untitled Diagram (1).png

メリット

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

デメリット

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

実践!

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

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

Build-deploy-Site-settings.png

GitHub Actionsの設定

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

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

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

1.PNG

2.PNG

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

3.png

3. ymlを書きます.

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

書いたら保存しましょう:ok_hand:

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等を設定してます。それらの取り方は別途ググっていただけると:bow:

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

4.png

5.png

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でアクション実行時の名称として使用されます、お好みで変更してください).

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

おわりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
3
Help us understand the problem. What are the problem?