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

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

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

デプロイの全体像

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

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

Step 1：ビルドしてみる

npm run build

vite v8.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 Pagesの開始ガイドを開き、利用するプラン・制限を確認してアカウントを用意する。画面の項目名は変更されることがある。

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

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

ビルド設定を入力する

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

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

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

SPAの直接アクセスを確認する

Cloudflare Pagesは、トップ階層に 404.html がなければSPAとして扱い、見つからないパスをルートへフォールバックする。標準のVite SPAなら、まず /characters の直接アクセスと再読み込みを試す。必ず _redirects が必要というわけではない。

独自の404ページやPages Functionsを加えている場合はルーティング条件が異なる。静的生成でURLごとのHTMLを持つサイトにも、無条件の /* /index.html 200 を流用しない。

React Router側には <Route path="*" element={<p>ページが見つかりません</p>} /> を追加すれば、アプリ内の不明なURLを区別できる。ただしSPA側の表示だけではHTTPステータスは404に変わらない。

Cloudflare公式のSPA配信仕様

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

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

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

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

以降の開発フロー

# コードを修正
# ↓
git add .
git commit -m "feat: ○○を追加"
git push
# ↓ 自動でCloudflare Pagesがデプロイ（所要時間はビルドと待ち行列による）

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

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

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

確認してみる

公開URLを直接開き、再読み込み、画像の取得、存在しないURLの表示を確認する。push成功と公開成功を別に確認する。

仕様・手順の参照先