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

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


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

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

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

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

![Untitled Diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/ef8276f1-2791-f547-2a56-0848c8b957fd.png)

## メリット
1. 設定はNetlifyとContentfulだけ:+1:

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

# 現在のサイト公開のフロー
![Untitled Diagram (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/600fd9ef-5997-cb19-23e8-e709fd3f966c.png)

## メリット
1. Netlify内でビルドしないでのずっと無料:+1:

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

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

# Netlifyのビルド設定を解除します.
![Build-deploy-Site-settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/4575658d-b38f-2b80-a1b4-ad8d37500a47.png)

# GitHub Actionsの設定
## 1. Actions作成ページに遷移する.
`https://github.com/{{ user_name }}/{{ repository_name }}/actions/new`

### 以下の通りクリックしてもたどり着けます.
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/93a09a47-511c-33f9-c1a3-25a438433697.png)

**↓**

![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/3a9042b0-b075-976d-2274-87b6ac7df57f.png)

## 2. テンプレートではなく白紙からつくります.
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/646d6974-bdf6-0964-6226-21962aac5b82.png)

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

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

```yml
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/300e68ae-064b-739b-77e7-356634f2b535.png)

**↓**

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/b8e185b7-0ed0-0537-2cdf-10f71c08b60a.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/db52359f-4f6a-e700-ffac-94a11c866d29.png)

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