🎭

GitHub ActionsからNetlifyにデプロイする

に公開
Netlify
GitHub Actions
Hugo
tech

背景

Netlifyは便利なホスティングサービスで、GitHubへのPUSHを契機に自動でbuild・deployが実行されます。

しかし、Netlifyの無料プランでは月間300分のbuildクレジットしかありません。頻繁にPUSHしていると、すぐにクレジットを使い切ってしまいます。

以下は4日前の状態で、すでに246分を消費しています。

一方、GitHub Actionsの無料プランでは月間2,000分のクレジットがあります。そこで、buildをGitHub Actionsで行い、Netlifyへのdeployのみを実行することでクレジット消費を抑える方法を試しました。

参考記事

同様の課題を解決している記事を参考にしました。

実装方法

使用したツール

GitHub ActionsからNetlifyへdeployするために、以下のActionを使用しました。

https://github.com/nwtgck/actions-netlify

Netlifyのシークレット取得

以下の2つの値をNetlifyから取得し、GitHubのSecretsに登録します。これは画面から手作業で実施します。

NETLIFY_AUTH_TOKEN

  1. Netlifyにログイン
  2. User settings → Applications → Personal access tokens
  3. "New access token"をクリックして生成

NETLIFY_SITE_ID

  1. Netlifyで対象サイトを開く
  2. Site settings → General → Site details
  3. "Site ID"をコピー

GitHubのSecrets登録

  1. GitHubリポジトリ → Settings → Secrets and variables → Actions
  2. "New repository secret"をクリック
  3. NETLIFY_AUTH_TOKENとNETLIFY_SITE_IDを登録

GitHub Actionsの設定

.github/workflows/deploy.ymlを作成します。

name: Deploy to Netlify

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      # Hugoのビルド処理（使用しているSSGに合わせて変更）
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'

      - name: Build
        run: hugo --minify

      # Netlifyへデプロイ
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.2
        with:
          publish-dir: './public'
          production-branch: main
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: false
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

Netlify側の設定変更

Netlifyでのbuildを停止します。

  1. Netlifyでサイトを開く
  2. Site settings → Build & deploy → Continuous deployment
  3. Build settings → "Stop builds"をクリック

これにより、Netlifyはbuildせず、GitHub Actionsからdeployされたファイルをホスティングするだけになります。

結果

この設定により、Netlifyのbuildクレジットをほぼ消費しなくなりました。GitHub Actionsの2,000分のクレジットを活用することで、クレジット不足を気にせず頻繁にPUSHできるようになりました。

GitHubで編集を提案

Discussion