GitHub ActionsからCloudflare pagesにDirect Uploadする

GitHub ActionsからCloudflare Pagesにデプロイする方法について、何度か設定しているものの、いつも忘れてしまうので、記録しておきます。

参考資料:

Cloudflare Pagesへのデプロイ方法には、他にもGit Integrationがあります。

GitHubのリポジトリと連携するには一見こちらのほうが適していそうですが、デプロイ時の細かい処理を組むことが難しいため、ここで紹介するDirect Uploadを使うことをおすすめします。

前提条件:

Cloudflare Pagesのアカウントを作成済みであること
パッケージマネージャーにpnpmを使用しているため、以下のコマンド例もpnpmを使用しています。npmやyarnの場合は適宜読み替えてください。

Pagesプロジェクトを作成する

まず、wranglerというCloudflareのCLIツールをインストールします。

pnpm install wrangler --save-dev

インストールできたら、バージョンを確認します。 v3系のバージョンが表示されればOKです:

pnpx wrangler -v

wranglerを使ってPagesのプロジェクトを作成します:

pnpx wrangler pages project create

ブラウザが開いてOAuth認証を求められるので、認証を行います。

プロンプトで入力を求められるので、適宜入力します:

✔ Enter the name of your new project:
- Cloudflare Pagesのプロジェクト名。GitHubのリポジトリ名と同じにするとわかりやすいです。
✔ Enter the production branch name:
- Cloudflare Pagesのプロジェクト内のプロダクションブランチ名。GitHubのプロダクションブランチ（mainブランチ）と同じにします。

wranglerを使って作成したプロジェクトを確認できます:

pnpx wrangler pages project list

GitHub Actionsを設定する

GitHub Actionsの設定ファイルを作成して、Cloudflare PagesにデプロイするActionを追加します。

適宜、設定値を変更して以下の設定ファイルをリポジトリに作成します:

# `.github/workflows/release.yml`

name: Release

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  release:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write # cloudflare/pages-action@1 でデプロイメントを作成するために必要
    steps:
      - uses: actions/checkout@v4

      - name: Use Node.js
        uses: actions/setup-node@v4

      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          version: 8
          run_install: false

      - name: Get pnpm store directory
        id: pnpm-cache
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

      - uses: actions/cache@v4
        name: Setup pnpm cache
        with:
          key: "${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}"
          path: "${{ steps.pnpm-cache.outputs.STORE_PATH }}"
          restore-keys: |
            "${{ runner.os }}-pnpm-store-"

      - name: Install dependencies
        run: pnpm install

      - name: Build production bundle
        run: pnpm build

      - name: Publish to Cloudflare Pages
        uses: cloudflare/pages-action@1
        with:
          accountId: "${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" # CloudflareのアカウントID
          apiToken: "${{ secrets.CLOUDFLARE_API_TOKEN }}" # CloudflareのAPIトークン
          projectName: your-project-name # 先ほど作成したCloudflare Pagesのプロジェクト名
          directory: ./dist # ビルドしたファイルが入っているディレクトリ
          gitHubToken: ${{ secrets.GITHUB_TOKEN }} # GitHub Actionsのdeploymentsを作成する場合に必要
          # オプション: 公開するブランチを切り替えます。
          # デフォルトではこのワークフローをトリガーしたブランチになります
          branch: main
          # オプション: Wranglerのバージョンを変更します。特定のバージョンや'beta'などのタグを指定できます
          wranglerVersion: "3"

Actionsで参照しているsecretsは、GitHubのリポジトリのSettings -> Secretsで登録できます。

アカウントIDの調べ方・トークン発行の方法は、冒頭に記載したブログ記事が参考になります:

以上で設定は完了です。あとはmainブランチにプッシュするか、Actionsのworkflow_dispatchから手動で実行すると、Cloudflare Pagesにデプロイされます。