2022年3月6日 • ☕️☕️ 9 min read
English

目次

本サイトのCI/CDがNetlifyのビルドサービスを利用したが、最近Github Actionsに移行しました。キッカケはrenovateの導入およびGatsbyJSのビルド問題となります。

tl;dr

NetlifyへデプロイするためにGithub Actionを作りました。キャッシュもちゃんと効くので、Netlifyのビルドサービスに負けないビルドを体感できます。

https://github.com/thundermiracle/netlify-deploy

renovateの導入およびGatsbyJSのビルド問題

  1. renovateの導入により、プルリクエストの数が増えてきました。

    Netlifyのビルドに使える時間について、無料枠なら1カ月わずか300分となり、public, privateと関わらず、全部カウントされるので、1週間だけでも75％のビルド時間を使いました

  2. GatsbyJSのプラグインgatsby-plugin-sharpのバージョンアップにより、メモリの消費量が増えてきて、Netlifyでビルドできなくなってきました。

    https://github.com/gatsbyjs/gatsby/issues/35055

    Copy 
    success Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 12.929s - 90/90 6.96/s
error UNHANDLED EXCEPTION write EPIPE
  Error: write EPIPE

    gatsbyjs-netlify-error.png

Netlifyについて

Netlifyのビルドサービスのメリット

  1. 設定は特に簡単：GatsbyJSのサイトを例として、netlify.tomlに下記のものを追記し、Netlifyの管理画面からレポジトリを選択するだけでです。
netlify.toml
Copy 
[build]
  command = "yarn && yarn build"
  publish = "public"
  1. ビルドスピードを向上するためのGatsby専用なプラグインが存在する

Essential Gatsby

元々Jamstackの推進者の一員として、GatsbyJSとNetlifyの関係は深いということです。

  1. プルリクエストにデプロイログおよびプレビューURLをコメントしてくれる

netlify-github-pr-comments.png

Netlifyのビルドサービスのデメリット

  1. ビルドに使える時間が短い

    public, privateと関わらず、全部カウントされるが、Starterプランなら使えるビルド時間1カ月わずか300分となります。ライバルのVercelが6000分、Github Actionsがpublicなら無制限、privateなら2000分と比べると、かなり短いでしょう。

    Netlify Pricing: pricing-netlify.png

    Vercel Pricing: pricing-vercel.png

    Github Actions Pricing: pricing-github-actions.png

    ※どのサービスを使うかは、Build minutesのみで決まらないので、それぞれのサービスの詳細は自分で確認してください。

Github ActionsにてGatsbyJSサイトをNetlifyへデプロイ

Netlifyと比べると結構面倒です。

Netlify中の処理

  1. NetlifyのCDを停止

    Site settings → Build & deploy → Continuous Deployment → Build settingsから、CDを停止します。

step1-stop-build-in-netlify.png

  1. SiteのAPI IDを取得

    Site settings → General → Site details → Site informationからAPI IDを取得します。

  2. Personal access tokenを取得

    User settings → Applications → Create new tokenから、Personal access tokenを取得します。

step3-get-personal-access-token.png

レポジトリの設定

  1. Actions secretsを登録

    レポジトリのSettings → Secrets → Actionsから登録します。

    • NETLIFY_SITE_ID: NetlifyのSiteのAPI ID
    • NETLIFY_AUTH_TOKEN: NetlifyのPersonal access token

step1-add-actions-secrets.png

Github Actionsの設定

いよいよ始まります。もちろん自分でNetlify-cliをGithub Actionsの実行する時インストールし、スクリプトを組んでNetlifyへアップロードして問題ありません。ステップをできる限り簡単にするために、今回は既存のGithub Actionsを利用します。

利用するGithub Actions一覧。

※action-netlify-deployにキャッシュが効かなく多少スピードが遅いので、スピードに気になる方は自分でGithub Actionsのスクリプトを書いたほうがいいかもしれません。

プルリクエストのためのCDの設定

  1. トリガーの設定

    とりあえず全てのプルリクエストを設定しましょう。

.github/workflows/preview.yaml
Copy 
on:
  pull_request:

  1. プレビューモードでデプロイ

    プルリクエストを受け取ったら、プレビューモードでデプロイします。

.github/workflows/preview.yaml
Copy 
steps:
  - name: checkout
    uses: actions/checkout@v3

  - name: deploy preview version of GatsbyJS to Netlify
    uses: jsmrcaga/action-netlify-deploy@v1.7.2
    id: deploy_preview
    with:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
      build_command: yarn && yarn build
      build_directory: 'public'

分解してみましょう。

  • uses: actions/checkout@v3は、Github Actionsのチェックアウトを行うためのスクリプトです。
  • uses: jsmrcaga/action-netlify-deploy@v1.7.2は、Netlifyへのデプロイを行うためのスクリプトです。
  • id: deploy_previewは、他のステップが今のステップのoutputsを参照するためのIDです。
  • with:は、Netlifyへのデプロイに必要なパラメータを設定します。
  • build_command: yarn && yarn buildは、GatsbyJSのビルドコマンドです。
  • build_directory: 'public'は、GatsbyJSのビルド結果を置くディレクトリです。

これでNetlifyのプレビューモードへのデプロイの設定が完了です。

  1. プルリクエストへのコメントを追加

    デプロイログとプレビュー用のURLをコメントに追加すると、プルリクエストに問題のないことの確認が簡単にできるでしょう。 このステップは、find-commentとcreate-or-update-commentを使用しています。

    まず、やりたいことはこちらです。

    • コメントが存在しない場合は、create-or-update-commentを使用して、コメントを作成します。
    • コメントが存在する場合は、find-commentを使用して、コメントを検索し、create-or-update-commentを使用して、コメントを更新します。
.github/workflows/preview.yaml
Copy 
steps:
  - name: find the comment
        uses: peter-evans/find-comment@v1
        id: fc
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-author: 'github-actions[bot]'
          body-includes: Netlify Preview Deployment Information

      - name: create or update comment
        uses: peter-evans/create-or-update-comment@v1
        with:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
            Netlify Preview Deployment Information
            - Log URL: ${{ steps.deploy_preview.outputs.NETLIFY_LOGS_URL }}
            - Preview URL: ${{ steps.deploy_preview.outputs.NETLIFY_PREVIEW_URL }}
          edit-mode: replace

分解してみましょう。

  • issue-numberは、プルリクエストのIssue番号です。
  • comment-authorは、コメントの作成者です（github actions[bot]に固定）。
  • body-includesは、コメントの本文に含める文字列です。

これでターゲットのコメントが検索できるようになりました。

  • comment-idは、find-commentステップによって取得したコメントのIDです。（ない場合は空）
  • issue-numberは、プルリクエストのIssue番号です。
  • bodyは、コメントの本文です。
    • Netlify Preview Deployment Informationは、コメントの本文のタイトルとなり、検索用の文字列でもあります。
    • ${{ steps.deploy_preview.outputs.NETLIFY_LOGS_URL }}は、Netlifyへデプロイステップによって生成されたログのURLです。
    • ${{ steps.deploy_preview.outputs.NETLIFY_PREVIEW_URL }}は、Netlifyへデプロイステップによって生成されたプレビューのURLです。 ※ action-netlify-deployのoutputsはこちらへ。
  • edit-modeは、replaceにすると、コメントを追加ではなく、更新することを表します。

これで、プルリクエストのための設定が完了しました。

プルリクエストする時は、プレビューモードにデプロイしてくれて、このようなコメントも追加してくれます。

preview-comment.png

マージ後のCDの設定

マージしたら、プロダクションモードでデプロイするようにしましょう。設定は、.github/workflows/production.yamlとほぼ同じです。ただし、コメントなどいらないため、コメント関連の設定は不要となります。

.github/workflows/production.yaml
Copy 
name: 'Netlify Deploy'

on:
  push:
    branches:
      - master

jobs:
  deploy:
    name: 'Deploy'
    runs-on: ubuntu-latest

    steps:
      - name: checkout
        uses: actions/checkout@v3

      - name: deploy production version of GatsbyJS to Netlify
        uses: jsmrcaga/action-netlify-deploy@v1.7.2
        with:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
          NETLIFY_DEPLOY_TO_PROD: true
          build_directory: 'public'
          build_command: yarn && yarn build

唯一注意しなければいけないのは、NETLIFY_DEPLOY_TO_PRODをtrueにすることです。

完了

これでNetlifyのビルドとほぼ同じDXの設定が完了です。Github Actionsがめっちゃ面白いですね。ご参考までに。

関連投稿

GraphQL APIを使ってGithub Actionsを組み込む

2022年5月2日

Netlifyのfunctionsにexpress-graphQLをデプロイしてみた

2020年9月14日
ThunderMiracle

Blog part of ThunderMiracle.com