Cloudflare PagesのサイトをGithub Actionsを使って定期デプロイする

ある日、GtihubActionsからエラー通知が届いた。 私のサイトはRSSで自分のブログの記事を表示しているのだが、これをVercel→Cloudflareに移したことで落ちてた模様。修正する。

結論

• 完成品
• scheduleで"0 0 * * *"にすれば毎日0時0分にデプロイされるのでそれを利用
• Vercelとは異なり、GithubAcitons内でBuildコマンドを叩く必要がある

name: deploy website
on:
  workflow_dispatch:
    inputs:
      ref:
        description: deploy website
        default: "main"
        required: true
  schedule:
    - cron: "0 0 * * *"
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Build
        run: npm install && npm run build
      - name: Publish to Cloudflare Pages
        uses: cloudflare/pages-action@1
        with:
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
          directory: dist
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

やっていく

• 元々Vercelな部分をCloudflareに置き換えていく
• Use Direct Upload with continuous integration · Cloudflare Pages docs の Use GitHub Actionsの章に書き方は書いてあるのでこれをコピペ
  • コメントアウトされているBuildの部分は利用するのでコメントアウトを外す
• Settings > Secrets and variables > Actions > Repository Secretsに下記を設定していく
  • CLOUDFLARE_ACCOUNT_IDはCloudflareダッシュボードのURLのhttps://dash.cloudflare.com/***の***部分
  • CLOUDFLARE_API_TOKENはダッシュボード右上のユーザーマーク > My Profile > API Tokensから作成可能。
    • GitHub ActionsでビルドしてCloudflare Pagesにデプロイする の Cloudflareのトークンの作成が画像つきでわかりやすい
  • CLOUDFLARE_PROJECT_NAMEの部分は公式ではsecretsされてないのでsecretsにする必要はないかもしれないが、GithubActionsにべた書きしたくないのでsecrets化した

補足

• 今回はpushではなく定期実行なので、workflow_dispatchはをつけておくとWEB上からGithubActionsを発火させられてデバッグが楽。むしろつけないと定期実行タイミングにしか動かないのでデバッグが大変。

おわり

• VercelではBuildをいれてなかったので、最初Buildをすっとばして『distがないよ』というエラーが出て、あれ？distじゃなかったっけ？と何度か確認してしまった
• VercelもCloudflarePagesも定期再デプロイがﾎﾟﾁﾎﾟﾁでできるようになったらいいなあとは思うが、まああまり需要はないのだろうな
• Cloudflare Workersを使った方法もあったが、cron用に1つリポジトリを作った方が良さそうな雰囲気になったところで止めた。