Reactアプリのデプロイ - Vercel/Netlifyで無料公開

はじめに

前回の記事では、Reactアプリケーションのパフォーマンス最適化について解説しました。本記事では、作成したReactアプリを実際にインターネット上に公開する方法を解説します。

Webアプリケーションを開発しても、ローカル環境で動作するだけでは他の人に見せることができません。VercelやNetlifyといったホスティングサービスを利用することで、無料でReactアプリを世界中に公開できます。

本記事を読むことで、以下のことができるようになります。

• Viteで本番用ビルドを作成する
• Vercelにデプロイし、自動デプロイを設定する
• Netlifyにデプロイし、継続的デプロイを構築する
• 環境変数を安全に設定する
• 独自ドメインを設定する
• デプロイ時のトラブルシューティングを行う

実行環境・前提条件

必要な環境

• Node.js 20.x以上
• Viteで作成したReactプロジェクト（TypeScript推奨）
• GitHubアカウント
• Vercelアカウント（無料プランで可）
• Netlifyアカウント（無料プランで可）

前提知識

• Reactの基本的な知識
• Gitの基本操作（commit、push）
• ターミナル/コマンドプロンプトの基本操作

VercelとNetlifyの比較

デプロイ先を選ぶ前に、VercelとNetlifyの特徴を比較しておきましょう。

Vercel

Netlify

どちらも優れたサービスですが、本記事では両方のデプロイ方法を解説します。

本番ビルドの作成

デプロイの前に、まず本番用のビルドファイルを作成する方法を理解しましょう。

ビルドコマンドの実行

Viteプロジェクトでは、以下のコマンドで本番ビルドを作成します。

1

npm run build

実行すると、distディレクトリに最適化されたファイルが生成されます。

dist/
├── index.html
├── assets/
│   ├── index-abc123.js    # バンドルされたJavaScript
│   ├── index-def456.css   # バンドルされたCSS
│   └── logo-ghi789.svg    # 静的アセット
└── vite.svg

ビルド結果のプレビュー

ビルド結果をローカルで確認するには、previewコマンドを使用します。

1

npm run preview

これにより、http://localhost:4173で本番ビルドをプレビューできます。

ビルド設定のカスタマイズ

vite.config.tsで本番ビルドの設定をカスタマイズできます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    // 出力ディレクトリ（デフォルト: dist）
    outDir: 'dist',
    // ソースマップの生成（デバッグ用）
    sourcemap: false,
    // チャンクサイズの警告閾値（KB）
    chunkSizeWarningLimit: 500,
    rollupOptions: {
      output: {
        // コード分割の設定
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
});

Vercelへのデプロイ

Vercelは、Reactアプリケーションをデプロイするための最も簡単なプラットフォームの一つです。

方法1: GitHubリポジトリ連携（推奨）

最も一般的な方法は、GitHubリポジトリをVercelに接続する方法です。

Step 1: GitHubにリポジトリを作成

まず、Reactプロジェクトをgit管理し、GitHubにpushします。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# gitの初期化（まだの場合）
git init

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

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

# GitHubリポジトリを追加
git remote add origin https://github.com/your-username/your-repo.git

# プッシュ
git push -u origin main

Step 2: Vercelアカウントの作成

1. Vercelにアクセス
2. 「Sign Up」をクリック
3. 「Continue with GitHub」を選択してGitHubアカウントで登録

Step 3: プロジェクトのインポート

1. Vercelダッシュボードで「Add New」→「Project」をクリック
2. 「Import Git Repository」からGitHubリポジトリを選択
3. プロジェクト設定を確認

Vercelは自動的にViteプロジェクトを検出し、以下の設定を推奨します。

4. 「Deploy」をクリック

デプロイが完了すると、https://your-project.vercel.appのようなURLが発行されます。

方法2: Vercel CLIを使用

コマンドラインからデプロイすることも可能です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# Vercel CLIのインストール
npm install -g vercel

# ログイン
vercel login

# デプロイ（プロジェクトディレクトリで実行）
vercel

# 本番デプロイ
vercel --prod

初回実行時は、いくつかの質問に答えます。

? Set up and deploy "~/my-react-app"? [Y/n] Y
? Which scope do you want to deploy to? your-username
? Link to existing project? [y/N] N
? What's your project's name? my-react-app
? In which directory is your code located? ./

SPAのルーティング対応

React Routerを使用している場合、リロード時に404エラーが発生することがあります。これを解決するには、プロジェクトルートにvercel.jsonを作成します。

1
2
3
4
5
6
7
8
9

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

この設定により、すべてのルートがindex.htmlにリダイレクトされ、React Routerが正しく動作します。

Netlifyへのデプロイ

Netlifyも同様に、簡単にReactアプリをデプロイできます。

方法1: GitHubリポジトリ連携（推奨）

Step 1: Netlifyアカウントの作成

1. Netlifyにアクセス
2. 「Sign up」をクリック
3. 「GitHub」を選択してGitHubアカウントで登録

Step 2: サイトのインポート

1. ダッシュボードで「Sites」→「Add new site」→「Import an existing project」を選択
2. 「Deploy with GitHub」をクリック
3. リポジトリを選択

Netlifyは自動的にビルド設定を検出します。

4. 「Deploy site」をクリック

デプロイ完了後、https://random-name-12345.netlify.appのようなURLが発行されます。

方法2: Netlify CLIを使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

# Netlify CLIのインストール
npm install -g netlify-cli

# ログイン
netlify login

# 新しいサイトを初期化
netlify init

# 手動デプロイ（ビルド後）
npm run build
netlify deploy --dir=dist

# 本番デプロイ
netlify deploy --prod --dir=dist

方法3: ドラッグ&ドロップデプロイ

最も簡単な方法として、ビルドしたdistフォルダをNetlifyのダッシュボードにドラッグ&ドロップするだけでデプロイできます。

1. npm run buildを実行
2. Netlify Dropにアクセス
3. distフォルダをドラッグ&ドロップ

SPAのルーティング対応

Netlifyでは、publicフォルダに_redirectsファイルを作成します。

1

/*    /index.html   200

または、プロジェクトルートにnetlify.tomlを作成します。

1
2
3
4

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

環境変数の設定

APIキーなどの機密情報は、環境変数として安全に管理する必要があります。

Viteでの環境変数の使用

Viteでは、.envファイルで環境変数を定義できます。

1
2
3

# .env.local（ローカル開発用、gitignoreに追加）
VITE_API_URL=http://localhost:3001
VITE_API_KEY=your_development_key

1
2
3

# .env.production（本番用、gitignoreに追加推奨）
VITE_API_URL=https://api.example.com
VITE_API_KEY=your_production_key

Reactコンポーネント内での使用方法は以下のとおりです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// 環境変数の使用
const apiUrl = import.meta.env.VITE_API_URL;
const apiKey = import.meta.env.VITE_API_KEY;

// 環境の判定
if (import.meta.env.DEV) {
  console.log('開発モードです');
}

if (import.meta.env.PROD) {
  console.log('本番モードです');
}

Viteでは、VITE_プレフィックスが付いた環境変数のみがクライアントサイドに公開されます。

Vercelでの環境変数設定

1. プロジェクトダッシュボードで「Settings」→「Environment Variables」を選択
2. 変数名と値を入力
3. 適用する環境（Production / Preview / Development）を選択
4. 「Save」をクリック

Key: VITE_API_KEY
Value: your_production_api_key
Environment: Production

Vercel CLIを使用する場合は、以下のコマンドで環境変数を設定できます。

1
2
3
4
5
6
7
8

# 環境変数の追加
vercel env add VITE_API_KEY

# 環境変数の確認
vercel env ls

# ローカルに環境変数をダウンロード
vercel env pull

Netlifyでの環境変数設定

1. サイトダッシュボードで「Site configuration」→「Environment variables」を選択
2. 「Add a variable」をクリック
3. 変数名と値を入力
4. 必要に応じてデプロイコンテキスト（Production / Deploy Previews等）を選択

または、netlify.tomlで設定することも可能です。

1
2
3
4
5
6
7

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"
  VITE_APP_ENV = "production"

機密情報はファイルではなく、ダッシュボードから設定することを推奨します。

独自ドメインの設定

無料のサブドメインではなく、独自ドメインを使用する方法を解説します。

Vercelでのドメイン設定

1. プロジェクトダッシュボードで「Settings」→「Domains」を選択
2. 「Add」をクリックし、ドメイン名を入力
3. DNSレコードの設定画面が表示される

Vercelが提供するネームサーバーを使用する場合、以下のNSレコードを設定します。

ns1.vercel-dns.com
ns2.vercel-dns.com

外部DNSを使用する場合は、以下のレコードを追加します。

Netlifyでのドメイン設定

1. サイトダッシュボードで「Domain management」を選択
2. 「Add a domain」をクリック
3. ドメイン名を入力

Netlify DNSを使用する場合は、提供されるネームサーバーに変更します。

外部DNSを使用する場合は、以下のレコードを追加します。

VercelとNetlifyの両方で、SSL証明書は自動的に発行・更新されます。

自動デプロイの仕組み

GitHubリポジトリを連携すると、以下の自動デプロイが設定されます。

Production Deploy

mainブランチ（または指定したブランチ）へのpushで本番環境にデプロイされます。

1
2
3
4

git checkout main
git merge feature/new-feature
git push origin main
# → 自動的に本番デプロイが開始

Preview Deploy

プルリクエストを作成すると、自動的にプレビュー環境が作成されます。

1
2
3
4
5

git checkout -b feature/new-feature
git add .
git commit -m "新機能を追加"
git push origin feature/new-feature
# → プルリクエスト作成時にプレビューURLが発行

プルリクエストのページにプレビューURLが表示されるため、レビュー時に実際の動作を確認できます。

デプロイ時のトラブルシューティング

よくあるエラーとその解決方法を紹介します。

ビルドエラー: Module not found

依存関係が正しくインストールされていない可能性があります。

1
2
3
4

# package-lock.jsonを削除して再インストール
rm -rf node_modules package-lock.json
npm install
npm run build

404エラー（SPA）

React Routerを使用している場合、リライトルールが必要です。前述のvercel.jsonまたはnetlify.tomlを確認してください。

環境変数が読み込まれない

• 変数名がVITE_で始まっているか確認
• デプロイ後に環境変数を変更した場合、再デプロイが必要
• ビルド時に環境変数が注入されるため、ダッシュボードで設定後に再ビルドする

ビルドサイズが大きい

vite.config.tsでコード分割を設定し、不要な依存関係を削除します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        },
      },
    },
  },
});

キャッシュの問題

古いビルドがキャッシュされている場合、以下を試します。

1
2
3
4

# Vercel: キャッシュなしで再デプロイ
vercel --force

# Netlify: ダッシュボードから「Clear cache and deploy site」を選択

本番環境のベストプラクティス

ビルド最適化チェックリスト

1. 不要なconsole.logの削除: 本番ビルドでは自動的に削除されるか確認
2. ソースマップの無効化: 本番環境ではソースマップを無効にしてセキュリティを向上
3. 画像の最適化: WebP形式の使用やサイズの最適化
4. 依存関係の整理: 使用していないパッケージの削除

セキュリティのベストプラクティス

1. 機密情報をコードにハードコードしない: すべてAPIキー等は環境変数で管理
2. HTTPSの使用: VercelとNetlifyは自動的にHTTPS化
3. Content Security Policyの設定: XSS攻撃への対策

パフォーマンス監視

デプロイ後は以下のツールでパフォーマンスを監視しましょう。

• Vercel Analytics: Vercelダッシュボードから確認可能
• Lighthouse: Chrome DevToolsから実行
• Web Vitals: Core Web Vitalsの測定

まとめ

本記事では、ReactアプリをVercelとNetlifyにデプロイする方法を解説しました。

学んだ内容をまとめます。

1. 本番ビルド: npm run buildで最適化されたファイルを生成
2. Vercelデプロイ: GitHub連携またはCLIで簡単にデプロイ
3. Netlifyデプロイ: ドラッグ&ドロップでも可能な手軽さ
4. 環境変数: 機密情報を安全に管理
5. 独自ドメイン: 無料SSL証明書付きで設定可能
6. 自動デプロイ: Git pushで自動的に本番/プレビュー環境を更新

これで、React学習ストーリーは完結です。ここまでの17記事を通じて、Reactの基礎から実践的なアプリケーション開発、テスト、パフォーマンス最適化、そしてデプロイまでを学びました。

次のステップとして、以下のことに挑戦してみてください。

• 実際にオリジナルのReactアプリを作成して公開する
• Next.jsやRemixなどのフルスタックフレームワークを学ぶ
• GraphQLやtRPCなど、より高度なデータ取得手法を学ぶ

参考リンク

• Vercel Documentation
• Vercel - Vite on Vercel
• Netlify Documentation
• Netlify - Vite on Netlify
• Vite - Deploying a Static Site
• Vite - Environment Variables and Modes