Cloudflare Pagesにデプロイ：作ったWebサイトを公開する

たける ついにデプロイですね。怖いんですよね、なんか壊れそうで……。

りこ 今回は静的サイトのデプロイだから操作は単純。一番難しいステップはGitHubにpushすること。

デプロイの全体像

① ローカルでビルド確認
      ↓
② GitHubにpush
      ↓
③ Cloudflare Pagesがビルドを検知
      ↓
④ 自動でデプロイ → URLが生まれる
      ↓
⑤ 以降はpushするたびに自動デプロイ

Cloudflare Pagesは静的サイトのホスティングサービス。無料で独自ドメインもSSLも使える。

Step 1：ビルドしてみる

npm run build

vite v6.x.x building for production...
✓ 42 modules transformed.
dist/index.html                 0.50 kB │ gzip: 0.33 kB
dist/assets/index-xxxxx.css    8.21 kB │ gzip: 2.15 kB
dist/assets/index-xxxxx.js   142.36 kB │ gzip: 45.89 kB
✓ built in 1.23s

dist/ フォルダが生成される。これが実際にサーバーに置くファイル。

たける ビルドって何をしてるんですか？

りこ 3つのことをやってる。TypeScriptをJavaScriptに変換する、複数ファイルを1つにまとめる（バンドル）、コードを小さくする（ミニファイ）。ブラウザが直接実行できる形にしている。

ビルドが通るか確認する

npm run build && npm run preview

npm run preview はビルドした dist/ をローカルでサーブする。npm run dev と違い、本番ビルドの動作確認ができる。

エラーが出たら修正してから次に進む。

Step 2：GitHubにpushする

リポジトリを作る

GitHub（github.com）にログインし、「New repository」からリポジトリを作成する。名前は my-site など任意。

ローカルリポジトリを初期化してpush

# プロジェクトフォルダで実行
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/ユーザー名/my-site.git
git push -u origin main

たける `git add .` って全部追加してますよね。`node_modules/` も入っちゃいませんか？

りこ Viteが最初から `.gitignore` を作っている。`node_modules/` と `dist/` は除外される。`git status` で何が追加されるか確認してから commit する習慣をつけて。

Step 3：Cloudflare Pagesに接続する

Cloudflareアカウントを作る

cloudflare.com で無料アカウントを作成する。クレジットカード不要。

Pagesプロジェクトを作成する

1. Cloudflareダッシュボードの左メニューから Workers & Pages を選択
2. Create application → Pages → Connect to Git
3. GitHubアカウントを連携し、先ほど作ったリポジトリを選択

ビルド設定を入力する

Save and Deploy を押すとビルドが始まる。

たける デプロイが終わったら `xxx.pages.dev` というURLが割り当てられました！ 自分が作ったサイトがインターネットに出た……！

りこ おめでとう。これからは `git push` するたびに自動でデプロイされる。

SPAの404対策

React RouterのようなSPAでは、/characters に直接アクセスするとCloudflare側が404を返すことがある（サーバーに /characters というファイルが存在しないため）。

Cloudflare Pagesでは public/_redirects ファイルを作ることで解決できる。

# public/_redirects
/*    /index.html    200

これで全てのURLを index.html にフォールバックさせる。React Routerがそこからルーティングを引き受ける。

翔太 デプロイ後の確認だけど、最低でも3点チェックしてください。①トップページが200で返ってくるか、②`/characters` に直接アクセスして404にならないか（`_redirects` の動作確認）、③ブラウザのDevToolsのネットワークタブでassetが全部読み込まれているか。

たける 翔太さん来た！ Cloudflare Pagesって翔太さんの管轄ですか？

翔太 静的サイトは基本自分たちで管理してもらう。ただ本番に出すなら確認ぐらいはする。「動いてる」と「ちゃんと動いてる」は別の話なので。

りこ 翔太の言う通り。デプロイは「pushした」じゃなくて「確認した」で完了。

以降の開発フロー

# コードを修正
# ↓
git add .
git commit -m "feat: ○○を追加"
git push
# ↓ 自動でCloudflare Pagesがデプロイ（約1分）

git push だけで本番に反映される。これがCI/CDの最もシンプルな形。

たける このシリーズを通じて、開発環境を作って、コンポーネントを書いて、ページを繋いで、公開まで全部やれました。りこさん、ありがとうございました。

りこ よくできた。ここから先は「作りながら覚える」フェーズ。次は自分でアイデアを出して作ってみて。詰まったらまた聞きに来れば。