Netlifyの継続的デプロイ（自動デプロイ）を無償の範囲内で作成する

この記事の内容

Netlifyで静的サイトをホスティングしていたのですが、9月30日から 「組織のアカウント」 で 「プライベートリポジトリ」 の場合、 「継続的デプロイ」 （自動デプロイ）が利用できなくなってしまうとのこと。今関わっているプロダクトにまさにこの条件に合致するサイトがあったので、その時にとった対策を記載しました。

前提 - 当人のNetlify知識量

普段HPのメンテナンスはしているけれども、本格的にNetlifyを触ったことはない。そもそも、どうやって今まで自動デプロイをしていたのかもよくわかっていない状態でした。

やったこと

やること確認

まずはともかく、何が起こって、何ができなくなるのか。対応しなければならないことは何かを把握しました。以下の2022年10月以降の変更点を案内する記事を読みました。

▼2022年10月以降の変更点の案内

それによると、以下のことが起こり、以下の対応をしなければならないとのことでした。

起こること

• 組織が所有するプライベート GitHub リポジトリから継続的デプロイをする機能が、有償プランに移行する

選択したこと

選択肢は二つあったので、以下の内容を選択しました。

• 選択肢１ 有償プランへの移行
• 選択肢2 無償プランのまま頑張る -> 今回はこちらを選択

やるべきこと

無償プランのまま頑張る場合、上記の案内によると

• 個人アカウントへの移行　または
• リポジトリの設定をPublicにする

なら自動デプロイが継続できると案内されていましたが、今回はどちらも選択したくありません。なので、別のオプションを探しました。

今後のデプロイ方法の候補（手動、自動）とその手順

Netlifyのデプロイに関するガイドあたりを見ていると、上記2つを選択しないでデプロイするには下記の手順が必要かなと思いました。

1. ローカルでビルド
2. 手動デプロイ
3. それの継続的デプロイ（できれば）

ビルドとてプロイについては、それぞれ以下のコマンドで実行できました。

▼CLIから手動でデプロイする

netlify deploy --prod

▼CLIから手動でデプロイプレビューを作成する

netlify deploy --build --context deploy-preview
# プレビューの内容が良さそうなら
netlify deploy --build --prod

継続的デプロイの設定方法

最後に、継続的デプロイの設定方法です。これは、公式にはなかなか載っておらず、少し苦労しました。ここからお金取ろうとしているのだもの、当たり前ですよね。。。

Webhookを利用した、自動デプロイ

まず、Netlifyの機能でWebhookから自動デプロイを作成できます。詳細は左の記事に譲りますが、こちらはダメでした。
いそいそと設定したは良いものの、9月30日以降使えなくなりますとの案内が出てしまいました。

Zapierで自動化する方法

Zapierワークフロー作成のアプリを使用して自動デプロイを構成することもできる様でしたが、
まだプッシュごと・プルリクエストごとに自動デプロイを簡単に構成できるようにはなっていないようでした。残念。

GithubActionsで自動デプロイを作成

結局、公式には載っていない方法でしたが、GithubActionsで自動デプロイを作成しました。
このブログの内容を参考にさせていただきつつ、

この様なものを作成

name: Deploy Preview

on:
  pull_request:
    branches:
      - master

jobs:
  publish:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@master

    - name: Deploy to Netlify
      id: deploy-netlify
      uses: netlify/actions/cli@master
      env:
        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
      with:
        args: deploy --dir=./ 
        # 本番にデプロイしたい時には、ここにdeploy --prod というフラグをつける

    - name: Netlify Preview URL
      uses: unsplash/comment-on-pr@master
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        OUTPUT: "This pull request is being automatically deployed to Netlify.\n\n🔍 Inspect: ${{ steps.deploy-netlify.outputs.NETLIFY_LOGS_URL }}\n✅ Preview: ${{ steps.deploy-netlify.outputs.NETLIFY_URL }}"
      with:
        msg: ${{ env.OUTPUT }}
        check_for_duplicate_msg: false

こちらでデプロイができました。

感想

ゴールがどこかわからないのを調べるのは本当に大変で。。。先輩にヒントをもらいながら落とし所を決めました。
もう少し効率的に作っていきたいです。