Cloudflare Pagesで開発環境をアクセス制御する

Cloudflare PagesでPreview Branchを公開していると、開発中のページが誰でも見られる状態になってしまいます。Cloudflare Zero Trustを使えば、GitHub認証による無料のアクセス制御を設定できます。

Cloudflare Zero Trustとは

Cloudflareで提供しているページや様々なSaaSサービスへのアクセスに対して、OAuthなどによる認証を付与してくれるサービスです。

今回はGitHub認証で特定アカウントのみを許可する設定を行います。

GitHubのOAuthアプリケーション作成

GitHubの設定画面で以下の項目を入力してOAuthアプリケーションを作成します。

• Application name: cloudflare_zero_trustなどの任意の名前
• Homepage URL: 保護対象のURL（例：https://dev.example.com）
• Application Description: 任意の説明
• Authorization callback URL: https://{your-team-name}.cloudflareaccess.com/cdn-cgi/access/callback

作成後、Client IDとClient Secretをコピーしておきます。

Cloudflare Zero Trust Accessの設定

認証設定

Zero Trust → Settings → Authentication → Login methodsでGitHubを追加し、先ほどのClient IDとClient Secretを入力します。

Application作成

Access → Applications → Add an applicationからSelf-hostedを選択し、以下を設定します。

• Application name、Session Duration
• Application domain（Domain、Subdomain、Path）
• Identity providersで「Accept all available identity providers」をオフに設定

ポリシー設定

GitHubのメールアドレスに基づいて、特定ユーザーのみをAllowに設定します。

動作確認

設定が完了すると、保護されたURLにアクセスした際にGitHub認証画面が表示され、認証後にページが閲覧可能になります。

無料で利用できるので、コスパよく開発環境を保護したい場合におすすめです。