Claude CodeでWorkersのサイトにCloudflare Accessをかけて許可した人だけに見せる

CFA CloudflareAccessCloudflareWorkersWrangler

公開したサイトを、全員には見せたくないことがある。作りかけを関係者だけに見せたい。家族や仲間うちのページを作った。自分だけが開ける道具を置きたい。

この記事では、見せてよい人のメールアドレスを Cloudflare に登録し、その人だけを通す。仕組みは Cloudflare Access という Cloudflare の機能。サイトを開こうとした人に Cloudflare がログイン画面を出し、メールに届いたコードで本人確認をしてから通す。

書くコードは1行もない。設定は Cloudflare のダッシュボードで行う。

Cloudflare Access がやること

Access がやることは、2つの設定の組み合わせで決まる。

名簿を作る。入ってよい人のメールアドレスを並べたもので、Cloudflare では「ポリシー」と呼ぶ。名簿はいくつでも作れる
サイトごとに、どの名簿の人を通すかを選ぶ。1つのサイトに名簿を2つ以上選んでもよく、どれか1つに載っていれば通れる

サイトを開いた人は、まず Cloudflare のログイン画面でメールアドレスを入れ、メールに届いたコードで本人だと示す。そのアドレスが、そのサイトに選ばれた名簿に載っていれば中が見える。載っていなければ、サイトに届く前に Cloudflare が止める。

名簿とサイトは別々に持つ。たとえば「家族」と「親戚」の名簿を作り、家族のアルバムには両方、家計簿には「家族」だけを選ぶ。家族が1人増えたら「家族」の名簿に1行足すだけで、アルバムにも家計簿にも入れるようになる。

名簿は「家族」と「親戚」の2つ。アルバムは両方の名簿の人を、家計簿は家族の名簿の人だけを通す

本記事の位置付け

Basic認証でサイトに鍵をかけるでは、合言葉を1つ決めて、知っている人だけを通した。この記事はその次の一歩で、合言葉の代わりに「人」で通す。Cloudflare Access は合言葉方式と比べて、次の点が違う。

	合言葉（Basic認証）	Cloudflare Access（この記事）
入れる人の決め方	合言葉を知っているか	メールアドレスで1人ずつ
誰が入ったか	区別できない	メールアドレスで分かる
1人だけ外す	できない（全員の合言葉を変える）	ポリシーからその人を消す
書くコード	認証の処理（頼めば書いてもらえる）	なし
止まる場所	自分のサイトの中	サイトに届く前（Cloudflare 側）
初回の準備	合言葉を Cloudflare に預ける	Zero Trust の初回設定（カード登録あり）

とくに違うのは「止まる場所」。合言葉方式は、自分のサイトの中で「合っているか」を照合する。Access はサイトに届く前に Cloudflare が止めるので、許可していない人のリクエストはサイトのファイルまで届かない。

無料で50人まで使える（Cloudflare Zero Trust の Free プラン）。身内や関係者に見せる用途なら、まず足りる。

必要な前提は「WranglerでCloudflareに公開する」を終えていること。公開先は Cloudflare Workers。データベースも Git も使わない。

コードは書かないかわりに、Cloudflare の英語の管理画面をいくつも開く。初めて見る言葉も出てくるので、先に表で押さえておく。

言葉	意味
Zero Trust	Cloudflare Access を含む、Cloudflare のサービスのまとまり。最初に一度だけ使い始める手続きをする
One-time PIN	メールに届く6桁のコードでログインする方式
ポリシー（policy）	「誰を通すか」の決まり。この記事では、通してよい人のメールアドレスを並べた名簿
セッション	一度ログインしたあと、もう一度聞かれずに入れる状態。既定で24時間続く

1. 作るもの

1ページだけのサイトを作り、サイト全体に鍵をかける。

public/
└─ index.html   許可した人だけが見られる

サイトを開くと、Cloudflare のログイン画面が出る。

メールアドレスを入れて Send login code を押すと、そのアドレスに6桁のコードが届く。

コードを入れると中身が見える。

このログイン画面は Cloudflare が出すもので、自分では作らない。

鍵をかけるまでに開く画面は、次の4つ。冒頭の「名簿を作る」が5章、「どの名簿の人を通すかを選ぶ」が6章にあたる。

章	開く画面	用意するもの	やること
3章	Zero Trust の初回（一度だけ）	Access を使える状態	Free プランを選び、支払い情報を入れる
4章	Zero Trust の Identity providers	ログイン方法	One-time PIN（メールに届くコードで本人確認）を足す
5章	Zero Trust の Policies	名簿（ポリシー）	入れる人のメールアドレスを登録する
6章	Worker の Access タブ	どの名簿の人を通すか	5章の名簿を選んで、鍵をかける

2. サイトを作って公開する

2-1. ページを作る

Finder で作業用のフォルダを新しく作る。たとえば ホーム → claude → my-members-site。

次に Claudeデスクトップアプリを起動し、左上の </> のアイコン（Code）を選択 → 新規 → いま作ったフォルダを指定する（~/claude/my-members-site）。

そこで次のように頼む。

このフォルダに public フォルダを作って、1ページだけの静的サイトを作ってください。
public/index.html に「メンバー限定ページ」と分かる見出しと、短い説明を1行。
凝らなくていい

2-2. Cloudflare Workers に公開する

鍵をかける前に、まず普通のサイトとして公開する。Wrangler のログインは WranglerでCloudflareに公開するで済ませてある前提。

Cloudflare に新しい Worker「my-members-site」を作って、public フォルダの中身を wrangler でデプロイして。
設定ファイル（wrangler.jsonc）も作ってほしい。

公開URLは https://my-members-site.サブドメイン.workers.dev（サブドメインはアカウントごとに決まっている）。開いて、ページが見えることを確かめる。

2-3. 入口は1つではない

鍵をかける前に、もう1つ見ておく。

Workers は、デプロイするたびにバージョンごとの URL（Version URL）も作る。https://バージョンIDの先頭8文字-my-members-site.サブドメイン.workers.dev という形で、公開前の確認などに使うためのもの。

いまデプロイしたバージョンの Version URL（プレビュー用の URL）を調べて、
公開URLと Version URL の両方に curl -I でアクセスして、返事のステータスを見せて

どちらも 200 が返る。このサイトには公開URL以外にも入口があり、誰にも教えていない URL でも、知られれば開ける。

この記事のやり方では、この入口もまとめて守られる。6章でかけたあと、同じ確かめ方で見比べる。

3. Zero Trust を使えるようにする（初回だけ）

Cloudflare Access は、Cloudflare の Zero Trust というサービスの中の機能。最初に一度だけ、Zero Trust を使い始める手続きをする。2回目以降のサイトでは、この章は飛ばしてよい。

やることは「プランを選ぶ → 支払い情報を入れる → 完了」の3つ。

3-1. Free プランを選ぶ

Cloudflare のダッシュボードを開き、左サイドバーの Zero Trust → Overview をクリックする。「Welcome to Cloudflare Zero Trust」という画面が出るので、右上の Get started をクリックする。

画面が切り替わって、もう一度 Get started が出ることがある。そのときはもう一度押す。

「Choose a plan」という画面が出る。左の Zero Trust Free の Select plan をクリックする。

Free の説明に「50 seat limit」（50人まで）と書いてある

3-2. 支払い情報を入れる

「Activate Zero Trust Free」という画面が出る。無料プランでも、ここで支払い情報を入れる必要がある。右側の Order summary に「Protect up to 50 users at no cost」「$0/month」と出ているとおり、請求はされない。

カードのほかに Apple Pay・Google Pay・PayPal も選べる

カード番号を入れたくなければ、Apple Pay・Google Pay・PayPal も使える。その下にカードの入力欄がある。

さらに下の Billing address（請求先）を埋める。英語で入れる。

画像の名前と住所は撮影用のダミー

項目	書き方
First name / Last name	名前（ローマ字）
Country	Japan
Address line 1	番地と町名（例：`1-2-3 Marunouchi`）
City	市区町村（例：`Chiyoda-ku`）
State	都道府県を一覧から選ぶ
ZIP code	郵便番号
Account type	個人なら Personal

最後に同意のチェックを2つ入れる。

利用規約とプライバシーポリシーへの同意
「無料の範囲を超えた利用分を、解約するまで毎月請求することを認める」という同意

2つ目を読んで不安になるかもしれないが、Access は51人目でログインが止められるだけで、勝手に有料にはならない（冒頭の注意を参照）。

Activate Zero Trust Free をクリックする。

3-3. 完了

「Purchase complete」と出れば完了。Continue to Zero Trust をクリックする。

Zero Trust（Cloudflare One）のトップ画面に入る。上のタブが Discover のとき、右の Account details に、Team name（チーム名）と Plan「Zero Trust Free」が出ている（Overview のタブには Plan の行が無い）。

チーム名は自動で付く

チーム名は自動で付き、ログイン画面のアドレス（チーム名.cloudflareaccess.com）に使われる。

4. ログイン方法を用意する

次に、サイトを開いた人がどうやって本人確認をするかを決める。この記事では One-time PIN（メールに届くコードでログインする方式）を使う。

4-1. 最初は「Cloudflare」でしかログインできない

Zero Trust の左サイドバーで Integrations → Identity providers を開く。

一覧には Cloudflare が1つだけ入っている。これは「Cloudflare のアカウントでログインする」方式。

画面の説明には「ログイン方法を追加しなければ one-time pin が既定になる」と書いてあるが、実際にはそうならない（手元で確かめた）。このまま鍵をかけると、ログイン画面には Cloudflare のボタンしか出ず、メールアドレスの入力欄が無い。

One-time PIN を足す前のログイン画面

これでは、Cloudflare のアカウントを持っていない人は入れない。身内や関係者に見せたいなら、One-time PIN を足す。

4-2. One-time PIN を足す

右上の Add an identity provider をクリックする。「Add a login method」という画面に、ログイン方法の一覧が出る。

One-time PIN をクリックする。右に「ADDED」と出れば追加済み。

押すだけでよい。設定する項目も、保存ボタンも無い。追加すると、ログイン画面に Email の欄が出るようになる（1章の画面）。

Google Cloud Console のような外部の設定は要らない。コードを送るメールは Cloudflare が出す。

5. 入れる人を決める

次に、誰を通すかを決める。Cloudflare Access ではこれをポリシーと呼ぶ。

ポリシーは、鍵をかける前に作っておく。6章で鍵をかける画面ではポリシーを選ぶだけで、新しく作ることはできないため。

Zero Trust の左サイドバーで Access controls → Policies を開く。

Add a policy をクリックすると、ポリシーの入力画面が出る。

アドレスを入力しているところ（アドレスはぼかしてある）

項目	入れるもの
Policy Name（右）	好きな名前。例：`members`
Action（右）	Allow（最初から選ばれている）
Include の Selector（左）	Emails
Include の Value（左）	自分のメールアドレス

アドレスを入れて確定すると、× の付いた札に変わる。右下の Save policy をクリックする。

一覧に戻り、作ったポリシーが並ぶ。

身内にも見せたい人がいるなら、ここでアドレスを足しておいてもよい（あとから足すこともできる。→ 8-1）。

6. サイトに鍵をかける

Cloudflare のダッシュボード → Compute → Workers & Pages → my-members-site を開く。上に並ぶタブから Access を選ぶ。

Protect this Worker behind Access をクリックすると、Manage Worker access という画面が出る。

項目	選ぶもの
Scope	All traffic
Authentication policy	5章で作ったポリシー（`members`）

ポリシーを選ぶと Session duration（一度ログインしたら、次に聞かれるまでの時間）が出る。最初は 24 hours。そのままでよい。

Apply Access をクリックする。画面が切り替わり、「Require login on every URL: production and previews」と出れば、鍵がかかっている。

サイトのファイルは変えていないので、デプロイし直さなくてよい。

7. 鍵がかかったか確かめる

7-1. 自分で入ってみる

Chrome のシークレットウィンドウ（ファイル → 新規シークレットウィンドウ）で公開URLを開く。1章のログイン画面が出る。

Email に5章で登録したアドレスを入れて Send login code をクリック
届いたメールの6桁のコードを入れて Verify をクリック（コードは10分で切れる。メールは [email protected] から届く）
「メンバー限定ページ」が見える

コードは塗りつぶしてある

メールの Log in ボタンからも入れる。コードを打つ代わりにボタンを押せばよいので、スマホで受け取ったときに楽。

一度ログインすると、Session duration（24時間）のあいだは聞かれない。

7-2. 許可していない人は入れない

7-3. 入口がすべて守られたか確かめる

2-3 と同じ確かめ方で、もう一度見る。

公開URLと、さっき調べた Version URL の両方に curl -I でアクセスして、
返事のステータスと、転送先（location）を見せて

どちらも 302 になり、転送先が チーム名.cloudflareaccess.com のログイン画面になっていれば、守られている。2-3 では 200（誰でも見える）だった。

鍵をかけたあとにデプロイして作られる新しいバージョンも、同じように守られる（手元で確かめた）。

8. 一歩先の使い方

8-1. 人を足す・外す

足す

Zero Trust の Access controls → Policies で、5章のポリシー（members）を開き、Configure をクリックする。5章と同じ入力画面が出るので、Value の欄（いまのアドレスの札の横）に足す人のアドレスを入れて確定し、Save policy をクリックする。

札を並べると「どれかのアドレスなら通す」になる

保存すれば、足した人もすぐにログインできる（手元で確かめた）。

外す

同じ画面で、外す人のアドレスの札の × を押して Save policy をクリックする。次にその人がログインしようとしても、コードは届かない。

ただし、すでにログインしている人は、ポリシーから消しただけでは締め出されない。セッション（6章の Session duration、既定24時間）が切れるまで、ページが見えたままになる（手元で確かめた）。すぐに締め出したいときは、続けてセッションを取り消す。

Zero Trust の Team & Resources → Users を開くと、ログインしたことのある人が並んでいる。外す人の行の「…」から View details を選ぶ。

詳細の画面の Session management にある Revoke sessions をクリックする。

確認が出るので Revoke をクリックする。その人がページを再読み込みすると、ログイン画面に戻る（手元で確かめた）。

確認の文面にあるとおり、Revoke sessions はいまのセッションを切るだけで、もう一度ログインすることは止めない。だから「ポリシーから消す」と「Revoke sessions」の2つをセットでやる。

人数の枠を空ける

50人の上限は「一度でもログインした人」で数える。ポリシーから消しても、Revoke sessions を押しても、数は減らない。枠を空けたいときは、同じ詳細画面の Seat management にある Remove user をクリックする。

確認の文面のとおり、Remove を押すとセッションも終わり、その人は Inactive になって枠を使わなくなる。Users の一覧からも消える（手元で確かめた）。

Remove したユーザーが一覧から消えた

ただし、Remove user もログインそのものは止めない。ポリシーに残っている人がもう一度ログインすれば、また1人分に数えられる。外すときは、ポリシーから消してから押す。身内で使う程度なら、50人に届くことはまず無い。

8-2. ログアウトする

公開URLの後ろに /cdn-cgi/access/logout を付けて開く（例：https://my-members-site.サブドメイン.workers.dev/cdn-cgi/access/logout）。「You successfully logged out.」と出て、ログイン画面に戻る。ほかにも Cloudflare Access で鍵をかけたサイトがあれば、そちらからもまとめてログアウトする（サイトごとにはログアウトできない）。

ページにログアウトのリンクを置きたければ、頼めばよい。

public/index.html に、/cdn-cgi/access/logout へのリンクを「ログアウト」として置いて

8-3. 鍵を外す

公開前に関係者だけに見せていたサイトを、そのまま一般に公開するときなど。

Worker の Access タブで Manage access → Edit Worker access の画面で、赤い Remove Worker-specific Access をクリックする。確認が出るので、もう一度 Remove Worker-specific Access をクリックする。

数秒で、公開URLも Version URL も誰でも見られる状態に戻る（手元では5秒）。7-3 の依頼文で、200 に戻ったことを確かめる。

5章のポリシーは消えずに残る。また鍵をかけるときは、6章からやり直せばよい。

9. 守れるもの・守れないもの

守れるもの

公開URLも、Version URL も、まとめて守れる。 「別の入口から素通し」が起きない
人単位で出し入れできる。 1人だけ外すときは、ポリシーから消してセッションを取り消す（8-1）
許可していない人のリクエストは、サイトに届かない。 止めるのは Cloudflare

守れないもの・気をつけること

鍵を外すと、すぐに公開される。 8-3 のとおり、ボタン1つで数秒後には誰でも見られる。サイトの側には「Access が外れたら閉じる」仕組みが無い。誤って外さないように気をつけるしかない（サイトの側でも止めたいなら → 10-3）
登録したメールアカウントが乗っ取られたら、入られる。 メールのコードで本人確認しているため。メールアカウントには2段階認証をかけておく
50人まで。 51人目はログインできずに止められる（勝手に課金はされない）。一般公開のサービスの会員登録には向かない。身内・関係者向け
Cloudflare の設定に依存する。 ほかのサービスに引っ越すときは、鍵のかけ方から考え直しになる

ここまでで、Cloudflare Access は一通り使える。次の10章は補足で、読まなくてもかまわない。

10. 補足

10-1. なぜ Worker の画面でかけるのか

Cloudflare Access には、Zero Trust の画面でアドレス（ホスト名）を登録して守るやり方もある。管理画面だけを守る管理画面を Cloudflare Access で守るはこちらを使っている。

ホスト名で守るやり方は、登録したアドレスしか守らない。2-3 で見た Version URL は、公開URLとは別のアドレスなので、登録しなければ守られずに残る。「鍵をかけたつもりで、別の入口が開いていた」が起きる。

この記事の Worker の Access タブは、その Worker に届くアドレスをまとめて守る。だから Version URL も一緒に守られる（7-3）。サイト全体を守るなら、こちらのほうが漏れが起きにくい。

設定の手間はほぼ同じ。3章（Zero Trust の初回設定）と4章（One-time PIN）はどちらのやり方でも必要で、違うのは最後に鍵をかける部分だけ。ホスト名で守るやり方はポリシーを同じ画面で作れるかわりに、守るアドレスを手で入力し、Version URL も別に登録する必要がある。逆に、/admin のようにパスで絞りたいときや、Pages・独自ドメインのサイトを守るときは、ホスト名で守るやり方を使う。

10-2. ログインしている人を表示する

ページに「○○ でログイン中」と出したいことがある。これは静的なサイトのままでできる。Cloudflare Access は、ログインした人の情報を /cdn-cgi/access/get-identity というアドレスで返してくれるので、ページの JavaScript から読めばよい。

public/index.html に、/cdn-cgi/access/get-identity を fetch して、
返ってきた email を「○○ でログイン中」と表示する部分を足して

デプロイし直すと、ページにログインしたメールアドレスが出る。公開URLでも Version URL でも動く（手元で確かめた）。

10-3. 動的なページで、誰が来たかを使う

ここまでのサイトは静的（決まったファイルを返すだけ）だった。Worker のコードでページを返す形（動的）にすると、Cloudflare Access が確かめた「誰が来たか」をサイトの側で使える。

守る力は、静的でも動的でも同じ。違いは、守ったあとにできること。

	静的（この記事の本編）	動的
鍵の範囲・ログイン・人の出し入れ	同じ	同じ
ログインしている人を表示する	できる（10-2）	できる
人によって見せるものを変える	できない	できる
Access が外れたら閉じる	できない（9章）	できる
誰が何をしたかを記録する	できない	できる（データベースが要る）

Worker のコードでは、ctx.access からログインした人の情報を受け取れる。ctx.access は Access を通ってきたリクエストにだけ付くので、「付いていなければ 403（お断り）を返す」と書いておけば、8-3 のように誤って Access を外しても中身は出ない。運用の気づかいに頼らず、コードで守る形。

ctx.access から取り出したメールアドレスを見れば、人によって見せるものを変えられる。たとえば管理者のアドレスのときだけ、管理用の欄を出す。

頼むときは、こう言えばよい。

このサイトを、Worker のコードで HTML を返す形に作り直したい。
ログインした人の情報は、Cloudflare Access の ctx.access から取って。
ログインした人のメールアドレスを、ページに「○○ でログイン中」と出して。
管理者のときだけ「管理者向け」の欄を出して。管理者のメールアドレスは私が自分で入れる。

2行目は、受け取り方の指定。これが無いと、Claude Code は Access が付ける署名入りの値を自前で検証する作りにした。安全ではあるが、チームのドメインなど2つの値を Zero Trust の画面で探して貼る手順が増える。ctx.access ならその手間が無い。安全のために足した行は無い。

言わなくても、Claude Code は次のものを入れた（手元で試した）。

安全策	何を防ぐか
`ctx.access` が無いとき、メールアドレスが取れないときは 403 を返す	Access が外れたときに、中身が誰でも見えること
`public` フォルダを使わず、ページはコードだけで返す	静的ファイルが Worker を通らずに返り、`ctx.access` が届かないこと（下の caution）
管理者向けの欄は、サーバー側で HTML ごと出し分ける	管理者でない人のブラウザに、管理者向けの中身が届くこと
人ごとに変わるページに、キャッシュさせない指定を付ける	別の人に、前の人のページが返ること

管理者のアドレスは wrangler.jsonc の vars に、仮の値（[email protected]）で入る。変数の名前は頼むたびに変わる（ADMIN_EMAIL、ADMIN_EMAILS など）。ここは自分で書き換えてからデプロイする（Access でログインするときのアドレスにする）。

管理者のアドレスでログインすると、「管理者向け」の欄が出る。

管理者のアドレスでログインしたとき（アドレスはぼかしてある）

ほかの人がログインすると、その欄は出ない。

管理者ではない人でログインしたとき

この状態で 8-3 の手順で Access を外すと、公開URLも Version URL も「Access required」（403）が返り、中身は出なかった（手元で確かめた）。静的なサイトのときは、同じ操作で誰でも見られるようになった（8-3）。

誰が何をしたかを記録する（投稿に名前を自動で付ける、など）には、記録を残す場所としてデータベースが要る。データベースを使うサイトの作り方はD1でデータを共有するWebアプリを作るで扱っている。

備忘録

Worker の Access タブは 2026-08 に追加された機能。それより前の記事やドキュメントには、Worker の Settings → Domains & Routes から有効にする方法（2025-10〜）や、Zero Trust の画面でホスト名を登録する方法が書かれていることがある
Zero Trust Free の上限は50ユーザー（Cloudflare の料金表）。超えると Pay-as-you-go（1ユーザー月$7）
ログインのセッションは、Session duration（既定24時間）のあいだ続く。同じ Worker の Version URL にはコードなしで入れた

2026-10-08 (last updated: 2026-11-02) タツヲ (yto)

☕️ Vibecoding Notes を応援