実家の写真や動画を、間取り図から部屋を選んで見られる Web ページを作りました。遠くに住む家族に見せたいのですが、家の中の写真なので、URL を知っていれば誰でも見られる状態にはしたくありません。
いろいろ調べて、Cloudflare Pages で公開して、Cloudflare Access で「許可したメールアドレスの人だけ」に絞る形にしました。無料の範囲で収まり、見る側はアカウントもアプリも要らず、メールに届くコードを入れるだけです。とても快適だったので、画面の流れと、つまずいたところを書こうかと思います。
この記事でわかること – GitHub のリポジトリから、Cloudflare Pages でサイトを公開する手順 – Cloudflare Access で、許可したメールアドレスの人だけが見られるようにする手順 – 無料でどこまで使えるか（転送量・ビルド・ファイルの大きさ・人数）と、HTTPS の証明書の期限 – 手順の途中でつまずいたところ（Workers と Pages の入口、プレビューと本番の守り分け、Free プランの有効化）
どういう仕組みか
| 役割 | 使ったもの | 内容 |
|---|---|---|
| サイトの公開 | Cloudflare Pages | GitHub のリポジトリと連携し、main に push するたびにビルドして公開する |
| 見られる人を絞る | Cloudflare Access（Zero Trust） | サイトを開くとログイン画面が出て、許可したメールアドレスに届くコードを入れた人だけが見られる |
GitHub Pages はリポジトリを非公開にしても、公開したサイトは誰でも見られます。見る人を絞りたいなら、公開する側に「入口で止める」仕組みが必要で、それを Cloudflare Access が受け持ちます。
見る側の流れは、こうなります。
- 送られた URL（
https://〇〇.pages.dev/）を開く - メールアドレスを入れる画面が出る
- そのアドレスに 6 桁のコードが届くので、入れる
- 許可リストにあるアドレスなら、サイトが開く
コードを入れる画面には、迷惑メールのフォルダも確かめるよう書かれています。コードは 10 分で無効になります。
手順1：Cloudflare Pages でサイトを公開する
Workers & Pages から作る
Cloudflare のダッシュボードの「Workers & Pages」を開き、右上の「Create application」を押します。
次の画面は Workers を作る画面です。ここで「Continue with GitHub」を押すと Workers として作る流れになり、Deploy command など見慣れない欄が出てきます。Pages で作るときは、画面の一番下にある「Continue to Pages」を押します。
私は最初、上の「Continue with GitHub」で進んでしまい、Build output directory を入れる欄が見つからずに迷いました。
リポジトリとビルドの設定
「Continue to Pages」の先で「Import an existing Git repository」を選びます。
GitHub と連携して、公開したいリポジトリを選び、「Begin setup」を押します。
ビルドの設定は、私の場合（Vite で作ったサイトが web/ にある）はこうでした。
| 項目 | 入れた値 |
|---|---|
| Production branch | main |
| Framework preset | None |
| Build command | npm run build |
| Build output directory | dist |
| Root directory | web |
| Environment variables | NODE_VERSION = 24（手元と同じ Node のバージョンでビルドするため） |
「Save and Deploy」を押すと、リポジトリの取得とビルドが始まり、1〜2 分で公開されます。その後は main に push するたびに本番が作り直され、ほかのブランチに push するとプレビュー用のデプロイができます。
最初の作成では、原因のわからないエラーが出て止まりました。少し待ってもう一度「Save and Deploy」を押したら通ったので、一時的な不調だったようです。
手順2：Cloudflare Access で見られる人を絞る
公開した直後は、URL を知っていれば誰でも見られる状態です。 この先の手順は、続けてすぐ終わらせるのがおすすめです。中身を入れる前に Access まで済ませておけば、より安心です。
プレビュー用の URL を守る
Pages のプロジェクトの Settings → General にある「Preview access」の「Restrict previews」を押します。
ここで一つ注意があります。説明文にあるとおり、ここで守られるのはプレビュー用の URL（〇〇.my-project.pages.dev のような、デプロイごとの URL）だけで、本番の URL（my-project.pages.dev）は守られません。
This protects preview deployment URLs only. Production pages.dev and custom domains are managed separately in Zero Trust.
押すと、表示が「Preview deployments are restricted by a Cloudflare Access policy.」に変わり、Zero Trust 側に Access のアプリができます。
Zero Trust の Free プランを有効にする
本番の URL を守るには、Zero Trust で、できた Access のアプリに本番の URL を足します。ところが、アプリの画面を開いても、URL を足すボタンが見当たりませんでした。
Zero Trust のプランをまだ有効にしていなかったのが原因で、アプリの追加画面を開こうとすると「Finish your account setup」と出ました。
「Choose a plan」から Free を選びます。Access の料金のページによると、Free プランで使えるのは 50 人までです。
私が登録したときは、Free プランでも支払い方法（カード）の登録を求められました。 チェックボックスは 2 つで、利用規約への同意と、無料枠を超えた分をこのカードに請求してよいかの許可です。今回は家族に見せるだけなので、無料の範囲で使うつもりです。どんなときに請求されるかは、登録の画面の説明で確かめてください。
本番の URL を足して、許可するメールアドレスを入れる
プランを有効にした後にアプリの画面を開き直すと、「+ Add public hostname」が出てきました。
押して 2 行目を足し、本番の URL を入れます。
| Subdomain | Domain | |
|---|---|---|
| 1 行目（最初からある。プレビュー用） | * |
my-project.pages.dev |
| 2 行目（足す。本番用） | 空欄 | my-project.pages.dev |
同じ画面の下にある Access policies で、ポリシー（Allow Members - Cloudflare Pages）を編集し、Include に「Emails」を選んで、家族のメールアドレスを入れます。自分のアドレスも忘れずに入れます。
最後に画面右下の「Save」を押します。押さないと、足した URL もポリシーも保存されません。
確かめる
シークレットウィンドウで本番の URL を開き、メールアドレスを入れる画面が出れば完了です。プレビュー用の URL（Pages の Deployments に並んでいる、英数字付きの URL）も開いて、同じ画面が出るか確かめておきます。
ターミナルからなら、curl で、ログイン画面（〇〇.cloudflareaccess.com）に飛ばされることを確かめられます。
curl -sI https://my-project.pages.dev/ | grep -i location家の中の写真を置いているので、トップページだけでなく、写真のファイルの URL も直接開いて確かめました。 ログインしていない状態で、本番・プレビュー用・ブランチ別の URL に、それぞれトップページと写真のファイルを curl で頼んだ結果です（URL は置き換えています）。
| URL | トップページ | 写真のファイル |
|---|---|---|
my-project.pages.dev（本番） |
302（ログイン画面へ） | 302（ログイン画面へ） |
abc12345.my-project.pages.dev（プレビュー用） |
302（ログイン画面へ） | 302（ログイン画面へ） |
main.my-project.pages.dev（ブランチ別） |
302（ログイン画面へ） | 302（ログイン画面へ） |
どれも、ファイルの中身は返らず、ログイン画面（〇〇.cloudflareaccess.com）に飛ばされました。存在しないファイル（/no-such-file.mp4）を頼んでも同じ 302 だったので、Access はファイルがあるかどうかを見る前の入口で止めているようです。動画のファイルも、同じように止まると思います。
独自ドメインを付けている場合は、Preview access の説明にあるとおり、そのドメインも Zero Trust のアプリに足して、同じように確かめる必要があります。
無料でどこまで使えるか
ここが一番気になっていたところです。公式ドキュメントで確かめた範囲（2026 年 10 月時点）をまとめます。
| 項目 | 無料プランの制限 |
|---|---|
| 転送量・アクセス数 | 静的なファイルへのリクエストは無料・無制限。転送量の上限は書かれていない |
| ビルド | 月 500 回、同時に 1 つ、1 回 20 分まで |
| ファイルの数 | 1 サイト 20,000 ファイルまで |
| ファイルの大きさ | 1 ファイル 25 MiB まで |
| Access で許可できる人数 | 50 人まで（Zero Trust の Free プラン） |
Pages の料金のページには、こう書かれています。
On both free and paid plans, requests to static assets are free and unlimited.
写真や動画を置いても、見られる回数で料金がかかる心配はなさそうです。 気をつけるのは「1 ファイル 25 MiB まで」のほうで、私は家の中を回る動画を、部屋ごとの章に分けて 1 本 20MB 以下にしました。ちなみに私のサイトは、写真・動画・3D のデータを合わせて約 1,060 ファイル・約 180MB で、どの制限にも余裕があります。
サーバー側で処理を動かす Pages Functions を使う場合は、そのリクエストが Workers の無料枠（1 日あたりの回数の上限）に数えられます。静的なファイルを置くだけなら関係ありません。
HTTPS の証明書の期限
公開した URL の証明書を見ると、Let’s Encrypt が発行したもので、有効期限は約 3 か月後（2027 年 1 月 23 日）でした。
subject=CN=my-project.pages.dev
issuer=C=US, O=Let's Encrypt, CN=YE1
notBefore=Oct 25 07:18:58 2026 GMT
notAfter=Jan 23 07:18:57 2027 GMTCloudflare が管理している証明書なので、ふつうは自動で更新されると思います。ただ、pages.dev の更新のしくみを書いたドキュメントは見つからず、この環境で更新されたところもまだ見ていません。期限が近づいたら、確かめてみようと思います。
あわせてやっておいたこと
- 検索エンジンに載らないようにする：Access で止まるので中身は読まれませんが、念のため、ページに
<meta name="robots" content="noindex, nofollow">を入れ、robots.txtで全体をクロールの対象外にしました - GitHub Pages のワークフローを消す：前に GitHub Pages 用のワークフローを置いていたので、
mainに push したときに誤って誰でも見られるサイトとして公開されないよう、消しました
家族に共有するとき
共有のたびにやることは 2 つだけです。
- 相手のメールアドレスを、Access のポリシーの Emails に足して保存する
- 本番の URL を送る
相手には、次のことを一緒に伝えておくと迷いません。
- 入力するメールアドレスは、許可リストに入れたものと同じにする
- コードのメールは、迷惑メールフォルダに入ることがある
- 一度ログインすれば、しばらくはコードなしで見られる（期間はアプリの Session duration で変えられる）
見せるのをやめたいときは、Emails からアドレスを消します。ただ、消しただけでは、すでにログインしている人は、セッションが切れるまで見られる可能性があります。 ドキュメントによると、Access はセッションが切れたときに、ポリシーを確かめ直すしくみです。
すぐに止めたいときは、セッションも取り消します。ドキュメントを読む限り、Zero Trust の Users でその人のセッションを取り消すか、アプリの設定にある「Revoke existing tokens」で、そのアプリのセッションをまとめて切れそうです（私はまだ試していません）。
まとめ
- Cloudflare Pages は GitHub と連携でき、
mainに push するだけで公開される - Cloudflare Access で、許可したメールアドレスの人だけが見られるようにできる。見る側はメールのコードを入れるだけ
- Pages の「Restrict previews」で守られるのはプレビュー用の URL だけ。本番の URL は、Zero Trust のアプリに自分で足す
- 設定のあとは、トップページだけでなく写真などのファイルの URL も、本番・プレビューの両方で、ログインせずに開けないことを確かめる
- 本番の URL を足すには Zero Trust の Free プランが必要。私のときは、カードの登録を求められた
- 静的なファイルへのリクエストは無料・無制限。1 ファイル 25 MiB、月 500 ビルドなどの上限はある
- HTTPS の証明書は約 3 か月で期限が来る。Cloudflare が管理しているので自動で更新されると思うが、まだ更新されたところは見ていない
家族や友人など、決まった人にだけ見せたいページがある人には、かなり手軽な方法だと思います。反対に、たくさんの人に気軽に見てもらいたいページは、ログインの手間がかかるので向いていません。そういうページは、Access を付けずに普通に公開するのがよいと思います。
参考 – Limits · Cloudflare Pages docs – Pricing · Cloudflare Pages docs – Session management · Cloudflare One docs – Cloudflare Access（料金のプラン）
