0Pricing
Frontend Academy · レッスン

Vercel・Netlify・Cloudflare Pagesへのデプロイ

各プラットフォームにリポジトリを接続し、ビルドコマンドと出力ディレクトリを設定して、ブランチ向けのプレビューデプロイの仕組みを理解します。

「Vercel・Netlify・Cloudflare Pagesへのデプロイ」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

現代のフロントエンドホスティング3強

Vercel、Netlify、Cloudflare Pagesは、フロントエンドアプリのデプロイにおける主要なプラットフォームです。いずれも、Gitベースのデプロイ、プレビューブランチ、カスタムドメイン、エッジCDN、サーバーレス関数を提供しています。1つを選んで使い続けるのがおすすめです。

Vercel — Next.js向けに設計

Next.jsチームによって開発されました。クラス最高レベルのNext.js統合機能として、設定不要のImage Optimization、ISR、Edge Functions、Speed Insightsを利用できます。Vite、Nuxt、Astroをはじめ、ほとんどの静的フレームワークにも対応しています。

Vercelへのデプロイ

GitHub、GitLab、またはBitbucketのリポジトリを接続します。Vercelがフレームワークを自動検出し、buildを実行してデプロイします。

# Manual deploy (any project):
npm install -g vercel
vercel login
vercel       # preview deploy
vercel --prod  # production deploy

# Or push to main — auto-deploys via Git integration.

vercel.jsonの設定

デフォルト設定（ビルドコマンド、リダイレクト、ヘッダー、リライト）を上書きします。

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "headers": [{
    "source": "/(.*)",
    "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
  }],
  "redirects": [{ "source": "/old", "destination": "/new", "permanent": true }]
}

Netlify — 元祖

現代的な静的サイトのデプロイを先駆けたサービスです。フォーム処理、Identity、アナリティクスに強みがあります。サーバーレス向けにNetlify FunctionsとEdge Functionsを利用できます。Vite、Hugo、Eleventyとの相性も優れています。

Netlifyへのデプロイ

リポジトリを接続するか、ビルド済みのフォルダーをドラッグアンドドロップします。ダッシュボードまたはnetlify.tomlで設定します。

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200   # SPA fallback

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"

Netlify CLI

サーバーレス関数を含むローカル開発に使用します。

npm install -g netlify-cli
netlify login
netlify init
netlify dev       # local server with functions
netlify deploy    # preview
netlify deploy --prod

Cloudflare Pages

Cloudflareのグローバルエッジネットワークにデプロイします。Pages Functionsでは、Workersランタイム上でサーバーレス処理を実行できます。無料枠も充実しています。Astro、Hono、Remixに特に適しています。

Cloudflare Pagesへのデプロイ

Cloudflareダッシュボードからリポジトリを接続します。またはwrangler CLIを使用します。

# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site

# Or push to GitHub — auto-deploys.

Pages用wrangler.toml

Cloudflare Pagesでは、WorkersとFunctionsの設定にwrangler.tomlを使用します。

# wrangler.toml
name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

[vars]
API_URL = "https://api.example.com"

[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "..."

プレビューデプロイ

3つのプラットフォームはいずれも、PRの各ブランチに固有のURLを作成します。レビュアーはそのURLを開いて、変更を分離された環境で確認できます。現在では、標準的なチーム開発の流れになっています。

環境変数

3つのプラットフォームはいずれも、ダッシュボードまたはCLIから環境ごとの変数（production、preview、development）を設定できます。ブラウザーに公開するフロントエンド変数には、接頭辞（ViteではVITE_、NextではNEXT_PUBLIC_）が必要です。

# Vercel:
vercel env add API_URL production

# Netlify:
netlify env:set API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

カスタムドメインとSSL

3つのプラットフォームはいずれも、SSL証明書（Let's Encrypt）を自動的に処理します。DNSのAレコードまたはCNAMEレコードを指定された宛先に向けると、証明書の発行と更新が行われます。カスタムドメインは、すべての有料プランで無料です。

3つから選ぶ基準

Vercel：Next.jsに最適で、開発体験が洗練されていますが、やや高価です。Netlify：フォームとIdentityに最適で、プラグインエコシステムが成熟しています。Cloudflare Pages：エッジ性能に優れ、規模が大きくなったときのコストが最も低く、Workersとの統合も優れています。どれも非常に優れた選択肢です。

クイックチェック

Vercel、Netlify、Cloudflare Pagesで、プルリクエスト用のデプロイ可能なプレビューURLを作成する標準的な方法は何ですか？

まとめ：フロントエンドホスティング

Vercel：Next.jsとの統合が最適です。Netlify：フォーム、Identity、プラグインに強みがあります。Cloudflare Pages：エッジ性能に優れ、コストが最も低くなります。3つすべてが、Gitベースの自動デプロイ、PRごとのプレビューURL、環境ごとの環境変数、自動SSL、カスタムドメインに対応しています。ダッシュボードまたは各プラットフォームの設定ファイル（vercel.json、netlify.toml、wrangler.toml）で設定します。

よくある質問

「Vercel・Netlify・Cloudflare Pagesへのデプロイ」レッスンは無料ですか？

はい。「Vercel・Netlify・Cloudflare Pagesへのデプロイ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Vercel・Netlify・Cloudflare Pagesへのデプロイ」で何を学びますか？

各プラットフォームにリポジトリを接続し、ビルドコマンドと出力ディレクトリを設定して、ブランチ向けのプレビューデプロイの仕組みを理解します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「Vercel・Netlify・Cloudflare Pagesへのデプロイ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. フロントエンド向けGitHub Actions：lint・test・build
  2. Vercel・Netlify・Cloudflare Pagesへのデプロイ
  3. CIでの環境変数
  4. Lighthouseの自動チェック
← Frontend Academyに戻る