VCA

Cloudflare Pages にデプロイする

完成したサイトを Cloudflare Pages で公開：Git 連携の自動デプロイ、build 設定、独自ドメインまで初心者向けに。

公開日 更新日 レビュー日 約2分で読了編集方針#実践ガイド#デプロイ#Cloudflare
学習ルートポートフォリオルート

ひとことで言うと

Cloudflare Pages を Git につなげば、push のたびに自動で build して公開。公開は難しくあるべきでない。

作れるもの

Git 連携で push ごとに自動デプロイされ、独自ドメインで配信されるサイト。すべて無料枠の範囲で。

公開は難しくない

「作ったけれど、どうやって人に見せるか分からない」で止まる初心者は多い。Cloudflare Pages はこれを簡単にします。コードを Git につなげば、push のたびに自動で build して世界中へ公開します。

公開の3つの方法

  1. Git 連携（最もおすすめ）：GitHub / GitLab とつなぎ、push で自動デプロイ。プレビュー用の URL も自動生成。
  2. 直接アップロード：build 済みの出力フォルダをダッシュボードにドラッグ。単発の静的サイト向け。
  3. Wrangler CLI：wrangler pages deploy で公開。スクリプト化したい人向け。

Git 連携の手順（やさしい版）

  1. プロジェクトを GitHub に push。
  2. Cloudflare ダッシュボード → Workers & Pages → Pages プロジェクト作成 → リポジトリを連携。
  3. build コマンド（例：npm run build）と出力ディレクトリ（例：out や dist）を設定。
  4. デプロイを押し、完了すると あなたのプロジェクト.pages.dev の URL が得られます。公開完了。

push の後に起きること

独自ドメインを付ける

*.pages.dev はそのまま使えますが、よりプロらしくするなら独自ドメインを。プロジェクトの「カスタムドメイン」に追加し、DNS の指示に従います。ドメインがすでに Cloudflare にあれば、ほぼワンクリックです。

初心者がはまる落とし穴

  • build コマンドや出力ディレクトリの誤り：デプロイは成功するのに画面が真っ白。多くは出力ディレクトリの指定ミス。
  • 環境変数 / シークレット未設定：ローカルは動くのに本番で壊れる。多くは環境変数の不足。Pages 設定で補う。
  • シークレットを Git にコミット：鍵は絶対にバージョン管理に入れない。プラットフォームのシークレット設定を使い、コードに直書きしない。

次のステップ

よくある質問

デプロイは成功したのに画面が真っ白。どうすれば？

最も多い原因は「出力ディレクトリ」の誤りです。Pagesが公開しているフォルダが、実際のビルド成果物ではない（例：out にすべきところを root にしている）。次に build コマンドの誤りや環境変数の未設定。この3点をまず確認すれば、たいてい解決します。

無料プランでのデプロイには、どんな制限がある？

無料プランは個人案件には十分なことが多いですが、月間のビルド回数・帯域・（Functionsを使うなら）実行回数の上限に注意。静的サイトはほぼ到達しません。動的機能を多用したり大量トラフィックなら、アップグレードを再検討。正確な数値は公式pricingページで。

参考資料

  1. Cloudflare Pages docs — Cloudflare
  2. Cloudflare Plans & Pricing — Cloudflare

ポートフォリオルート の次のステップ: Cloudflare →