Cloudflare PagesへデプロイしたサイトにCloudflare Accessでアクセス制限をかける
Cloudflare PagesにデプロイしたサイトにCloudflare Accessで簡単にアクセス制限の設定ができたのでその記録です。
※Freeプラン登録の手順は省きます。
Cloudflare Accessとは
Cloudflare AccessはCloudflare Zero Trustの一部で、安全なアプリケーションアクセスを提供します。ユーザー認証、SSO、MFAなどの機能を通じてゼロトラストセキュリティを実現します。
内容 | |
---|---|
ユーザー数の制限 | 最大50人のユーザーが利用可能(Freeプラン) |
基本的なセキュリティ機能 | シングルサインオン(SSO)、多要素認証(MFA)、デバイス姿勢チェック |
アプリケーションの制限 | 特定の数のアプリケーションに対するアクセス制御 |
サポートの制限 | コミュニティサポートやセルフサポートリソースのみ利用可能 |
シンプルなポリシー設定 | 基本的なポリシー設定が可能 |
アイデンティティプロバイダーの統合 | Google Workspace、Microsoft Azure ADなどの主要プロバイダーと統合 |
トラフィック暗号化 | 全てのトラフィックが暗号化され、セキュアな通信を保証 |
ログイン試行の監視 | ユーザーのログイン試行を監視し、不正なアクセスを検出 |
セッション管理 | セッションのタイムアウト設定など、セッション管理機能 |
簡易設定と導入 | 簡単に設定でき、すぐに導入可能 |
アクセスログ | 基本的なアクセスログを提供し、アクセスの監査が可能 |
シームレスなユーザー体験 | ユーザーにとってシームレスなアクセス体験を提供 |
IP制限 | 特定のIPアドレス範囲からのアクセスを制限可能 |
リアルタイム監視 | リアルタイムでのアクセス監視機能 |
バージョン管理 | ポリシーや設定のバージョン管理が可能 |
”ChatGPT”
Cloudflare Pagesへデプロイしたサイトにアクセス制限を設定する
ダッシュボードのサイドバーからZero TrustまたはWorkers & Pagesの管理画面どちらからでも設定が可能です。
Workers & Pagesから設定
- ダッシュボードからWorkers & Pagesを開く
- アクセス制限をかけるサイトの「管理」へ
- Access ポリシーの「アクセスポリシーを有効にする」
- プレビューのデプロイに対してアクセスポリシーが有効になりました

プレビューURLにアクセスするとCloudflare Accessの画面が表示されます。

Emailを入力し「Send me a code」をクリックするとワンタイムPIN入力画面に遷移します。Cloudflareから「Login code for xxx.xxx.pages.dev」とメールが届きます。
記載のワンタイムPIN入力、「Sign in」で認証が通るとサイトが表示されます。
※最初のリクエストから10分後に期限切れます。
プロダクションURLにも制限を適用する
- 管理ページのAccess ポリシー>ポリシーを管理からApplicationsへ移動
- 自動で作成されたApplicationの「Configure」を開く
- 「Overview」タブに移動
- 「+ Add domain」で条件を追加
- Subdomainは空欄の状態で保存

プロダクションURLにアクセスして認証画面が表示されたら成功です。
許可していないアクセスの場合
CloudflareのForbiddenページが表示されます。

Zero Trustから設定
以下は、特定のメールアドレスだけ認証を許可するための手順です。
- ダッシュボードからZero Trustを開く
- サイドバーのAccess>Applicationsを開く
- 「+Add an application」をクリックし開いたページ内の「Self-hosted」の「Select」を選択
- 設定の登録
- Application name:設定名
- Session Duration:セッション時間
- Application domain:対象ドメイン(サブドメイン)
- ポリシー設定の登録
- Policy name:ポリシー設定名
- Action:アクション(許可を選択)
- Session duration:セッション期間
- ルールの登録
- Selector:Emailsを選択
- Value:許可するメールアドレス
- 次へ・・で完了まで進む

特定IPだけアクセスを許可する
すでにアクセス制限をしているサイトに対して、特定IPだけアクセスを許可する設定を追加してみます。
- ダッシュボードからZero Trustを開く
- サイドバーのAccess>Applicationsを開く
- 条件を追加するApplicationの「Configure」を開く
- 「Policies」の「+Add a policy」をクリックし開いたページ内のポリシーを登録
- Policy name:ポリシー設定名
- Action:アクション(Bypassを選択)
- ルールの登録
- Selector:IP rangesを選択
- Value:許可するIP
- 「Add policy」をクリックして表示されたページの「Save application」をクリックで完了


Policiesページの認証条件は上から順番に実行されます。(上の図では、メールアドレス認証>IPの順)
認証の順番を変更する場合は、左端にある「︙」をドラッグで上下に移動するか、右端にある「︙」のMove up/Move down/Move toで移動して入れ替えが可能です。
設定のテストを実行する
- ダッシュボードからZero Trustを開く
- サイドバーのAccess>Applicationsを開く
- テストをするApplicationの「Configure」を開く
- 「Policies」の「Test your policies」をクリック
- メールアドレスを入力し「Test policies」で実行

許可されていない場合「Access denied」と表示され、許可されている場合「Access granted」とPoliciesには実行された結果が表示されます。