Cloudflare Pagesへのデプロイを、GitHub Actionsから行う方法

GitHub Actionsを使用して、Cloudflare Pageにデプロイする方法を解説した記事です。この方法は、静的サイトジェネレーターであるSSGをスケジュールビルドする場合などに最適です。記事では、CloudflareのアカウントIDおよびAPIトークンの取得方法、APIトークンの認証方法、GitHubリポジトリのSecrets and variablesに格納する方法、そして、GitHub ActionsのWorkflowの作成方法について説明されています。また、wrangler-actionを使用することで、wranglerのインストールなどの作業を簡素化できることも紹介されています。参考記事には、Cloudflareの公式ドキュメントやwrangler-actionのGitHubリポジトリも紹介されています。

Cloudflare PageへのデプロイをGitHub Actionsから実施してみました。

SSGをスケジュールビルドしたいケースなどで使えそうです。

CloudflareのアカウントIDを見つけた方法

「これが正解！」という自信は全くないのですが、とりあえずURLから判別できます。

ダッシュボードにログインした際のURLが https://dash.cloudflare.com/1234567890/pages/view/page-nameだった場合、1234567890がアカウントIDです。

もっとスマートな取得方法があれば、ぜひリプライなどで教えてください。

CloudflareのAPIトークンを取得する

APIトークンもダッシュボードから取得しましょう。

[Create Token]ボタンをクリックすると、カスタムトークンを作成する画面がでます。

[Get started]をクリックすると、トークン名や権限設定画面に移動します。

Cloudflare Pagesへのデプロイでは、Account / Cloudflare Pages / Editを選ぶと良さそうです。

内容を確認して、Create Tokenを実行しましょう。

APIトークンの認証（Verify）を行う

トークン発行画面で、次の様なcurlコマンドの実行を求められます。

curl -X GET "https://api.cloudflare.com/client/v4/user/tokens/verify" \
 -H "Authorization: Bearer QWERTZASDF" \
 -H "Content-Type:application/json"

{"result":{"id":"xxxxxxx","status":"active"},"success":true,"errors":[],"messages":[{"code":10000,"message":"This API Token is valid and active","type":null}]}

APIトークンを使う前に、コマンドの実行を終わらせましょう。

GitHubリポジトリに、CloudflareのアカウントIDやAPIトークンを登録する

取得したデータはリポジトリの環境変数(Secrets and variables > Actions)に保存しましょう。

GitHub ActionsのWorkflowを作成する

APIトークンとアカウントIDがわかれば、あとはGitHub Actionsのワークフローを作るだけです。

今回は、.github/workflow/cloudflare.yamlを次の内容で作成しました。

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - uses: actions/checkout@v2
      - name: Install, build, and upload your site
        uses: withastro/action@v0
      - name: Publish
        uses: cloudflare/[email protected]
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          accountId: ${{ secrets.CF_ACCOUNT_ID }}
          command: pages publish --project-name=${{ secrets.CF_PROJECT_NAME }} ./dist

cloudflare/wrangler-actionを使うことで、wranglerのインストールなどのステップを省くことができます。

https://github.com/cloudflare/wrangler-action