ブログ
Cloudflare Pages × Accessで限定公開サイトを作る
こんにちは、T.Uです。
デザイン案やプロトタイプ、進行中のLPなど、「URLで見せたいけど、誰でも見られる状態にはしたくない…」という場面はありませんか？
そんな時にとても便利なのが、Cloudflare PagesとCloudflare Accessの組み合わせです！
今回は、この2つを使って簡単に限定公開サイトを作成する手順を紹介します。
目次
Cloudflare Pagesとは？
静的サイトを高速かつ安全に公開できるサービスです。無料で利用でき、商用利用も可能です。
主なメリットと制限
- Git連携で自動更新
- GitHubやGitLabにプッシュするだけで、ビルドから公開まで自動で完了。
- プレビュー環境を自動生成
- ブランチごとに固有の検証URLが作られるため、お客様への事前確認もスムーズ。
- 強力な無料枠
- アクセス数や転送量（帯域幅）に制限がなく、アクセスが集中しても追加料金の心配不要。
- 利用時の制限
- 1ファイル最大25MBまで。（大容量の動画などはCloudflare R2等の外部ストレージとの連携が必要）
- 1プロジェクト最大2万ファイルまで。
- 基本は静的配信となるため、データベース連携などを行う場合はCloudflare Workers等の併用が必要。
Cloudflare Accessとは？
サイトにアクセスできる人を、メールアドレスやドメイン単位で制限できる機能です。
専用の認証サーバーやVPNを用意しなくても、ダッシュボード上の設定だけで安全な環境を構築することが可能です。
主なメリットと制限
- パスワードの使い回しを防止
- 全員で同じパスワードを共有しないため、漏洩リスクや、メンバー変更時にパスワードを再設定する手間がない。
- アカウント管理が不要（ワンタイムPIN）
- 許可したアドレスに届く「6桁の使い捨てコード」でログインするため、お客様側にパスワードを設定してもらう負担がない。
- サーバー・VPN管理が不要
- 難しいインフラ構築をせず、ダッシュボードの設定だけで最高峰のセキュリティを導入可能。
- 利用時の制限
- 無料枠では50ユーザーまでだが、小〜中規模のプロジェクトなら無料プランの範囲内で余裕を持って運用可能。
この構成でできること
全体の仕組みは非常にシンプルです。
- 閲覧者がサイトのURLにアクセスする
- Cloudflare Accessで認証・許可の判定を行う
- 認証されたユーザーにのみ、Cloudflare Pagesのサイトを表示する
従来のレンタルサーバーや「ベーシック認証」による運用と比べると、以下のようなメリットがあります。
サーバーの管理・保守が一切不要！
静的なHTML、CSS、JavaScriptだけで作られたサイトなら、VPSやレンタルサーバーのような初期設定、OSのアップデート、Webサーバーの構築・管理といった面倒な作業は不要です。
ファイルを直接ドラッグ＆ドロップするだけで始めることができます。
URL共有の手軽さはそのままに、閲覧者を限定！
全員共通のパスワード運用では、関係者が変わった際などの再設定の手間が発生します。
しかしCloudflare Accessであれば、以下のように柔軟かつピンポイントなルールで制限可能です。
client@example.com（特定のメールアドレス）だけを許可する- お客様の
@example.co.jp（ドメイン全体）を許可する - 自社メンバーとお客様の担当者だけを許可する
- 一時的に関係者を追加し、案件完了後にアクセス権を削除する
Google WorkspaceなどのIDプロバイダと連携していなくても、「ワンタイムPIN（ログインコード）」方式が使えるため、導入のハードルが低いのも魅力です。
幅広い用途にすぐ活用！
レンタルサーバーなどを別途契約することなく、「こちらから確認できます」と言える安全な環境がすぐに作ることが可能です。
- お客様にだけ公開するデザイン提案サイト
- 公開前のLPやキャンペーンページの確認環境（ステージング環境）
- 社内向けの簡易ポータル
- 採用候補者・イベント参加者向けの限定ページ
- 外部パートナーと共有するプロジェクト資料
設定手順
Cloudflare Pagesを設定する
まずはCloudflareのダッシュボードを開き、メニューから 「Workers & Pages」 を選択します。
その後、「アプリケーションを作成する」に進みます。
Workerの作成画面が表示されますが、今回はPagesを作成したいため、ページ下部にある「Pages」タブの 「始める」 に進みます。
今回はファイルを直接アップロードするため、「ファイルをドラッグアンドドロップする」 を選択します。
プロジェクト名に希望する名前を入力し、「プロジェクトの作成」 をクリックします。
ここで入力したプロジェクト名は、URLの一部になります。
アップロードするファイルを選択し、「サイトをデプロイ」 をクリックします。
今回は、Cloudflareが準備しているデモファイルを利用します。
プロジェクトが作成されると、 *.pages.dev のドメインが割り振られ、この時点で実際に閲覧できるようになります。
今回はこのまま独自ドメインを割り当てるため、「カスタムドメインを追加する」 に進みます。
※ pages.dev のURLのままでも運用は可能ですが、お客様向けには独自ドメインを設定したほうが信頼感に繋がり、URLの管理もしやすくなります。
「カスタムドメインを設定」 に進みます。
割り当てたいドメイン名を入力し、「続行」 をクリックします。
DNSレコードの確認画面に進みます。
対象のドメインをCloudflareで管理している場合は、「ドメインをアクティブにする」 をクリックするだけで自動的にサブドメインが設定されます。
なお、お名前.comやムームードメインなど他社サービスを利用している場合は、そのサービス側で指示されたCNAMEレコードを登録する必要があります。
数分程度でDNSレコードの検証が行われ、ステータスが 「アクティブ」 になれば完了です。
実際にブラウザで設定したカスタムドメインにアクセスすると、アップロードしたファイルが表示されます。
この時点で自動的にSSL（https）も有効化されています。
ここまでの手順でCloudflare Pagesの公開は完了ですが、現状ではURLを知っている人なら誰でも閲覧できる状態です。
ここからは、特定のメンバーだけが閲覧できるようにCloudflare Accessの設定を行います。
Cloudflare Accessを設定する
メニューから 「Access」 に進み、「アプリケーションを作成する」 をクリックします。
※初めて利用する場合は、事前にZero Trustの有効化（無料プランのセットアップ）が必要です。
「セルフホスト」の項目にある 「アプリケーションを作成する」 をクリックします。
アプリケーションの設定画面で、ホスト名やポリシーを入力します。
「パブリックホスト名」には、先ほどCloudflare Pagesで登録した独自ドメインを選択します。
もしプレビューページ（検証環境）も同時に制限したい場合は、サブドメインの欄に * （ワイルドカード）を入力しておきます。
続いて、アクセスを許可するルールを決める「Accessポリシー」を設定します。
「新しいポリシーを作成」 をクリックします。
今回はメールアドレスで認証するため、ポリシールールの設定で対象のメールアドレス（またはドメイン）を入力し、「ポリシーを保存」 をクリックします。
最後に 「作成」 をクリックすると、即座にサイトへのアクセス制限が有効になります。
設定後、登録したドメインにアクセスすると、以下のようなCloudflare Accessの認証画面が表示されるようになります。
閲覧者が自分のメールアドレスを入力して「Send login code」をクリックすると、そのアドレス宛にログインコードが届き、それを入力することで初めてサイトが閲覧可能になります。
運用時の注意点
Accessは「認証を挟む」仕組みであることを意識する
URLを知っているだけでは閲覧できなくなりますが、データ自体はCloudflare上にデプロイされています。
万が一の設定ミスや、認証後の挙動を考慮し、以下の点を気をつける必要があります。
- HTMLやJavaScriptなどのソースコードに、機密情報（パスワード等）を直接記述しない。
- APIキーやトークンをフロントエンド側に埋め込まない。
- サイト内からダウンロードできる資料にも、必要以上の機密情報を入れない。
- プロジェクトが終了したら、Accessの許可ユーザー一覧から該当メンバーを削除する。
- 使用しなくなった古い検証サイトは、プロジェクトごと削除するかアクセス制限を見直す。
初期URLの公開状態も確認する
独自ドメイン側にだけAccessを設定した場合、Pagesが自動発行する初期URL側が認証なしでアクセスできる状態のまま残ってしまうことがあります。
そのため、サブドメインやプレビュー環境にもAccessを適用するようにしておく必要があります。
プレビュー環境（検証環境）の保護
Git連携（GitHub等）を利用している場合、ブランチやPull Requestごとに自動でプレビューURLが生成される運用ができて非常に便利です。
しかし、本番公開前の未解禁情報が先にプレビュー側に掲載されるケースも多々あります。
実際に運用する場合は、本番URLだけでなく、これらプレビューURLにもAccessの制限がかかるよう設定する必要があります。
まとめ
Cloudflare PagesとCloudflare Accessを組み合わせれば、自前でサーバーを管理・維持するコストを一切かけずに、関係者だけが安全に見られる共有サイトを構築することができます。
特にお客様とデザイン案や文言、公開前サイトの最終すり合わせを行う場面において、以下のようなメリットもあります。
- URLひとつで最新版を共有
- Git連携で更新も自動化
- メールアドレス単位で簡単に制限
- ワンタップで権限削除
株式会社ウイングドアは福岡のシステム開発会社です。
現在、私達と一緒に"楽しく仕事が出来る仲間"として、新卒・中途採用を絶賛募集しています！
ウイングドアの仲間達となら楽しく仕事できるかも？と興味をもった方、
お気軽にお問い合わせ下さい！