Cloudflare Pages では公式に Staging 環境を構築する方法はドキュメントに載っていません。(私の知る限りは)
Cloudflare の Discord で、Staging 環境がほしいと要望を上げたところ、ややトリッキーな方法ではあるものの、現在も可能だとアドバイスを受けましたので、共有したいと思います。
前提
GitHub で staging ブランチに変更を push/merge した際に、staging ブランチの内容が stg.example.com でアクセス可能なようにします。
同様に、main ブランチの内容は example.com でアクセス可能なようにします。
- Cloudflare Pages のプロジェクト名: example-prj
- ステージング環境用 Git(Hub) ブランチ名: staging
- ステージング環境のドメイン名: stg.example.com (サブドメインでなく example-stg.com など別ドメインを紐付けることも可能です)
- 本番環境用 Git(Hub) ブランチ名: main
- 本番環境のドメイン名: example.com
1. GitHub で staging ブランチを作成する
普通に作成します。
2. Cloudflare Pages の Custom domains に stg.example.com を追加する。
Cloudflare Pages のダッシュボードに Custom Domains というタブがありますので、そちらから stg.example.com を追加します。
3. stg.example.com が staging ブランチのデプロイ先を見るように修正する
カスタムドメインを Cloudflare Pages に追加すると同時に、DNS レコードにも stg.example.com が追加されています。
これは CNAME で example-prj.pages.dev を指しています。
この example-prj.pages.dev の前にステージング環境のブランチ名を追加して、staging.example-prj.pages.dev に修正します。
この時、Orange Cloud にしておくよう注意して下さい。Gray Cloud だとうまく staging ブランチを向いてくれないようです。
(なので、試してはいませんが、DNS が Cloudflare でない場合はドメインを紐づけることができないかもしれません。その際の次善策については後述。)
なぜこれで動くのか?
実はそれぞれのブランチがデプロイされた際、ブランチ名.example-prj.pages.dev というサブドメインでアクセスできるようになっています。
そのサブドメインに対して、独自ドメインを紐づけただけです。
DNS が Cloudflare でない場合は今回の方法は取れない可能性がありますが、staging.example-prj.pages.dev をステージング環境として用いるという方法もあります。