ContentfulからWebhockでGitHub Actions叩いてGatsbyのプロジェクトをビルドしてNetlifyにDeployする
はじめに
こんにちは.TikTokで日向坂46のメンバーの目の部分の切り抜きでも誰だか分かるよね?という感じの趣旨の動画を見たのですが、推しの松田好花さんだけわかりませんでした.悔しいです.筆者です.
さて、GatsbyのプロジェクトをNetlifyでホスティングしております.
今までNetlifyでビルドしてましたが、意外と無料枠超えるのではという不安が発生しました.
Netlifyの無料枠超えるのでは
Netlifyの無料枠では1か月で300分までビルドが可能です.
筆者はHeadless CMSのContentfulを用いてサイトのコンテンツを管理しております.
そのため、Contentfulでの編集をトリガーにWeb HockでNetlifyのビルド&デプロイしてました.
今までのサイト公開のフロー
今までは以下のフローで公開していました.
メリット
- 設定はNetlifyとContentfulだけ
デメリット
- Netlifyでビルドしているのでビルド時間が掛かるプロジェクトだと、無料枠を使い切る可能性がある.
現在のサイト公開のフロー
メリット
- Netlify内でビルドしないでのずっと無料
デメリット
- GitHub Actionsの設定.
- 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項目です.
- Name
- URL (
https://api.github.com/repos/{{ user_name }}/{{ repository_name }}/dispatches
) - Triggers (お好みで追加してください.)
- Headers(
Add custom header
をクリックして入力欄を表示できます.)- Accept:
application/vnd.github.everest-preview+json
- Authorization:
token {{ Personal access tokens }}
=>GitHubで取得してください. - User-Agent:
{{ user_name }}
- Content type:
application/json
- こちらはデフォルトで表示されているので、プルダウンメニューから選ぶだけです.
- Accept:
- Payload
-
Customize the webhook payload
を選択. -
{"event_type": "update_contentful"}
と入力(GitHubでアクション実行時の名称として使用されます、お好みで変更してください).
-
おわりに
いかがでしたでしょうか。
ここまですれば、Netlifyのビルドの無料枠にとらわれることはありません
どなたかのお役に立てれば幸いです!
それでは!
Author And Source
この問題について(ContentfulからWebhockでGitHub Actions叩いてGatsbyのプロジェクトをビルドしてNetlifyにDeployする), 我々は、より多くの情報をここで見つけました https://qiita.com/akitkat/items/3adcbafc4eeabaa6470b著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .