0Pricing
React Academy · レッスン

Vercelへのデプロイ：Zero-ConfigとPreview URLs

GitHub repoをVercelに接続し、environment variablesを設定してpreview deploymentsを利用します。

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

Vercelを使う理由

VercelはNext.jsチームが開発したプラットフォームです。設定不要のデプロイに対応しており、GitHubリポジトリを接続すると、Vercelがフレームワークを自動検出して、プッシュごとにビルドとデプロイを行います。

リポジトリの接続

VercelダッシュボードからGitHub、GitLab、またはBitbucketのリポジトリをインポートします。Vercelはフレームワーク（Next.js、Vite、CRA）を検出し、ビルド設定を自動的に構成します。

プロジェクト設定

Vercelはフレームワーク、ビルドコマンド（npm run build）、出力ディレクトリ（.next、dist）、インストールコマンド（npm install）を自動検出します。必要に応じて、プロジェクト設定でこれらを上書きできます。

環境変数

Vercelダッシュボードの「Project Settings」→「Environment Variables」で環境変数を追加します。本番、プレビュー、開発の環境ごとに異なる値を設定できます。

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

プレビューデプロイ

gitブランチへのプッシュやプルリクエストごとに、一意のプレビューURL（例：myapp-git-feature-xyz.vercel.app）が作成されます。マージ前のレビュー用に共有できるため、手動でステージング環境を用意する必要はありません。

カスタムドメイン

Vercelダッシュボードでカスタムドメインを追加します。DNS（AレコードまたはCNAME）をVercelのIPアドレスに向けると、VercelがSSL証明書の発行を自動的に処理します。

vercel.jsonの設定

リダイレクト、ヘッダー、リライト、リージョンの選択など、デプロイの動作を細かく調整します。

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

Vercel CLI

Vercel CLIを使うと、ターミナルからのデプロイ、ローカルへの環境変数の取得、プロジェクトの管理を行えます。

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

サーバーレス関数

api/（Pages Router）またはapp/api/*/route.ts（App Router）内のファイルは、VercelのエッジランタイムまたはNode.jsランタイム上のサーバーレス関数として自動的にデプロイされます。

デプロイフック

デプロイをトリガーするデプロイフック（Webhook URL）を外部サービスから作成します。サイトを再デプロイする必要があるCMSのコンテンツ変更などに便利です。

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

モノレポのデプロイ

NxまたはTurborepoのモノレポでは、Vercelのルートディレクトリを特定のアプリフォルダーに設定し、モノレポのタスクランナーを使うようにビルドコマンドを構成します。

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

小テスト

Vercelのプレビューデプロイとは何ですか？

まとめ

GitリポジトリをVercelに接続して、設定不要のデプロイを行います。すべてのブランチにプレビューURLが作成されます。ダッシュボードで環境ごとに環境変数を管理し、リダイレクトやヘッダーにはvercel.jsonを、ターミナルからのデプロイや環境変数の取得にはVercel CLIを使います。

よくある質問

「Vercelへのデプロイ：Zero-ConfigとPreview URLs」レッスンは無料ですか？

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

「Vercelへのデプロイ：Zero-ConfigとPreview URLs」で何を学びますか？

GitHub repoをVercelに接続し、environment variablesを設定してpreview deploymentsを利用します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Vercelへのデプロイ：Zero-ConfigとPreview URLs」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Vercelへのデプロイ：Zero-ConfigとPreview URLs
  2. AWS S3とCloudFrontでReact SPAをホスティング
  3. React/Next.js AppのDocker化
  4. React向けGitHub Actions CI/CD
← React Academyに戻る