humbulls
MODULE · PUBLISH
作ったホームページを公開する
ローカルにあるサイトを、Cloudflare Pagesでインターネットに出す
ホームページ制作実演 第2部
humbulls
GOAL
このパートでわかること
Local
いまどこにあるか
作ったサイトは、まず自分のPCの中にあります。
Hosting
どこに置くか
Cloudflare Pagesにファイルを置いて公開します。
Domain
どう見つけるか
pages.devや独自ドメインでアクセスできるようにします。
humbulls
LOCAL / PUBLIC
ローカルと公開は別もの
ローカル
自分のPCの中にある
URLは「ローカルURL」のまま
他の人は基本見られない
公開
インターネット上の置き場所にある
https://... のURLで見られる
スマホや別PCから確認できる
制作中はローカル。お客さんに見せるには、公開用の置き場所へ出します。
humbulls
LOCAL ONLY
PCの中にあるだけでは他の人から見えない
ローカルは“自分の机の上”。公開は“外から見える棚に置く”イメージです。
humbulls
MENTAL MODEL
公開はPCの外に置くこと
LOCAL
自分のPC
制作中のHTML、CSS、画像。まずは自分だけが見られる状態。
BUILD
公開用フォルダ
`dist` や `out`。インターネットに出す完成ファイル一式。
HOSTING
Cloudflare Pages
公開用ファイルを置く場所。サーバー管理はCloudflare側に任せる。
PUBLIC
URLで見られる
`pages.dev` や独自ドメインで、スマホや別PCから確認できる。
humbulls
SERVER
サーバーは置き場所
本来は、24時間インターネットにつながるコンピューター。
Cloudflare Pagesを使うと、自分でサーバー管理をしなくていい。
静的サイトなら、完成したファイル一式をアップロードすればよい。
公開後はURLで見られるので、内容の確認が必須。
humbulls
WHAT IS CLOUDFLARE
Cloudflareは公開用の置き場所を楽にする
自分でサーバー機械や回線を管理する話ではない。
Cloudflare Pagesは、完成ファイルを置くホスティングの一種。
静的サイトなら無料枠から始めやすい。最新条件は公式で確認する。
Wranglerでコマンド化しやすく、Codexに調査→実行を頼みやすい。
将来はPages Functions / Workers / Workers AIへ広げられる。
humbulls
CLOUDFLARE CONCEPT
Cloudflareはサーバー管理を預ける先
講義ではCloudflareの全機能ではなく、まず公開用ファイルを置く場所として理解します。
humbulls
HOSTING
公開とはホスティングに置くこと
Cloudflare Pagesは、完成ファイルを置く“公開用の棚”として考えると理解しやすいです。
humbulls
DOMAIN / DNS
URLがページへたどり着く流れ
見る人
ブラウザでURL入力
example.com
DNSは
住所の案内板
住所の案内板
このドメインは、どのサービスへ向かえばよいかを教えます。
CNAME / DNS設定
Cloudflare Pages
公開ファイル
最初は `pages.dev` で確認。独自ドメインは、表示が正しいことを見てから接続します。
humbulls
DNS MAP
ドメインとDNSは案内板
ドメインは名前。DNSは、その名前がどこへ向かうかを教える案内板です。
humbulls
CLOUDFLARE FLOW
Cloudflareで公開する全体像
01
作る
ローカルでサイト完成
02
ビルド
公開用フォルダを作る
03
アップロード
PagesへDirect Upload
04
確認
pages.devで表示確認
05
接続
必要なら独自ドメイン
humbulls
WHY CLOUDFLARE
Cloudflare Pagesを使う理由
静的HTMLやフロントエンドサイトを公開しやすい。
`*.pages.dev` のURLでまず公開できる。
Git連携も、ローカルからのDirect Uploadも選べる。
公開後の差し戻しや再デプロイもしやすい。
humbulls
DIRECT UPLOAD
実演ではDirect Upload
ローカルで作った公開用フォルダを、そのままPagesへ送る。
CodexにWranglerコマンドを実行させやすい。
GitHub連携より、初回デモの理解が早い。
Direct Uploadのプロジェクトは、後からGit連携へ切り替えできない点に注意。
humbulls
PREP
公開前に準備するもの
Cloudflareアカウント。ログインは人間がブラウザで行う。
Node.js / npm。Wranglerは `npx` で使える。
公開用フォルダ。例: `dist` / `out` / `build`。
プロジェクト名。英数字小文字とハイフンが無難。
humbulls
COMMANDS
Codexに実行させる基本コマンド
# 1. 公開用ファイルを作る
npm run build
# 2. Cloudflareにログイン
npx wrangler login
# 3. Pagesプロジェクトを作る
npx wrangler pages project create
# 4. 公開用フォルダをアップロード
npx wrangler pages deploy dist
`dist` は例です。Codexにこのプロジェクトの出力先を確認させてから実行します。
humbulls
CODEX ROLE
Codexには調べてから実行させる
まずCWD内の構成を読ませる。
`package.json` から build コマンドを確認させる。
出力フォルダが `dist` か `out` かを確認させる。
ログイン・独自ドメイン接続など、人間確認が必要な所で止めさせる。
humbulls
SECRETS
秘密情報をチャットに貼らない
APIキー、トークン、パスワードを会話に貼らない。
`wrangler login` はブラウザ認証で進める。
必要な環境変数は、Cloudflare側の設定やsecret管理に入れる。
公開前に `.env` や下書きファイルが混ざっていないか確認する。
humbulls
PROMPT
実演用プロンプト
このCWDのホームページをCloudflare Pagesで公開したいです。
いきなりデプロイしないでください。
1. まずプロジェクト構成を確認
2. buildコマンドと出力フォルダを特定
3. 公開前チェックリストを作成
4. 実行するコマンドを提案
5. 私が確認したら、ローカルビルド→Pages公開→URL確認まで進める
秘密情報はチャットに貼らせないでください。
humbulls
VERIFY
公開したら必ず見る
発行された `*.pages.dev` URLを開く。
スマホ幅でも崩れていないか見る。
画像・リンク・フォーム・OGPを確認する。
404なら、`index.html` と公開フォルダを疑う。
humbulls
CUSTOM DOMAIN
独自ドメインは最後につなぐ
まず `pages.dev` で正常表示を確認する。
Pagesプロジェクトの Custom domains からドメインを追加する。
apexドメインはCloudflare zoneとnameserver設定が必要。
サブドメインはCNAMEで `.pages.dev` へ向ける。
humbulls
REDEPLOY
修正したらまた公開
ローカルで修正する。
もう一度 build する。
同じPagesプロジェクトへ再デプロイする。
公開URLで変わったことを確認する。
公開は一回で終わりではなく、修正→確認→再公開のループです。
humbulls
UPDATE LOOP
公開後は直して、また出す
公開後の修正も、ローカルで直す → build → deploy → URLで確認、の繰り返しです。
humbulls
DEPLOY NOTES
公開情報はファイルに残す
deploy-notes.md
- Cloudflare project name
- pages.dev URL
- custom domain
- build command
- build output directory
- last deploy date
- next check items
Threadが変わっても、次回すぐ復帰できるようにします。
humbulls
TROUBLESHOOTING
よくある詰まりどころ
404: 公開フォルダ違い / index.htmlなし。
画像が出ない: パス違い / 大文字小文字 / assets漏れ。
ログイン不可: Wrangler認証・アカウント選択を確認。
独自ドメイン未反映: DNS設定と反映待ちを確認。
humbulls
humbulls Codex
ローカルの作品を、URLで見せられる形にします。
栗田 一輝 / Kazuki Kurita
kurita@humbulls.com
kurita@humbulls.com
humbulls