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

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

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

1-1. 作るもの

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

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

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

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

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

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

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

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

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

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

1-3. 全体の流れ

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

2. Cloudflare Access 設定（ブラウザ操作）
   └─ Zero Trust ダッシュボードで /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 だけで完結する。

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

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

Cloudflare ダッシュボード（dash.cloudflare.com）を開き、左サイドバーの Zero Trust をクリック。

Get started をクリック。

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

プラン選択画面が出る。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 を開く。

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

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

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

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

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

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

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

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

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

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

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

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

一覧画面に戻ったら 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）を入力する。

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

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

これで 掲示板のURL/admin にアクセスすると Cloudflare の Google 認証画面が表示されるようになる。

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

前回作った posts テーブルに hidden カラムを追加する。

マイグレーションファイルの作成

Claude Code に依頼する。

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 の追加

Claude Code に依頼する。

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

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

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

Claude Code に依頼する。

index.htmlと同じ場所にadmin.htmlを作成して。仕様：

- 投稿一覧をテーブルで表示する（投稿ID・本文・投稿日時・会員番号・状態）
- 各行に「非表示にする」「再表示する」ボタンを置く
- ボタンをクリックするとPATCH /api/posts/:idを呼び出してhiddenを切り替える
- デザインはシンプルでよい

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

push して GitHub Actions を実行

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

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

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

Cloudflare Access の動作確認

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

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

備忘録

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

補足：もっと手軽な方法（Basic認証）

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

Basic認証の実装

Claude Code に依頼する。

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

環境変数の設定

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

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

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

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

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

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

Cloudflare Access との比較

2026-05-08　タツヲ (yto)