先日にCloudflare PagesにWebサイトをデプロイする手順をまとめました。
今度は管理画面からデプロイするのではなく、GitHub Actionsを使って自動デプロイも設定しましたので、その手順をまとめます。
0. 準備
まずはデプロイ先のCloudflare Pagesのプロジェクトについて以下の情報を確認しておきます。
- プロジェクト名
- アカウントID
- トークン
0-1. Cloudflare Pages プロジェクト名の確認
- Cloudflare Dashboard にログイン
- 左サイドバーの 「Workers & Pages」 をクリックし、現在の公開されているプロジェクト名を取得する
プロジェクト名: your-project-name
0-2. Cloudflare Account ID の取得
- Cloudflare Dashboard にログイン
- 左サイドバーの 「Workers & Pages」 をクリックし、右側の 「Account ID」 をコピー（赤い囲いの箇所）
Account ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
0-3. Cloudflare API Token の作成
- Cloudflare Dashboard にログイン
- 右上のプロフィールアイコンをクリックし、メニューから 「My Profile」 を選択
- 左サイドバーの 「API Tokens」 をクリックして「Create Token」をクリックする
- 「Create Custom Token」の「Get started」ボタンをクリックする
- 以下の権限を設定する
- Token name: GitHub Actions Deploy など任意の名前
- Permissions:
- Account: Cloudflare Pages / Edit
- Zone: Zone / Read（カスタムドメイン使用時）
- Account Resources: Include / Your Account
- Zone Resources: Include / All zones（またはSpecific zone）
- 「Continue to summary」 をクリックしする。
- 設定内容を確認して「Create Token」 をクリックする。
- API Tokenが発行されるのでコピーしておきます。
※ここで発行されるAPI Tokenは再度確認できないため、必ずコピーして安全な場所に保存してください。
API Token: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
1. GitHub Secretsの設定
取得した情報はGitHubリポジトリのSecretsに登録します。
- GitHubリポジトリのページを開く
- 画面上部の「Settings」タブをクリック
- 左サイドバーの「Secrets and variables」→「Actions」をクリックして、「New repository secret」ボタンをクリック
- NameとValueを以下を設定して「Add secret」ボタンをクリックして保存します。
| Name | Value |
| CLOUDFLARE_ACCOUNT_ID | 先ほどコピーしたAccount ID |
| CLOUDFLARE_API_TOKEN | 先ほどコピーしたAPI Token |
- Secretsに登録されたことを確認します。
2. GitHub Actions ワークフローの作成
プロジェクトの「.github/workflows」フォルダに以下の内容でYAMLファイルを作成します。
例えば「deploy-develop.yml」という名前にします。
# ============================================
# Cloudflare Pages デプロイ ワークフロー
# ============================================
# developブランチへのプッシュ時に自動でビルド＆デプロイを実行します
name: Deploy to Cloudflare Pages
# ----------------------------------------
# トリガー設定
# ----------------------------------------
on:
# developブランチへのpush時に実行
push:
branches:
- develop
# 手動実行も可能にする
workflow_dispatch:
# ----------------------------------------
# ジョブ定義
# ----------------------------------------
jobs:
deploy:
name: Build and Deploy
runs-on: ubuntu-latest
# ----------------------------------------
# 実行ステップ
# ----------------------------------------
steps:
# ----------------------------------------
# Step 1: コードのチェックアウト
# ----------------------------------------
# リポジトリのコードをランナーにクローンします
- name: Checkout repository
uses: actions/checkout@v4
# ----------------------------------------
# Step 2: Node.js のセットアップ
# ----------------------------------------
# 指定したバージョンのNode.jsをインストールします
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '22'
cache: 'npm'
cache-dependency-path: './src/package-lock.json'
# ----------------------------------------
# Step 3: 依存関係のインストール
# ----------------------------------------
# package.jsonに基づいてnpmパッケージをインストールします
- name: Install dependencies
run: npm ci
working-directory: ./src
# ----------------------------------------
# Step 4: Astro ビルド
# ----------------------------------------
# 静的サイトを生成します（出力先: ./src/dist）
- name: Build Astro site
run: npm run build
working-directory: ./src
# ----------------------------------------
# Step 5: Cloudflare Pages へデプロイ
# ----------------------------------------
# ビルド成果物をCloudflare Pagesにアップロードします
- name: Deploy to Cloudflare Pages
uses: cloudflare/wrangler-action@v3
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
command: pages deploy ./src/dist --project-name=your-project-nameこのワークフローは、「develop」ブランチにコードがプッシュされるたびに実行され、Cloudflare Pagesに自動でデプロイされます。
また必要に応じてGithub Actionsの画面から手動で実行することも可能です。
3. 動作確認
- GitHubリポジトリの「develop」ブランチにコードをプッシュします。
- GitHub Actionsの「Actions」タブを開き、ワークフローが正常に実行されることを確認します。
- Cloudflare Pagesのプロジェクトページで最新のデプロイが反映されていることを確認します。
これでプッシュと同時にデプロイが完了するように出来ました。
他にも自動テストなどを入れておいて、CI/CDをいい感じ出来ると思います。