microCMSで更新が発生したときに、Cloudflareにアップしているページを自動で更新する仕組みを作りたい。
今ならGitHub Actionsを使うのがよい。
このGHA用のymlをリポジトリに置いておけばOK。今回はmicroCMSから静的なページを生成するのに、Astroを使っている。
name: Deploy to Cloudflare Pages
on:
push:
branches: [ main ]
repository_dispatch:
types: [update]
workflow_dispatch:
jobs:
build-and-deploy:
runs-on: ubuntu-latest
permissions:
contents: read
deployments: write
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci --no-audit --no-fund
- name: Build
env:
MICROCMS_SERVICE_DOMAIN: ${{ secrets.MICROCMS_SERVICE_DOMAIN }}
MICROCMS_API_KEY: ${{ secrets.MICROCMS_API_KEY }}
run: npm run build
- name: Publish to Cloudflare Pages
uses: cloudflare/wrangler-action@v3
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
command: pages deploy dist --project-name=${{ secrets.CLOUDFLARE_PAGES_PROJECT }}このファイルの初期状態はAIに生成してもらったんだけど、ところどころ古くて最初は動かなかった。
今はwrangler-actionを使うのがよい。AIが最初に提案してきたcloudflare/pages-actionはすでにDeprecatedであった。
CLOUDFLARE_ACCOUNT_IDはメールアドレスではない。wranglerコマンドで以下のように叩くとアカウントのIDがわかる。
またはWebのコンソールでも確認できるけど、気がつくまでに時間がかかった。
$ npx wrangler whoami