🐥

Cloudflare PagesにGitHub Actionsからデプロイする

2024/10/02に公開

Cloudflare Pages は無料なのに非常に優しくて、コンソールから GitHub と連携させることで自動的にデプロイをしてくれるようになります。
しかし要件によっては提供されている機能を使い、ただデプロイをするだけではなく、GitHub Actions を使ってデプロイしたいというようなこともあると思います。
今回は簡単ではありますが GitHub Actions からデプロイする方法をまとめてみました。

 GitHub Actions から GitHub Pages へデプロイする
 選択肢 1実は GitHub Actions から Cloudflare Pages へデプロイするための Actions が公式で提供されています。
https://github.com/cloudflare/pages-action
しかし最後のリリースが 2023 年の 5 月ということであまりメンテナンスされていないのかな？とも思っているので、少し別の方法で今回はやります。

 選択肢 2Cloudflare Pages へデプロイするためには、wrangler コマンドを使ってデプロイすることもできます。
こちらも公式から GitHub Actions で wrangler コマンドを使えるようにするための Actions が用意されています。
https://github.com/cloudflare/wrangler-action
こちらは先程とは違い、7 月に最後のリリースが行われています。

 使ってみる早速ですが以下のコードが実際に試してみたものです。
今回は Astro のサイトを公開しています。
release-preview.yml
name: Release preview

on:
  push:
    branches:
      - feature/*

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

env:
  ENV_TYPE: preview
  PROJECT_NAME: astro-vcan-hp-front

jobs:
  deploy:
    runs-on: ubuntu-24.04
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ vars.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy dist --project-name=${{ env.PROJECT_NAME }}
これ非常に良いのが、Pages のコンソールで指定しているプロダクションブランチ以外でこの Actions が発火した場合は自動的にプレビューブランチにリリースされるようになっています。
今回は環境変数をプレビューとプロダクションで切り替える必要があったのでファイルをプレビューリリースとプロダクションリリースで分けていますが、うまくやれば 1 つのファイルでどちらもできそうな気がします。

 まとめ個人であったり小さい静的サイトをデプロイするなら Cloudflare Pages がとにかく便利で使い倒していきたいですが、Git 連携以外の方法でもデプロイできるとなると更に自由度が上がって、レビュー体制をしっかり構築したり GitHub Actions で様々なことを行いながら運用していくような少し大きいプロジェクトでも使えるかもしれないですね。

GitHub Actions から GitHub Pages へデプロイする

選択肢 1

選択肢 2

使ってみる

まとめ

Discussion