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

LEVEL 6 ハンズオン

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

このスライドで扱うこと

• 管理画面が必要な理由と、Cloudflare Access の向き・不向き
• Cloudflare Access の設定（ブラウザ操作）— Zero Trust / Google IdP / Application
• D1 スキーマ変更（hidden カラム追加）
• 管理画面用 API・フロントエンドの追加
• デプロイ・動作確認（子パスまで保護されているかも確認）
• もっと手軽な方法: Basic 認証

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

1-1. 作るもの

DB を使う Web アプリには「DB 管理」がつきまとう

• 不適切な投稿を削除したい・スパムを非表示にしたい
• そのたびに SQL を直接叩くのは手間・ミスのリスク
• 管理操作は Web アプリの中に管理画面として用意するのが定石

ただし、誰でもアクセスできてはまずい → 特定の人だけが入れるアクセス制限が必要

1-1. このハンズオンで追加するもの

前回作った掲示板に以下を追加

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

作例（前回作った掲示板）

作例（今回追加する管理画面）

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

自前でパスワード認証を実装するのはセキュリティリスクがある

Cloudflare Access なら:

• Google アカウント認証を Cloudflare 側で肩代わり
• コードを書かずに「このメールアドレスだけ許可」と設定できる
• 無料枠で 最大 50 ユーザー まで

1-2. 向き・不向き

無料枠の 50 ユーザー上限 から、向き不向きが見えてくる

向いていない: 一般公開 Web アプリの会員ログイン

• 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. デプロイして動作確認

2 章は手順が多いが初回限定の作業が含まれる。2-1〜2-3 は初回のみ、2 回目以降は 2-4 から開始

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

Cloudflare ダッシュボード → 左サイドバー Zero Trust → Get started

2-1. チーム名とプラン選択

• チーム名を入力（任意、後から変更可能）→ Next
• Zero Trust Free の Select plan
• 支払い情報を入力（無料プランでもカード登録必要）→ Review and purchase → Purchase（$0）
• 「Get started...」画面が出たら Skip this for now

2-2. Google を IdP として登録

Zero Trust 左サイドバー 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. プロジェクトを作成
• 2-3-2. OAuth 同意画面を設定
• 2-3-3. OAuth クライアント ID を作成
• 2-3-4. Cloudflare に値を貼り付けて保存

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

上部のプロジェクト選択ドロップダウン → 新しいプロジェクト

• プロジェクト名を入力（例: cloudflare-access）
• 作成

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

左サイドバー APIs & Services → 認証情報 → 同意画面を構成

Google Auth Platform で 開始:

利用規約への同意チェック → 作成

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

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

<チーム名> は 2-1 で設定した名前に置き換え

作成 で クライアント ID と クライアントシークレットが表示 → その場でコピー（閉じると二度と表示されない）

2-3-4. Cloudflare に貼り付けて保存

Cloudflare の Add Google 画面に戻り:

Save → 一覧画面で Test をクリックして Google 認証が通ることを確認

2-4. Application の作成

左サイドバー 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）を入力
• 同じ要領で 掲示板のURL/api/admin も追加

この 2 つで /admin/foo や /api/admin/posts/1 のような子パスもまとめて保護される

2-4. Access policies の設定

Create new policy をクリック:

Save policy → Details の Name に任意のアプリ名（例: my-bbs-admin）→ Create

これで /admin 配下と /api/admin 配下に Access 設定完了。動作確認は管理画面実装後の 6-2

3. hidden カラムの追加

「投稿を非表示にする」機能のため、投稿ごとの表示/非表示状態を DB に保存する

Claude Code に「投稿を非表示にできる管理画面を作りたい」と相談すると hidden カラムの追加が提案される

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

3. 生成される SQL

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

wrangler.toml の migrations_dir で指定したフォルダに置けば、GitHub Actions が push 時に自動適用

4. /api/admin/ 配下に置く

Cloudflare Access で /api/admin/* をまとめて保護するため、公開 API（/api/posts）と区別する

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

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

5. /admin ページの作成依頼

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

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

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

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

6-2. Cloudflare Access の動作確認

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

• 登録メールで認証 → 管理画面に入れる
• 別アカウントでは弾かれることも確認

6-2. 管理 API の子パスも保護されているか確認

ブラウザのシークレットウィンドウで https://掲示板のURL/api/admin/posts/1 を直接開く

→ Cloudflare Access の認証画面に飛ばされる（= 保護されている）ことを確認

セッションが残っている場合、認証画面なしでアクセスできる → 確認したいときは Chrome シークレットウィンドウで

7-1. Basic 認証の実装

外部サービスの設定が一切不要、個人用途の管理画面には十分なケースも多い

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

7-2. 環境変数の設定

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

Add をクリック:

Save → デプロイし直す（push または Retry deployment）で反映

7-2. 管理者を追加する

Claude Code に依頼してユーザーを追加 + 環境変数も追加

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

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

7-3. Cloudflare Access との比較

備忘録

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

ありがとうございました

タツヲ (@yto)

vibecodingnotes.com