作ったものを世界に公開する ── Cloudflare Pages / Vercel / Netlifyの使い方

デプロイとは何か ── ローカルとサーバーの違い

バイブコーディングでサイトを作った。ブラウザで localhost:4321 を開くと、ちゃんと表示される。でも、このURLを友人に送っても何も表示されない。

なぜか。localhost は「自分のPC」という意味だからだ。あなたのPCの中でだけ動いているサイトは、あなたしか見られない。

自分のPC（ローカル環境）
  └── localhost:4321 → 自分だけが見られる

インターネット上のサーバー（本番環境）
  └── example.com → 世界中の誰でも見られる

ローカル環境のファイルを、インターネット上のサーバーに置く作業のことを**デプロイ（deploy）**と呼ぶ。日本語では「公開」「配置」「展開」などと訳されることもある。

デプロイに必要なもの

デプロイするために最低限必要なのは以下の3つだ。

必要なもの	説明	費用
コード一式	作ったサイトのファイル	無料
GitHubアカウント	コードをクラウドに保管する場所	無料
ホスティングサービス	サイトを公開するサーバー	無料（後述）

昔はサーバーを借りて、FTPソフトでファイルをアップロードして…という作業が必要だった。今はGitHubにコードを置くだけで、自動的にサイトが公開される。バイブコーディング時代のデプロイは驚くほど簡単だ。

---

3大ホスティングサービス徹底比較

無料で使えるホスティングサービスは複数あるが、2026年現在、主に使われているのは以下の4つだ。

基本スペック比較

項目	Cloudflare Pages	Vercel	Netlify	GitHub Pages
月額料金	無料	無料	無料	無料
帯域制限	無制限	100GB/月	100GB/月	100GB/月
ビルド回数	500回/月	6,000分/月	300分/月	GitHub Actions依存
同時プロジェクト数	無制限	無制限	1チーム500サイト	リポジトリ数依存
CDN拠点数	300+	各地域	各地域	限定的
独自ドメイン	無料で設定可	無料で設定可	無料で設定可	無料で設定可
HTTPS	自動	自動	自動	自動
プレビューURL	あり	あり	あり	なし

フレームワーク対応比較

フレームワーク	Cloudflare Pages	Vercel	Netlify	GitHub Pages
Astro	最適	対応	対応	静的のみ
Next.js	対応	最適	対応	非推奨
Nuxt	対応	対応	対応	非推奨
SvelteKit	対応	対応	対応	非推奨
静的HTML	対応	対応	対応	最適
React (Vite)	対応	対応	対応	対応

どのサービスを選ぶべきか

具体的な選び方は以下の通り。

• Astroで作った静的サイト → Cloudflare Pages（帯域無制限が強い）
• Next.jsでSSR（サーバーサイドレンダリング）を使う → Vercel（Next.jsの開発元）
• フォーム機能が必要 → Netlify（Netlify Formsが便利）
• とにかくシンプルにHTMLを公開したい → GitHub Pages（追加サービス不要）
• 複数サイトを大量に運営する → Cloudflare Pages（帯域・プロジェクト数に制限なし）

---

Cloudflare Pagesでのデプロイ完全手順

最もおすすめのCloudflare Pagesで、ゼロから公開するまでの全手順をTimeline形式で見ていこう。

前提条件

• GitHubアカウントを持っている（なければgithub.comで作成）
• プロジェクトのコードがローカルにある
• Gitの基本操作がわかる（git add, git commit, git push）

手順

Step 2の詳細：GitHubへのpushコマンド

# プロジェクトフォルダに移動
cd my-project

# Gitリポジトリを初期化（初回のみ）
git init

# 全ファイルをステージング
git add .

# 初回コミット
git commit -m "Initial commit"

# メインブランチ名をmainに設定
git branch -M main

# GitHubのリポジトリをリモートに追加
git remote add origin https://github.com/ユーザー名/リポジトリ名.git

# GitHubにプッシュ
git push -u origin main

Step 7の詳細：フレームワーク別ビルド設定

フレームワーク	Build command	Output directory
Astro	npm run build	dist
Next.js (静的)	npm run build	out
Vite (React)	npm run build	dist
SvelteKit	npm run build	build
Nuxt	npm run build	.output/public
素のHTML	(空欄)	/ または public

---

Vercelでのデプロイ手順

Next.jsを使っている場合はVercelが最適解だ。手順はCloudflare Pagesとほぼ同じ。

---

GitHub Pagesでのデプロイ手順

追加のサービス登録なしで使えるのがGitHub Pagesの最大の利点だ。GitHubアカウントがあればすぐに使える。ただし、静的サイト（HTML/CSS/JSのみ）に限られる点に注意。

方法1：Settings → Pages から設定

1. GitHubでリポジトリを開く
2. Settings → 左メニューの Pages
3. Source: 「GitHub Actions」 を選択
4. フレームワークに対応したワークフローが提案される → 設定して保存
5. 自動的にビルド＆デプロイが実行される

方法2：静的HTMLをそのまま公開

単純なHTML/CSS/JSファイルだけなら、さらに簡単だ。

1. リポジトリのルートに index.html を置く
2. Settings → Pages → Source: 「Deploy from a branch」 → main / /(root) を選択
3. ユーザー名.github.io/リポジトリ名 で公開される

---

独自ドメインの設定方法

pages.dev や vercel.app のURLでもサイトは機能する。だが、独自ドメイン（例: my-portfolio.com）を設定すると、プロフェッショナルな印象になり、SEOにも有利だ。

ドメイン取得から公開までの全体像

おすすめのドメイン登録サービス

サービス	特徴	.com価格（年間）
Cloudflare Registrar	原価提供で最安。Cloudflareユーザーなら一択	約1,200円
Google Domains（現Squarespace）	シンプルなUI、Whois無料	約1,700円
お名前.com	日本最大手、初年度安い	初年度1円〜、更新約1,500円
エックスサーバードメイン	サーバーとセットなら無料特典あり	約1,300円

Vercelで独自ドメインを設定する場合

VercelもDNS設定で独自ドメインを紐付けられる。

1. Vercelダッシュボード → プロジェクト → Settings → Domains
2. ドメイン名を入力して「Add」
3. 表示されるDNSレコード（AレコードまたはCNAME）を、ドメイン登録サービス側で設定
4. 数分〜数時間でSSL証明書が自動発行される

---

デプロイ後のチェックリスト

サイトを公開したら終わりではない。以下の項目を必ず確認しよう。

基本チェック（必須）

チェック項目	確認方法	目的
全ページの表示確認	URLを開いて目視	リンク切れやレイアウト崩れがないか
モバイル表示	スマホ実機 or DevTools	レスポンシブ対応の確認
ページ速度	PageSpeed Insights	表示速度のスコア確認
リンク切れ	全ページのリンクをクリック	404エラーがないか
画像の表示	全ページを確認	パスのミスで画像が表示されないことが多い

SEO対策チェック

チェック項目	確認方法	目的
Google Search Console登録	search.google.com/search-console	Googleに存在を通知
サイトマップ送信	Search Consoleの「サイトマップ」から送信	全ページをGoogleに伝える
title/descriptionの確認	各ページのソースを確認	検索結果に表示される内容
OGP画像の確認	ogp.me や各SNSのデバッガー	SNSシェア時の表示
robots.txtの確認	サイトURL/robots.txt	クローラーのアクセス制御

SNSシェア確認

OGP（Open Graph Protocol）が正しく設定されていないと、SNSでシェアしたときに画像やタイトルが表示されない。以下のツールで確認しよう。

• X（Twitter）: cards-dev.twitter.com/validator
• Facebook: developers.facebook.com/tools/debug/
• LinkedIn: linkedin.com/post-inspector/

---

よくあるデプロイエラーと解決法

デプロイは手順通りにやっても失敗することがある。ここでは初心者がよく遭遇するエラーと解決法をまとめた。

エラー1：ビルド失敗（Build failed）

原因: ローカルでは動くのに、サーバー上でビルドが通らない。

よくある原因	解決法
Node.jsのバージョン違い	環境変数で NODE_VERSION=20 を設定
依存パッケージ不足	package.json に全パッケージが記載されているか確認
大文字/小文字の違い	macOSはファイル名の大文字小文字を区別しないが、Linuxサーバーは区別する。Image.png と image.png は別ファイル
環境変数の未設定	APIキーなどをサーバー側の環境変数に設定

# ローカルで本番ビルドを試す（デプロイ前の確認に有効）
npm run build

エラー2：404 Not Found

原因: ページが見つからない。

• Build output directoryの設定ミス: Astroなら dist、Next.js（静的）なら out を指定
• ベースパスのミス: GitHub Pagesはリポジトリ名がパスに含まれる（/repo-name/）。設定ファイルで base を指定する必要がある
• SPA（シングルページアプリ）のルーティング: _redirects ファイルや設定でリダイレクトを追加

エラー3：画像が表示されない

原因: 画像パスの問題。

• 絶対パスの間違い: /images/photo.jpg ではなく ./images/photo.jpg にする場合がある
• ファイル名の大文字/小文字: 前述の通り、Linux環境では区別される
• 画像ファイルサイズが大きすぎる: 最適化してからアップロード

エラー4：CSSが適用されない

原因: パスやキャッシュの問題。

• キャッシュのクリア: ブラウザのキャッシュを削除して確認（Ctrl+Shift+R）
• ビルド時のCSS処理エラー: ビルドログでCSSに関するWarningが出ていないか確認
• Tailwind CSSのパージ設定: 本番ビルドで使われていないクラスが削除されている可能性

---

継続的デプロイ（CI/CD）の仕組み

Cloudflare Pages、Vercel、NetlifyはいずれもGitHubと連携した**継続的デプロイ（CI/CD）**に対応している。一度設定すれば、以降のデプロイは完全自動だ。

CI/CDの基本的な流れ

コードを修正 → git add → git commit → git push
    ↓
GitHubがホスティングサービスに通知（Webhook）
    ↓
サーバーが自動でビルド（npm run build等）
    ↓
ビルド成功 → 新しいバージョンが自動公開
ビルド失敗 → 前のバージョンがそのまま公開され続ける

プレビューデプロイ

Cloudflare Pages、Vercel、Netlifyでは、mainブランチ以外にpushすると、プレビューURLが発行される。

main ブランチ → 本番サイト（example.com）
feature ブランチ → プレビュー（random-id.pages.dev）

これにより、本番サイトに影響を与えずに変更を確認できる。チーム開発では「プルリクエストを出すと自動でプレビューURLが生成される」という運用が一般的だ。

ロールバック（巻き戻し）

デプロイ後に問題が見つかった場合、前のバージョンに即座に戻せる。

• Cloudflare Pages: Deployments一覧から過去のデプロイを選び「Rollback」
• Vercel: Deployments一覧から過去のデプロイを選び「Promote to Production」
• Netlify: Deploys一覧から過去のデプロイを選び「Publish deploy」

どのサービスもワンクリックで巻き戻せる。コードを修正してpushし直す必要はない。

---

環境変数の設定

APIキーやシークレットなど、コードに直接書くべきではない値は環境変数として設定する。

各サービスでの設定場所

サービス	設定場所
Cloudflare Pages	Settings → Environment variables
Vercel	Settings → Environment Variables
Netlify	Site settings → Environment variables

設定例

# .env.example（リポジトリに含めるテンプレート）
PUBLIC_API_URL=https://api.example.com
SECRET_API_KEY=（サービス管理画面で設定）

---

よくある質問（FAQ）

Q1. デプロイは毎回手動でやるのですか？

いいえ、初回設定のみ手動で、以降は自動です。 GitHubにコードをpush（git push）するだけで、自動的にビルドとデプロイが実行されます。これが「継続的デプロイ」の仕組みです。修正のたびにCloudflareやVercelのダッシュボードを開く必要はありません。

Q2. 無料プランでどこまでできますか？

個人サイトや小〜中規模サイトなら十分です。 Cloudflare Pagesは帯域無制限なので、月間数十万PVでも無料で運用できます。Vercel・Netlifyも月100GBの帯域があり、月間数万PVなら問題ありません。ただし、商用利用の場合はVercelの規約に注意が必要です（無料プランは非商用のみ）。

Q3. サーバーが落ちたりしませんか？

ほぼ心配不要です。 Cloudflare、Vercel、Netlifyはいずれも世界中にCDN（コンテンツ配信ネットワーク）を持っており、99.9%以上の稼働率を誇ります。個人でレンタルサーバーを借りるよりもはるかに安定しています。

Q4. 途中でサービスを乗り換えられますか？

はい、比較的簡単です。 コードはGitHubにあるので、新しいサービスでGitHubリポジトリを連携し直すだけです。ただし、独自ドメインのDNS設定は変更が必要です。乗り換え時の手順は、旧サービスのカスタムドメインを削除 → 新サービスでカスタムドメインを追加 → DNS設定を更新、という流れになります。

Q5. デプロイしたサイトを削除するには？

各サービスのダッシュボードから削除できます。 Cloudflare Pagesなら「Settings → Delete project」、Vercelなら「Settings → Delete Project」で完全に削除されます。独自ドメインを設定している場合は、先にドメインの紐付けを解除してから削除しましょう。

Q6. ローカルでは動くのにデプロイすると動かないのはなぜ？

環境の違いが主な原因です。 ローカルのmacOSとサーバーのLinuxでは、ファイル名の大文字/小文字の扱いが違います。また、ローカルにだけインストールされているパッケージ、設定されている環境変数、Node.jsのバージョンの違いなどが原因になります。デプロイ前に npm run build をローカルで実行して、エラーがないか確認する習慣をつけましょう。

Q7. 複数のサイトを同時に公開できますか？

はい、何サイトでも公開できます。 Cloudflare Pagesはプロジェクト数に制限がなく、GitHubのリポジトリごとに別のプロジェクトとしてデプロイできます。10サイトでも20サイトでも、全て無料で運用可能です。

---

まとめ

コードを書く → GitHubにpush → 自動で公開

この流れを一度体験すれば、デプロイは怖くなくなる。ポイントをおさらいしよう。

ステップ	やること	所要時間
1	GitHubにコードをpush	5分
2	ホスティングサービスでGitHub連携	5分
3	ビルド設定を入力 → Deploy	3分
4	公開完了	自動

初回は15分ほどかかるが、2サイト目以降は5分で終わる。

迷ったらCloudflare Pagesを選んで、まず1つ公開してみよう。動いているサイトのURLを誰かに共有できる体験は、プログラミング学習の最大のモチベーションになるはずだ。