Cloudflare Pages + Cloudflare Access Google 認証セットアップ手順¶

GitHub private repo ayutaz/office-analyze を Cloudflare Pages にデプロイし、Cloudflare Access で Google 認証付き閲覧専用にする手順。

前提¶

Cloudflare アカウント (Free プランで Access も 50 ユーザーまで無料)
GitHub ayutaz アカウント (現在 repo オーナー)
Google アカウント (閲覧者として許可するメールアドレス: magicboxs777@gmail.com)

アーキテクチャ¶

GitHub (private repo)
    ↓ webhook (push to main)
Cloudflare Pages (auto build: mkdocs build → /site)
    ↓ deploy
office-analyze.pages.dev (or custom domain)
    ↓
Cloudflare Access (Zero Trust)
    ↓ Google OAuth 認証
ブラウザに HTML 配信

Step 1: Cloudflare Pages プロジェクト作成 (GitHub 連携)¶

https://dash.cloudflare.com/ にログイン
左メニュー Workers & Pages → Create application → Pages タブ → Connect to Git
Connect GitHub で ayutaz アカウントを認証
Cloudflare が GitHub App としてアクセス権限を要求 → 「Only select repositories」で office-analyze のみ許可
リポジトリ一覧から ayutaz/office-analyze を選択 → Begin setup

Step 2: ビルド設定¶

Set up build & deployments の画面で以下を入力:

項目	値
Project name	`office-analyze` (URL は `office-analyze.pages.dev`)
Production branch	`main`
Framework preset	`None`
Build command	`pip install -r requirements.txt && mkdocs build --strict`
Build output directory	`site`
Root directory	`/` (デフォルト)
Environment variables (Production)	`PYTHON_VERSION = 3.12`

Cloudflare Pages のビルドは Python 3.7-3.12 をネイティブサポート。PYTHON_VERSION 環境変数で 3.12 を指定。

uv は Cloudflare Pages ビルダーに pre-install されていないため、pip + requirements.txt が最も確実。次の Step 3 で requirements.txt を生成する。

Save and Deploy をクリック。

Step 3: requirements.txt をリポジトリに追加¶

Cloudflare Pages ビルダーが pip で読むため、requirements.txt をリポジトリに追加する。

ローカルで:

cd /Users/yousan/Desktop/office-analyze
uv pip compile pyproject.toml -o requirements.txt
git add requirements.txt
git commit -m "ops: add requirements.txt for Cloudflare Pages build"
git push

次回 push で Cloudflare Pages が自動ビルド・デプロイする。

Step 4: ビルド成功の確認¶

Cloudflare ダッシュボード → Pages → office-analyze プロジェクト → Deployments タブ
最新のデプロイが ✅ Success か確認
プレビュー URL (https://office-analyze.pages.dev/ または https://<commit-hash>.office-analyze.pages.dev/) にアクセス
この時点では誰でも見られる状態 ─ Step 5 で Access 制限する

Step 5: Cloudflare Access (Zero Trust) で Google 認証を設定¶

5-1. Zero Trust 初期セットアップ (初回のみ)¶

https://one.dash.cloudflare.com/ にアクセス (Zero Trust ダッシュボード)
初回は Team name を聞かれる → 任意の名前 (例: ayutaz)
プランは Free (50 ユーザーまで無料、無償でも全機能利用可)

5-2. Google OAuth Identity Provider 追加¶

Zero Trust ダッシュボード → Settings → Authentication → Login methods
Add new → Google を選択
表示される手順に従い Google Cloud Console で OAuth client を作成:
https://console.cloud.google.com/apis/credentials
CREATE CREDENTIALS → OAuth client ID → Web application
Authorized redirect URIs: https://<your-team-name>.cloudflareaccess.com/cdn-cgi/access/callback (Cloudflare 側に表示される URL をそのまま貼る)
作成後の Client ID と Client Secret を Cloudflare の Google login method 設定にコピー
Save

5-3. Access Application を作成¶

Zero Trust ダッシュボード → Access → Applications → Add an application
Self-hosted を選択
設定:

項目	値
Application name	`office-analyze`
Session Duration	`1 month` (好み)
Application domain	`office-analyze.pages.dev` (Step 4 で確認した URL)
Path	(空欄、全パスを保護)

Next → Add a policy:

項目	値
Policy name	`Owner only`
Action	`Allow`
Session Duration	(Application と同じ)
Configure rules	`Include` → `Emails` → `magicboxs777@gmail.com`
Authentication method (optional)	Google (Step 5-2 で追加)

Next → Add application で保存

5-4. 動作確認¶

シークレットウィンドウで https://office-analyze.pages.dev/ にアクセス
Cloudflare Access のログインページが表示される
Sign in with Google → magicboxs777@gmail.com で認証
サイトが表示されれば成功
他の Google アカウントでログインすると Access denied が表示されること

Step 6 (オプション): カスタムドメイン設定¶

office-analyze.pages.dev で問題なければスキップ。独自ドメインを使いたい場合:

Cloudflare Pages プロジェクト → Custom domains → Set up a custom domain
ドメイン入力 (例: research.example.com)
Cloudflare で管理しているドメインなら自動 DNS 設定、外部 DNS なら CNAME を手動追加
Access Application の Application domain も同じドメインに変更

Step 7: GitHub Pages 設定の削除 (掃除)¶

リポジトリ private 化で GH Pages は自動 disabled だが、念のため:

gh api -X DELETE repos/ayutaz/office-analyze/pages 2>&1 || echo "already deleted or not configured"

トラブルシューティング¶

ビルドが失敗する: `mkdocs-macros-plugin` が見つからない¶

requirements.txt に含まれているか確認 (uv pip compile で再生成)
PYTHON_VERSION 環境変数が 3.12 に設定されているか

Access ログイン後に 404¶

Step 5-3 の Application domain と Pages の URL が一致しているか確認
カスタムドメインを使う場合、Access と Pages の両方で同じドメイン設定

Google OAuth のリダイレクト URI が一致しない¶

Google Cloud Console の redirect URI は Cloudflare 側に表示される正確な URL でなければならない (末尾スラッシュなど厳密)
Cloudflare 側の Identity Provider 設定ページに表示される URL をそのままコピー

古い GitHub Pages URL のキャッシュ¶

https://ayutaz.github.io/office-analyze/ は private 化で 404 になる
ブラウザキャッシュをクリア、または別 URL を案内

コスト見積もり¶

サービス	プラン	月額
Cloudflare Pages	Free	¥0 (月 500 ビルド・500MB トラフィック無制限)
Cloudflare Access	Free	¥0 (50 ユーザーまで無料)
Google Cloud Identity	Free	¥0 (OAuth は無料)
合計		¥0