CHP-001

📚 lunelukkio.com プライベート教科書サイト構成図解

名前.com で取得したドメイン lunelukkio.com を使い、Cloudflare の無料枠で
本人だけが見られる AI 製 HTML 教科書サイトを構築するプロジェクトの全体像。
一部（/public/ 配下）はゲスト向けに認証なしで公開している（詳細は第 7 章）。

1. 全体アーキテクチャ

ブラウザから教科書が表示されるまでの流れ。

図1: アクセスから配信までのデータフロー（あなた=全ページ / 他人=public のみ閲覧可）

2. 使うサービスと料金

レイヤー	サービス	役割	料金
ドメイン	名前.com	ドメイン名の保有	取得済み（年額のみ）
DNS	Cloudflare DNS	名前解決	無料
ホスティング	Cloudflare Pages	HTML 配信	無料・無制限帯域
認証	Cloudflare Access	Google ログインで保護	無料（50ユーザー）
バージョン管理	GitHub	HTML の保管・同期	無料

初期費用・ランニングコスト：ドメイン年額のみ。それ以外は完全無料。

3. なぜ GitHub で一元管理するか

複数 PC で作業する場合の管理方式の比較。

図2: 管理方式の比較（GitHub 一元管理が最適）

4. 各 PC のフォルダ配置イメージ

各 PC でフォルダの場所は自由。中身は GitHub が同期する。

図3: フォルダ場所は PC ごとに自由。中身は git が同期

5. 日常の作業フロー

1作業前: git pull で最新を取得

2編集: AI で作った HTML を該当フォルダに配置・修正

3確認: ローカルで HTML を開いて表示確認

4記録: git add . → git commit -m "..."

5公開: git push → 1〜2 分後に lunelukkio.com に自動反映

# 典型的なターミナル操作
cd ~/Documents/lunelukkio-site
git pull
# (HTML を編集・追加)
git add .
git commit -m "数学2章を追加"
git push
# → Cloudflare Pages が自動でビルド&デプロイ

6. セキュリティ（なぜ自分だけ見えるか）

図4: メールアドレスベースのアクセス制御

🔒 通信

HTTPS 自動発行（Cloudflare）

全通信暗号化

🆔 認証

Google ログイン必須

セッション 24 時間

🚫 認可

メアド一致のみ Allow

他人は 403 拒否

📦 リポジトリ

Private 設定

GitHub 側でも非公開

7. 公開エリア /public/（ゲスト公開）

サイト全体は Google ログインで保護したまま、/public/ 配下だけを認証なしで誰でも閲覧できるようにしている。仕組みは、/public/ にだけ別の Cloudflare Access アプリを当て、Bypass（認証スキップ）+ Everyone（全員）のポリシーを設定するというもの。Cloudflare Access は同じドメイン内でパスが長い方を優先評価するため、/public/ は素通し・それ以外は本人のみ、が両立する。

図5: パスによる認証の出し分け（/public/ だけ素通し）

対象パス	適用アプリ / ポリシー	結果
`lunelukkio.com/public/*`	lunelukkio public / Bypass + Everyone	誰でも閲覧可（ログイン不要）
それ以外すべて	既存アプリ / Allow（本人のメールのみ）	Google ログイン必須・本人のみ

認証を外しても安全な理由

静的サイト

サーバー側でコードが動かない

SQL インジェクション・RCE が原理的に無い

DDoS 防御

Cloudflare が無料・自動で緩和

オリジン IP も隠蔽される

HTTPS

公開エリアも常時暗号化

証明書は Cloudflare が自動発行

残る注意点

機密ファイルを public/ に置かない

= 技術でなく運用で守る

公開記事を追加するとき

公開してよい HTML を public/ 配下に置いて push するだけ。Cloudflare 側の再設定は不要。検索エンジン対策として、各ページの <head> に noindex メタタグを必ず入れる。

# 公開ページの head に必ず入れる
<meta name="robots" content="noindex, nofollow">

# 追加して公開
cd ~/Documents/lunelukkio-site
git add public/
git commit -m "公開記事を追加"
git push   # → /public/ に認証なしで反映

設計・手順の詳細は docs/public-area-plan.md を参照。

8. 構築フェーズ一覧

#	フェーズ	所要時間
1	GitHub リポジトリ作成	10分
2	ローカル + 初期 HTML	15分
3	Cloudflare アカウント + DNS 移管	30分（反映待ち含む）
4	Cloudflare Pages デプロイ	15分
5	独自ドメイン接続	10分
6	Cloudflare Access 認証設定	20分
7	各 PC セットアップ	PCごと 10分
8	一部公開エリア /public/ 設置	15分

フェーズ 1〜8 はいずれも完了済み（2026-06-02 時点）。詳細手順は docs/plan.md、公開エリアは docs/public-area-plan.md、Windows での作業は docs/windows-setup.md を参照。

9. このプロジェクトの管理ファイル

# プロジェクト管理（計画・記録）
/Users/makoto_natsuharu/Projects/AI/html_project/
├── CLAUDE.md                       ← プロジェクト記憶
└── docs/
    ├── plan.md                     ← 全体構築の詳細手順
    ├── integration-plan.md         ← 学習HTML一元化計画
    ├── public-area-plan.md         ← 公開エリア /public/ 設計・手順
    ├── implementation-log.md       ← 実施記録
    ├── windows-setup.md            ← Windows での作業手順
    └── learning/
        └── chp-001.html       ← 図解の元ファイル（本ページの移行元）

# サイト本体（GitHub で管理・本ページの実体）
~/Documents/lunelukkio-site/
└── claude-html-project/
    └── chp-001.html           ← 本ページ（CHP-001）

10. サブドメインによる共同運用：別管理下ページと2人認証

同じ lunelukkio.com ドメインを使いながら、別の人が完全に独立した管理下でページを運用できる構成。サブドメイン（例: friend.lunelukkio.com）を切り出し、相手が自分の GitHub・自分の Cloudflare Pages プロジェクトでコンテンツを管理する。 Cloudflare Access で2人だけが認証できるポリシーをサブドメインに設定する。

図6: サブドメインによる完全別管理構成（DNS のみ共通）

管理範囲の分担

項目	あなたが管理	相手が独立管理
DNS レコード	CNAME を1行追加（初回のみ）	—
GitHub リポジトリ	自分のアカウント	自分のアカウント
Cloudflare Pages	自分の CF アカウント	自分の CF アカウント
デプロイのタイミング	自分の push	相手の push（あなた不要）
コンテンツの中身	完全に独立	完全に独立
Access ポリシー	App A（あなたのみ）を管理	App B はあなたが設定・管理

Cloudflare Access ポリシー設定（App B）

friend.lunelukkio.com 用に新しい Access アプリケーションを作成し、以下のポリシーを設定する。

ルール種別	条件	意味
Allow	Emails: `あなた@gmail.com`	どちらかのメールで Google ログインすれば閲覧可
Allow	Emails: `friend@example.com`	どちらかのメールで Google ログインすれば閲覧可

設定場所: Cloudflare Zero Trust ダッシュボード → Access → Applications → Add an application

セットアップ手順

1相手が準備: 相手が自分の GitHub リポジトリ・Cloudflare Pages プロジェクトを作成し、Pages のカスタムドメイン設定画面で friend.lunelukkio.com を追加する（CNAME 先が表示される）

2あなたが DNS を設定: Cloudflare DNS に相手から受け取った CNAME レコードを1行追加する

3あなたが Access を設定: Zero Trust で friend.lunelukkio.com 用の Access App B を作成し、2人のメールアドレスを許可するポリシーを設定する

4完了・以降は独立: 相手は自分のリポジトリに push するだけでサブドメインが更新される。あなたは関与不要

コスト

項目	費用	備考
サブドメイン追加	無料	DNS レコード追加のみ。親ドメインの追加費用なし
相手の Cloudflare Pages	無料	Pages 無料枠（500 ビルド/月・無制限帯域）
Access App B（2人認証）	無料	無料枠は50ユーザーまで。2人は余裕で枠内

注意点：唯一の依存関係

DNS 依存

CNAME レコードはあなたの DNS 管理下にある。あなたが削除すれば相手のサブドメインは消える。信頼関係が前提。

Access 管理

App B の認証ポリシーはあなたが管理する。相手のメールを削除すれば相手はアクセス不能になる。

完全独立にするには

本当に依存ゼロにしたい場合は、相手が独自ドメインを取得するしかない。サブドメイン共用は常に親ドメイン側への最小限の依存が残る。

作成: 2026-05-20 / 更新: 2026-06-08（サブドメイン共同運用・2人認証を追記） / lunelukkio personal project

📚 lunelukkio.com プライベート教科書サイト 構成図解