Cloudflare Pagesに認証付きpreviewを加える

Cloudflare Pages は無料で静的サイトを公開でき、Git のブランチを使って事前にプレビューを確認することも可能です。

プレビュー用のブランチ（例: draft）を作成し、Cloudflare Pages に push すると、draft.example.pages.dev のような URL で自動的にプレビューサイトが生成されます。限定公開にしたい場合は、Cloudflare Access を使って Google や GitHub を認証に設定し、アクセス制限をかけることができます。

最終確認後にプレビュー用のブランチを公開用ブランチにマージすれば、自動的に本番公開されます。

Cloudflare Pages は、次の理由で静的な Web ページを公開するのに非常に便利なサービスです。

1. 無料であること¹。
2. Web ページの元となるデータをアップロードすると、自動的にサイト・ジェネレータが Web ページを build と公開をしてくれること。

ただ、Web ページを公開する前にどんな感じか見ておきたいことがあります。それも Git のブランチを使うことで簡単に実現できます。

目的

許可された人にだけ見られる preview サイトを作り、Web ページを公開前に確認できるようにする。

方法

手順としては、大まかに次のようになります。

1. Git に preview 用のブランチを作成する。
2. 認証機構を作成する。今回は、Google の AOuth2.0 と GitHub の両方を使えるようにします。
3. preview 用サイトを閲覧できるユーザを制限する認証機構をセットアップする。

preview 用のブランチを作成

これは普通に次のコマンドで preview 用のブランチを作成します。今回のブランチ名はdraftとしていますが、任意の名前を使用できます。

同時にupstreamを設定しておくと、次回以降git pushだけでブランチを push できるようになります。

# The branch name "draft" is just an example. Any branch name is fine.
# create branch
git checkout -b draft
# set upstream
git push --set-upstream origin draft

preview 用サイトの作成

初期設定では、初期設定時に選んだ Production 用のブランチ以外は、全て Preview 用のブランチとみなされます。そのため GitHub にブランチを push した段階で Preview 用のサイトが準備されているはずです。

そのため Cloudflare Pages が指定した URL (*.pages.dev)の前にサブドメインとしてブランチ名を付けた URL で preview 用のサイトにアクセスできます。例えばブランチ名が draft で、サイトのアドレスがexample.pages.devだとすると、preview 用のサイトの URL は、draft.example.pages.devとなります。なお、このサイトへの CNAME による alias は機能しませんでした。

特定のブランチを Preview 用にする

特定のブランチに制限する場合には、SettingsからBranch controlの鉛筆アイコンをクリックして、Preview branchのCustom branchedで指定します。

SettingsからBranch controlの鉛筆マークをクリックするとBranch controlダイアログが開きます。

preview 用サイトの認証機構の作成

Settingsの下の方にあるGeneralにAccess policyがあるので、これを有効にします。最初は、Enableと書かれていますが、これは有効になっているという意味ではなく、これをクリックして有効化するという意味です。

Enableをクリックすると、Cloudflare Access のページにジャンプして、料金プランの選択とクレジットーカードまたは PayPal の登録が求められます。料金プランは、「無料」で問題ありません。

サイドバーからAccess / Applicationsを選択すると作成した Pages の一覧が表示されるので、設定する Pages を選択します。ダイアログが開くのでConfigureを選択します。View moreを選択したときは、ページ内にConfigureボタンがあるので、これをクリックします。

Manage login methodsリンクをクリックして、さらに Login methods 欄のAdd newを栗屈指、認証に使用したいサイトを選びます。

設定の入力欄とともに設定方法が表示されるので、それに従って AOuth クライアントの設定をします。

この時 AOuth に使用する URL の設定で<your-team-name>が出てきますが、これは左のバーにあるSettingsのCustom Pagesから取得します。

Team domain欄がありますので、ここから取得します。

複数のサイトがある場合は、認証機構の作成は一度でよく、後は各サイトごとに認証機構を有効にするだけで OK です。

認証機構の有効化

設定が完了したら、Manage login methodsをクリックしたページに戻り、有効にする認証方法を選択して、右下にあるSave Applicationsボタンをクリックして設定を保存します。

最初からある Opne-time PIN は、誰でも PIN を入手できるので、選択から外しておきます。

認証機構の確認

これで認証が有効になったので、実際に機能するかブラウザのシークレット・ウィンドウを開いて確認します。

preview 用のブランチを公開用ブランチに反映

Preview 用のサイトで Web ページを確認し、問題がなければ公開用のブランチに反映させます。これは、GitHub 上で行われる通常の Pull-Request (PR)と全く同じです。PR が取り込まれて公開用ブランチに merge されたら、自動的に Cloudflare Page で build が行われて Web ページが公開されます。