Claude CodeでWebアプリに管理画面を追加してCloudflare Accessでアクセス制限する

⚠️ このハンズオンは制作途中です。動かしてみることはできますが、説明や手順が今後書き換わる可能性があります。気になる点があればフィードバックいただけると助かります。

このハンズオンはClaude Codeでデータ共有型Webアプリを作ってCloudflareで公開するの続編。前回作った匿名一行掲示板に、管理者だけが使える管理画面を追加する。

1. このハンズオンで作るもの

1-1. 作るもの

DBを使うWebアプリには、DB管理という問題が付きまとう。掲示板なら「不適切な投稿を削除したい」「スパムを非表示にしたい」といった操作が必要になる。そのたびに SQL を直接叩くのは手間だし、ミスのリスクもある。

こうした管理操作はWebアプリの中に管理画面として用意しておくのが定石。必要な操作をボタンひとつでできるようにしておけば、後の運用がぐっと楽になる。

ただし、管理画面は誰でもアクセスできてはまずい。一般ユーザーが投稿を操作できてしまう。特定の人（管理者）だけが入れるように制限する必要がある。

ということで、このハンズオンでは、前回作った掲示板に以下を追加する。

• 管理画面（/admin）：投稿の非表示・再表示ができる
• Cloudflare Access：/admin と /api/admin を Google 認証でアクセス制限する

前回作った掲示板

今回作る管理画面

1-2. なぜ Cloudflare Access を使うのか

管理画面はパスワードで保護するのが定番だが、自前でパスワード認証を実装するのはセキュリティリスクがある。Cloudflare Access を使えば、Google アカウントによる認証を Cloudflare 側で肩代わりしてくれる。コードを書かずに「このメールアドレスだけアクセスを許可」という設定ができる。

Cloudflare Access は無料枠で 最大50ユーザー まで使える。この上限から、向き不向きが見えてくる。

向いていないこととしてあげられるのは、一般公開するWebアプリの会員登録・ログイン機能として使うこと。50人を超えた時点で有料プランが必要になるため、不特定多数のユーザーに使ってもらうサービスには向かない。

向いていることとしてあげられるのは、管理画面のアクセス制限。管理者は多くても数人なので、50ユーザーの上限はまったく問題にならない。しかもコードを書かずにダッシュボードだけで設定が完結する。このハンズオンのように「自分だけ入れる管理画面」を作る用途にはうってつけ。

1-3. 全体の流れ

このハンズオンでやることの地図。

2. Cloudflare Access 設定（ブラウザ操作）
   └─ Zero Trust ダッシュボードで /admin と /api/admin を Google 認証で保護

3. D1 スキーマ変更（Claude Code）
   └─ posts テーブルに hidden カラムを追加

4. バックエンド追加（Claude Code）
   └─ 非表示フラグを更新する API を追加
   └─ 公開側 API で hidden 投稿を除外

5. フロントエンド追加（Claude Code）
   └─ /admin ページを作成

6. デプロイして動作確認
   └─ push → GitHub Actions → Cloudflare に反映

D1 スキーマ変更〜フロントエンドの実装は Claude Code にプロンプトで依頼できる。Cloudflare Access の設定だけブラウザでの手作業が必要。

2章は手順が多いが、初回限定の作業が含まれているのが理由。Zero Trust の初回セットアップ（2-1 後半）と Google の IdP 登録（2-2・2-3）は一度やれば済む。2回目以降に別のアプリへ Access をかける場合は 2-4 だけで完結する。

前提：Claude Codeの作業フォルダは前回のハンズオンで作った ~/Desktop/claude/my-bbs。

2. Cloudflare Access の設定（ブラウザ操作）

2回目以降の人へ：左サイドバーの Zero Trust → Access controls → Applications に進んで 2-4 から開始すればOK（2-1〜2-3は初回のみの作業）。

2-1. Zero Trust の初回セットアップ

Cloudflare ダッシュボードを開き、左サイドバーの Zero Trust をクリック。

Zero Trust

Get started をクリック。

チーム名の入力画面が出る。任意の文字列でよい（後から変更可能）。入力して Next。

Choose your team name

プラン選択画面が出る。Zero Trust Free の Select plan をクリック。

支払い情報の入力画面が出る。無料プランでもカード登録が必要。Review and purchase → Purchase（$0）をクリック。

「Get started with Cloudflare Zero Trust」という案内ページが出る。Skip this for now をクリックすると左サイドバーが表示される。

2-2. Google を ID プロバイダーとして登録

左サイドバー Integrations → Identity providers を開く。

Add an identity provider をクリック → プロバイダー一覧から Google を選択。

App ID（= Google のクライアント ID）と Client Secret（= Google のクライアントシークレット）の入力欄が表示される。次節で取得した値を貼る。

2-3. Google Cloud Console で OAuth クライアントを作成

2章でGoogle側の操作が必要なのはここだけ。 それ以外はすべてCloudflareのダッシュボードで完結する。

Google Cloud Console を開く。

2-3-1. プロジェクトを作成する

上部のプロジェクト選択ドロップダウン → 新しいプロジェクト → プロジェクト名を入力（例：cloudflare-access）→ 作成。

2-3-2. OAuth 同意画面を設定する

左サイドバー APIs & Services → 認証情報 を開く。OAuth クライアント ID の作成を試みると、まず同意画面の設定が必要と案内される。同意画面を構成 をクリック。

Google Auth Platform の画面で 開始 をクリックし、以下を設定する。

項目	値
アプリ名	任意（例：cloudflare-access）
ユーザーサポートメール	自分のメールアドレス
対象	外部
連絡先情報	自分のメールアドレス

最後に利用規約への同意チェックを入れて 作成。

2-3-3. OAuth クライアント ID を作成する

左サイドバー クライアント → クライアントを作成 をクリック。

項目	値
アプリケーションの種類	ウェブ アプリケーション
名前	任意（例：cloudflare-access）
承認済みのリダイレクト URI	https://<チーム名>.cloudflareaccess.com/cdn-cgi/access/callback

リダイレクト URI の <チーム名> は 2-1 で設定したチーム名に置き換える（例：チーム名が kerokero なら https://kerokero.cloudflareaccess.com/cdn-cgi/access/callback）。

作成 をクリックするとクライアント ID とクライアントシークレットが表示される。ダイアログを閉じると二度と表示されないのでその場でコピーする。

2-3-4. Cloudflare に値を貼り付けて保存する

Cloudflare の Add Google 画面に戻り、以下を入力して Save。

項目	値
App ID	Google のクライアント ID
Client secret	Google のクライアントシークレット

一覧画面に戻ったら Test をクリックして Google 認証が通ることを確認する。

2-4. Application と Policy を作成

左サイドバー Access controls → Applications → Create new application をクリック。

Continue with Self-hosted and private を選択。

Destinations セクションで、Domain 入力欄の Switch to custom input をクリックし、掲示板のURL/admin（例：my-bbs-90t.pages.dev/admin）を入力する。

同じ要領で2つ目の Destination として 掲示板のURL/api/admin（管理操作API用）も追加する。

この2つを追加しておけば、/admin と /api/admin 自身に加えて、/admin/foo や /api/admin/posts/1 のような子パスもまとめて保護される（実際の動作確認は 6-2 で行う）。

Access policies セクションで Create new policy をクリックし、以下を設定する。

項目	値
Policy name	任意（例：admin-only）
Action	Allow
Include の Selector	Emails
Include の Value	自分のメールアドレス

Save policy → 右下 Details の Name に任意のアプリ名（例：my-bbs-admin）を入力 → Create をクリック。

これで /admin 配下と /api/admin 配下（管理APIの子パスを含む）に Cloudflare Access のアクセス制限が設定された。実際の動作確認は管理画面を実装してデプロイした後（6-2）。

3. 【データベース】スキーマ変更

「投稿を非表示にする」機能を実装するには、投稿ごとの「表示/非表示」状態をDBに保存する必要がある。Claude Code に「投稿を非表示にできる管理画面を作りたい」と相談すると、hidden カラムの追加が提案される。ここではその手順を先に進める。

マイグレーションファイルの作成を Claude Code に依頼する。

Claudeへの指示

postsテーブルにhiddenカラム（INTEGER型、デフォルト0）を追加するマイグレーションファイルを作成して。ファイル名はmigrations/0002_add_hidden.sqlで

作成されたファイルを確認する。内容はこのようになっているはず。

ALTER TABLE posts ADD COLUMN hidden INTEGER NOT NULL DEFAULT 0;

マイグレーションファイルは wrangler.toml の migrations_dir で指定したフォルダに置く。GitHub Actions が push 時に自動で適用する。

4. 【バックエンド】管理画面用 API の追加

管理操作のAPIは /api/admin/ 配下に置く。Cloudflare Access で /api/admin/* をまとめて保護するため、公開側API（/api/posts）と区別する。

Claude Code に依頼する。

Claudeへの指示

以下の2点をfunctions/api/配下に追加・修正して。

1. PATCH /api/admin/posts/:id を追加する。リクエストボディのhiddenフィールド（0か1）でpostsテーブルのhiddenカラムを更新する
2. GET /api/posts でhidden=0の投稿だけを返すようにする

5. 【フロントエンド】管理画面の作成

Claude Code に依頼する。

Claudeへの指示

管理画面（public/admin/index.html）を作って。
さっき追加したhiddenカラムを使って、投稿を非表示・再表示できるようにしたい。
一覧はテーブルで、各行にボタンをつけて。シンプルなデザインで。

6. デプロイして動作確認

6-1. push して GitHub Actions を実行

変更をコミット・push する。

Claudeへの指示

今回の変更をコミットしてpushして

GitHub リポジトリの Actions タブでデプロイの進行状況を確認する。

6-2. Cloudflare Access の動作確認

本番 URL の /admin にアクセスすると、Cloudflare の Google 認証画面が表示される。

Sign in with google

登録したメールアドレスで認証すると管理画面に入れる。別のアカウントでは弾かれることも確認しておく。

さらに、管理API の子パスが保護されていることも確認する。ブラウザのシークレットウィンドウで https://掲示板のURL/api/admin/posts/1 を直接開き、Cloudflare Access の認証画面に飛ばされる（=保護されている）ことを確認する。

以前に Cloudflare Access で認証済みの場合、セッションが残っていて認証画面なしでアクセスできることがある。認証画面を確認したいときは、Chromeのシークレットウィンドウで開く。

7. もっと手軽な方法（Basic認証）

Cloudflare Access の設定が大変すぎると感じる場合、Pages Functions で Basic 認証を実装する方法もある。外部サービスの設定が一切不要で、個人用途の管理画面には十分なケースも多い。

7-1. Basic認証の実装

Claude Code に依頼する。

Claudeへの指示

パス /admin と /admin/ 以下、/api/admin と /api/admin/ 以下へのアクセスに Basic 認証をかけて。パスワードは環境変数 ADMIN_PASSWORD から読んで。ユーザー名は admin で固定でよい。

7-2. 環境変数の設定

Cloudflare ダッシュボード → Workers & Pages → プロジェクト名 → Settings → Variables and Secrets を開く。

Add をクリックして以下を入力し、Save をクリック。

Variable name	Value
ADMIN_PASSWORD	任意のパスワード

設定後、デプロイし直す（push するか、ダッシュボードから Retry deployment）と環境変数が反映される。

管理者を追加したい場合は、Claude Code に依頼してユーザーを追加し、環境変数も追加する。

Claudeへの指示

Basic 認証にユーザーを追加して。ユーザー名は user1、パスワードは環境変数 USER1_PASSWORD から読んで。

Cloudflare の Variables and Secrets に USER1_PASSWORD を同様に追加してデプロイし直す。

7-3. Cloudflare Access との比較

	Basic認証	Cloudflare Access (Google)
設定の手間	少ない	多い（初回のみ）
アクセス制限	パスワードを知っていれば誰でもアクセスできる	メールアドレス単位で制限できる
パスワード管理	自分で設定・管理が必要	Google に委ねる（2FA・パスキーも利用可）
ブルートフォース耐性	静的パスワードのため攻撃対象になりうる（Cloudflare が一定程度防ぐ）	Google が保護してくれる
管理者の追加	コード変更が必要	ダッシュボードで1行追加
外部サービス	不要	Google Cloud Console が必要

備忘録

• Cloudflare Access の設定は wrangler.toml や GitHub Actions のワークフローとは独立している — Cloudflare ダッシュボード側の設定のみで完結する
• Session duration を短くするとセキュリティは上がるが、作業中に認証が切れて不便になる — 個人用途なら 24 hours で十分
• Google Cloud Console の OAuth クライアントは無料で作成できる — 課金設定は不要
• Google Cloud Console の OAuth クライアント作成はアプリ全体で一度だけ行う設定 — 管理者を追加するたびに必要なわけではない
• 管理者を追加したい場合は Cloudflare Access の Policy の Include ルールにメールアドレスを1行追加するだけ — Gmail に限らず Google アカウントであればどのドメインでも登録できる