GitHub Actionsを使ってプッシュするたびにCloudflare Pagesにデプロイする方法

June 10, 2023

Step 1: Cloudflareの認証情報をGitHubのSecretsに登録する
Step 2: GitHub Actionsの設定
Step 3: デプロイ

Step 1: Cloudflareの認証情報をGitHubのSecretsに登録する

Cloudflare Pagesの公式GitHub Actionを使うためには、Cloudflareの認証情報（Account IDとAPIトークン）が必要です。

APIトークンの取得

APIトークンはこの画面から作成できます。色々な権限が設定できますが、今回はCloudflare Pagesの権限があれば十分です。「Custom token」から、Pagesの編集権限だけを付与したトークンを作成します。

Account IDの取得

Account IDは、CloudflareのダッシュボードのURLに含まれています。 https://dash.cloudflare.com/<ACCOUNT_ID>

GitHubのSecretsに登録

GitHubのリポジトリの「Settings」 > 「Secrets and variables」 > 「Actions」から、2つのSecretsを登録します。名前はCLOUDFLARE_API_TOKENとCLOUDFLARE_ACCOUNT_IDにします。

Step 2: GitHub Actionsの設定

GitHub Actionsの設定ファイルは、以下のようになります。.github/workflows/publish.ymlに以下の内容を記載します。 Cloudflareの公式ドキュメントのままです。

name: Cloudflare Pages
on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    name: Deploy to Cloudflare Pages
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      # Run your project's build step
      - name: Build
        run: npm install && npm run build
      - name: Publish
        uses: cloudflare/pages-action@1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: YOUR_PROJECT_NAME # e.g. 'my-project'
          directory: YOUR_DIRECTORY_OF_STATIC_ASSETS # e.g. 'dist'
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

projectNameはCloudflare Pagesのプロジェクト名、directoryはビルドした静的ファイルのディレクトリを指定します。 secrets.GITHUB_TOKENは特に設定する必要はありません。GitHubが自動的に設定してくれます。

Step 3: デプロイ

GitHub Actionsの設定が完了したら、GitHubにプッシュするだけでCloudflare Pagesにデプロイされます🎉

Table of Contents