2-10: Web を作る ── HTML と CSS と JavaScript に戻る
で、中身を文字で持ち、外枠を HTML と CSS で書き、Python で焼く形を決めた。ここでは、その焼いた html/ を外に出す。
置き場は二つある。2-02 で立てた自分の一台に載せるか、Cloudflare Pages に置くかだ。出す手順はどちらも同じで、片方で始めて後から替えられる。
公開する形を、先に決める
この章で決めるのは、次の六つだ。AI にこの章を渡すとき、渡すのはこの決定であって、コードではない。
- 公開するのは、焼いた HTML の束(
html/)── 生成は前章で終わっている - 動的サーバは置かない ── 動く部分だけを FastAPI 一つに寄せる
- 置き場は二つのどちらか ── 自分の一台(Caddy)か、Cloudflare Pages。上げる
html/は同じ物 - HTTPS は自動 ── Caddy が取るか、Cloudflare が付ける
- ビルド → 確認 → デプロイを分ける ── 確認した HTML と、本番に出る HTML を同じにする
- 公開の側と内部の道具は、名前から分ける ── 秘密が通る側は門番 (2-05)の内側に残す
置き場は、二つから選ぶ
[cols="1,2,2"]
| 自分の一台(2-02 + Caddy) | Cloudflare Pages | |
|---|---|---|
| 機械 | ||
| 自分で持つ(2-02 の一台にまとめる) | ||
| 借りる。機械の面倒は無い | ||
| 証明書 | ||
| Caddy が Let's Encrypt から自動で取って更新する | ||
| Cloudflare が自動で付ける | ||
| 配信 | ||
| 自分の回線の太さで決まる | ||
| 世界中の CDN から出る | ||
| 動く部分 | ||
| 同じ機械の FastAPI に、そのまま繋ぐ | ||
| 自分の一台の門番の内側の API に、外から繋ぐ | ||
| 向く場面 | ||
| 社内向け、規模の見える公開、IoT の受け口も同じ一台に置きたいとき | ||
| 閲覧が多い、回線と機械のことを考えたくないとき |
迷うなら、自分の一台から始める。2-02 で機械はもう立っていて、足すのは Caddy
の数行だけだ。閲覧が増えて回線が気になったら、同じ html/ を Cloudflare Pages
に上げれば、その日のうちに移れる。
自分の一台に載せる
2-02 で立てた Debian の一台に、Caddy を前に立てる。Caddy は Debian 13 の apt にあり、 systemd で動く(2-02)。80 と 443 を受け、証明書を自動で取って自動で更新する。設定はこれだけだ。
example.com {
root * /srv/html
file_server
handle /api/* {
reverse_proxy localhost:8000
}
}
公開の Web(静的ファイル)と、動く部分(FastAPI)が、同じドメインの下に並ぶ。別のドメインを跨がないので、ブラウザ側の許可設定も要らない。
決めることは三つ。
- 公開する物の置き場 ──
/srv/html。手元で焼いたhtml/を、そこへ送る - 内部の道具は、別のホスト名 ──
intra.example.comのように分け、門番 (2-05)の内側に置く。同じ Caddy でよいが、公開のホスト名とは分ける - 外から届く道 ── 固定 IP か DDNS で名前を向け、開けるのは 80 と 443 だけ
Cloudflare Pages に置く
機械を持たずに出すなら、Cloudflare Pages を使う。ファイルを上げれば世界中の CDN から配信され、HTTPS も自動で付く。
配信と防御は Cloudflare に任せ、ソースとビルドは自分の手元に残す。公開する HTML に秘密は無いので、ここは任せてよい。
上げるのに npm も Node も要らない。Cloudflare の API を直接叩くスクリプト一つで足りる。そのスクリプトは
aiseed-dev/cf-publish
として公開してあり(PyPI、uv tool install cf-publish)、一行で、変わったファイルだけが上がる。本番とは別の枝に上げれば、プレビューの URL が出る。
ビルドと確認とデプロイを、分ける
置き場がどちらでも、出す手順は同じだ。一つのコマンドにまとめない。
uv run python tools/build.py # 1. 焼く
uv run python -m http.server --directory html 8000 # 2. 手元で、目で見る
rsync -a --delete html/ [email protected]:/srv/html/ # 3a. 自分の一台へ
cf-publish html --project <名前> # 3b. Cloudflare Pages へ
自動で作り直す設定や、「ビルドして上げる」を一つにまとめたコマンドは使わない。 確認した HTML と、本番に出る HTML を、同じにする ためだ。動く部分があるなら、「確認」の段で 2-12 の公開の前の四つの点検を回す。Cloudflare Pages には本番の前にプレビューの枝があるので、本番の URL に向ける前にそこで見られる。自分の一台なら、同じ機械にもう一つのホスト名を足せば、同じことができる。
ドメインをつなぐ
- 自分の一台 ── A レコードをその機械の IP へ向ける。名前が向いた時点で、Caddy が証明書を取りにいく
- Cloudflare Pages ── Pages のカスタムドメインに足す。DNS を Cloudflare で持っていれば、レコードは自動で入り、証明書も自動で付く
メール(MX・SPF)は触らない。替えるのは Web の置き場だけだ。旧サーバがあるなら、止めずに残したまま新しい側を確かめ、確かめてから名前を向ける。
動く部分は、FastAPI で裏につなぐ
問い合わせフォーム、予約の受け口、求人の検索 ── 動くのはこのくらいだ。ここは FastAPI 一つに寄せる。
- 受け口 ── FastAPI(2-12。予約もそこで書く)
- 保存 ── 2-03 の DB
- 通知 ── 2-08 のメール
- 身元 ── 門番(2-05)。問い合わせも予約も、門番のワンタイム(メールに届く番号)でアドレスを確かめてから受ける
外から来る人にも、先にメールアドレスを確かめさせる。返事を書くには宛先が要るし、確かめた宛先なら打ち間違いも偽の投稿も来ない。パスワードもアカウントの作成も要らず、番号を一つ入れるだけだ。これで、動く部分は全部、門番の内側に置ける。
繋ぎ方は置き場で変わる。自分の一台なら、Caddy の /api/* を同じ機械の FastAPI
へ回す。Cloudflare Pages なら、自分の一台の FastAPI へ外から繋ぐ。どちらでも、通るのは門番で身元を確かめた人だけだ。
公開の側と、門番の内側を分ける
公開サイトは、どちらの置き場でもよい。静的で、秘密は無い。自立編で立てた内部の道具 ── 門番・文書・コード・メール・会議 ── は別に扱う。秘密や生のデータが通るので、門番の内側に残す。
- 公開サイト(静的・秘密なし)── 自分の一台でも、Cloudflare Pages でもよい
- 内部の道具(認証・業務データ)── 門番の内側に持つ
借りている窓は、いつでも替えられる。公開サイトの実体は、静的ファイルの束と、手元のソースだ。明日、別の置き場に同じ html/ を送れば、それで引っ越しは終わる。窓は借りても、出口はいつも開いている。
確かめ方
この章は、次の五つができていれば済みだ。
- 公開した頁が独自ドメインで開き、ブラウザに鍵の印が付く
- 手元の 8000 番で目で見た頁と、本番の頁が同じに見える
- 本番に向ける前に、別の URL で同じ頁を開いて確かめられる
- 問い合わせフォームで、メールに届いた番号を入れてから送ると、2-08 のメールに通知が届き、2-03 の DB に残っている
- 今までどおりメールが届く(MX を触っていない)
curl -sI https://example.com | head -1 # 公開した頁が返る
curl -sI https://example.com/api/health # 動く部分も同じ名前の下で返る
人が持つ物
人が渡す値
- 公開するドメイン名
- 置き場の選択(自分の一台か、Cloudflare Pages か)
- 自分の一台なら ── その機械の IP と、送り先のパス(
/srv/html) - Cloudflare Pages なら ── アカウントと API トークン、プロジェクト名
- 問い合わせの通知を受けるメールアドレス(2-08 のメール)
AI が「やる前に言う」操作
- 本番のドメインに名前を向ける
- 本番の
html/を丸ごと入れ替える(rsync --deleteを含む) - Caddy の設定を替えて、公開のホスト名を足す・外す
- 旧サーバを止める
- DNS の MX・SPF を変える(この章では触らない)
確かめた版と日付
- Caddy 2.6(Debian 13 のパッケージ、自動 HTTPS)、Cloudflare Pages、
cf-publish0.3 (aiseed-dev/cf-publish、PyPI)、rsync、Python のhttp.server - 手順を書いたのは 2026-09-21、見直したのは 2026-10-06
- 版が上がっていたら、AI に公式の手順を確かめさせてから進める
まとめ
焼いた HTML を、二つの置き場のどちらかに出す。
- 置き場は二つ ── 2-02 の自分の一台(Caddy)か、Cloudflare Pages。同じ
html/ - 手順は一つ ── ビルド → 確認 → デプロイを分け、確かめた物をそのまま出す
- HTTPS は自動 ── Caddy が取るか、Cloudflare が付ける
- 動く部分は FastAPI 一つ ── 保存は 2-03、通知は 2-08。外から来る人も門番のワンタイムでアドレスを確かめてから通す
- 公開と内部を分ける ── 秘密が通る側は、門番の内側に残す
次章では、基幹システムのロジックを API(FastAPI)として出し、各アプリから使えるようにする。