Gatsby製サイトでのNetlifyビルド時間を削減した話

※この記事は以前ちょっと株式会社 社員ブログで公開していたものです

どうも初めまして、ちょっと株式会社のフロントエンドエンジニアのしまむーです！
昨年、弊社コーポレートサイトを刷新するにあたり社内での開発で使っているJamstackアーキテクチャを採用することになりました。
フレームワークには静的サイトジェネレーターのGatsbyJSを利用し、CMSにはmicroCMSを使用、Github ActionsからデプロイしNetlifyでホストする形で運用しています。

なぜGithub Actionsからデプロイするのか

Netlifyにはユーザーに対して1か月あたりのビルドに対する制限があります。
コーポレートサイトにブログを設置するにあたり記事を頻繁に投稿していきたいとのことだったため今後、ビルド時間が増えていく可能性がありました。
過去に担当したプロジェクトでビルド時間の削減のためにGitHub ActionsからNetlifyへデプロイする対応を行なったことがあったのでそちらの方法を採用することにしました。

GitHub Actions とは

開発案件に参画されている方などはよく使われているかも知れませんが。
GitHub Actionsは、タスクを自動化できるGithubの機能です。
イベントなどをトリガーにすることで、コードをビルド、テスト、デプロイすることなどができます。
今回の場合はmicroCMSのWebhookから通知されてきたイベントを元にGatsbyサイトをビルドしてNetlifyにデプロイされるようにしました。

GitHub Actionsのワークフローの設定

GitHub Actionsコマンドは、リポジトリのルートに .github/workflowのディレクトリを作成。
上記ディレクトリの中にYAMLファイルを作成することで設定が可能です。
下記のように記述されたファイルを用意しましょう。今回はdeploy.ymlという名称でファイルを作成しました。

name: deploy

on:
  repository_dispatch:
    types: [update_post]　//　ここのtypesの中身がトリガーイベント名になります。
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
      SERVICE_ID: ${{ secrets.SERVICE_ID }}
      API_KEY: ${{ secrets.API_KEY }}

    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@v2
        with:
          node-version: 14.x
      - run: npm i
      - run: npm run build
      - run: npx netlify-cli deploy --dir=./public --prod

上記のファイルを作成することでGithub Actionsがトリガーとなるイベントを受け取った際に自動的に動作します。
ただこのファイルを作成しただけではまだNetlifyとの連携や環境変数の設定が完了していないため完全ではありません。

NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
SERVICE_ID: ${{ secrets.SERVICE_ID }}
API_KEY: ${{ secrets.API_KEY }}

上記の部分にて環境変数を設定しています。
NETLIFY_AUTH_TOKENはNetlifyのPersonal Access Tokenを設定しています、NetlifyのUser Settingsから取得可能です。
NETLIFY_SITE_IDはNetlifyのSite settingsから設定可能です。
Netlifyのデプロイの設定を行いたいサイトのSite Settingsを確認してください、Site detailsのSite InformationにあるAPI IDがNETLIFY_SITE_IDにあたります。

上記の情報の取得が行えたらGithubのリポジトリシークレットから設定を行います、SettingsのSecretsから設定しましょう。

上記から遷移した先のActions secretsから設定可能です。
SERVICE_IDとAPI_KEYはそれぞれmicroCMSのserviceIdとAPIキーを設定します。

全て完了したら、microCMSのAPI設定よりwebhookを設定してください。

上記の設定が完了しましたら、記事を公開するなどしてGithub Actionsが正常に動作しているか確認しましょう。

最後に

今回はmicroCMSの記事を更新するのに利用しましたが、トリガーとするイベント次第で様々なタイミングで更新させることが可能です、例えば1日1回特定の時間に更新させる等。
ぜひ、Github Actionsを有効活用してNetlifyのビルド時間を削減していきましょう！