ReactアプリをVercelにホスティングする方法

はじめに

Reactで開発したウェブアプリケーションを公開する際、どのホスティングサービスを選ぶかは重要な決断です。その中でも、Vercelは特にReactをはじめとするJavaScriptフレームワーク向けに最適化された、デベロッパーフレンドリーなホスティングプラットフォームとして注目されています。

Vercelの最大の特徴は、GitHubやGitLabなどのリポジトリと連携した際の簡単なデプロイフローと、高速なグローバルCDNによる配信、そして無料プランでも十分な機能を提供していることです。この記事では、ReactアプリをVercelにホスティングする手順を解説します。

前提条件

  • Node.jsとnpmがインストールされていること
  • GitHubアカウント（GitLab、BitBucketも可）
  • ReactアプリケーションのGitリポジトリ

ステップ1：Reactアプリの準備

まず、デプロイするReactアプリを準備します。既存のアプリがある場合は、そのままでOKです。新しくアプリを作成する場合は、以下のコマンドを実行します。

# Create React App を使用してアプリを作成
npx create-react-app my-react-app
cd my-react-app

# アプリを起動して動作確認
npm start

アプリケーションが正常に動作することを確認したら、GitHubにプッシュします。

# Gitリポジトリの初期化（初めての場合）
git init
git add .
git commit -m "Initial commit"

# GitHubリポジトリにプッシュ
git remote add origin https://github.com/yourusername/my-react-app.git
git push -u origin main

ステップ2：Vercelアカウントの作成

Vercelを利用するには、アカウントが必要です。以下の手順でアカウントを作成します。

  1. Vercel公式サイトにアクセス
  2. 「Sign Up」をクリック
  3. GitHubなどのアカウントでログインするか、メールアドレスで登録
  4. 必要な情報を入力して登録を完了

ステップ3：Vercelにデプロイ

Vercelアカウントを作成したら、Reactアプリをデプロイします。

GitHubとの連携によるデプロイ

  1. Vercelダッシュボードにログイン
  2. 「New Project」ボタンをクリック
  3. 「Import Git Repository」セクションでGitHubアカウントと連携
  4. デプロイしたいReactアプリのリポジトリを選択
  5. プロジェクト設定画面が表示されるので、必要に応じて設定を行う
    • Frameworkは「Create React App」を選択（自動検出されることが多い）
    • 環境変数が必要な場合は、この画面で設定
  6. 「Deploy」ボタンをクリック

数分後、デプロイが完了すると、以下のような情報が表示されます：

  • プロジェクトURL（例：https://my-react-app.vercel.app）
  • デプロイステータス
  • ビルドログ

CLIからのデプロイ（オプション）

Vercel CLIを使用してデプロイすることも可能です。

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

# プロジェクトディレクトリに移動
cd my-react-app

# デプロイ
vercel

# プロンプトに従って設定を行う
# - ログインが必要な場合はログイン
# - プロジェクト設定を行う

ステップ4：カスタムドメインの設定（オプション）

デプロイしたアプリに独自ドメインを設定したい場合は、以下の手順で行います。

  1. Vercelダッシュボードでプロジェクトを選択
  2. 「Settings」タブをクリック
  3. 左側のメニューから「Domains」を選択
  4. 「Add」ボタンをクリック
  5. 使用したいドメインを入力して「Add」をクリック
  6. 表示される指示に従ってDNS設定を行う
    • ネームサーバーの変更
    • または、CNAMEやAレコードの追加

DNSの設定が反映されると（通常数分から数時間）、カスタムドメインでアプリにアクセスできるようになります。

ステップ5：環境変数の設定

APIキーやその他の機密情報は、環境変数として設定することをお勧めします。

  1. Vercelダッシュボードでプロジェクトを選択
  2. 「Settings」タブをクリック
  3. 左側のメニューから「Environment Variables」を選択
  4. 「Add New」ボタンをクリック
  5. 変数名と値を入力
  6. 適用環境（Production、Preview、Development）を選択して「Save」をクリック

環境変数を設定したら、再デプロイが必要です。「Deployments」タブから最新のデプロイを選択し、「Redeploy」をクリックします。

Reactアプリ内では、process.env.REACT_APP_変数名の形式で環境変数にアクセスできます。

// APIキーを環境変数から取得する例
const apiKey = process.env.REACT_APP_API_KEY;

ステップ6：継続的デプロイの設定

Vercelの大きな利点の一つは、GitHubなどのリポジトリと連携した継続的デプロイの仕組みです。デフォルトでは、mainブランチへのプッシュごとに自動デプロイが行われます。

プレビューデプロイ

ブランチやプルリクエストごとにプレビュー環境が自動的に作成されるのもVercelの便利な機能です。これにより、本番環境に影響を与えることなく、変更内容を確認できます。

  1. 新しいブランチを作成して変更を加える
git checkout -b feature/new-design
# 変更を加える
git add .
git commit -m "Update design"
git push origin feature/new-design
  1. GitHubでプルリクエストを作成
  2. Vercelが自動的にプレビュー環境をデプロイ
  3. プルリクエストのコメントにプレビューURLが表示される

デプロイ設定のカスタマイズ

デプロイの設定をカスタマイズする場合は、プロジェクトのルートディレクトリにvercel.jsonファイルを作成します。

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build"
      }
    }
  ],
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}

この設定ファイルでは、ビルド設定やルーティングルールをカスタマイズできます。上記の例では、すべてのリクエストをindex.htmlにルーティングして、React RouterなどのSPAルーティングをサポートしています。

ステップ7：分析とモニタリング

Vercelは、アプリのパフォーマンスを監視するための分析ツールも提供しています。

  1. Vercelダッシュボードでプロジェクトを選択
  2. 「Analytics」タブをクリック
  3. Web Vitalsなどのパフォーマンス指標を確認

これにより、アプリの読み込み時間やユーザーエクスペリエンスに関する貴重なデータが得られます。

Vercelの高度な機能

サーバーレス関数（Serverless Functions）

Vercelでは、APIエンドポイントやバックエンド処理を実装するためのサーバーレス関数を作成できます。

プロジェクトルートにapiディレクトリを作成し、その中にJavaScriptファイルを配置するだけです。

// api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Vercel Serverless Function!' });
}

この関数は、https://your-project.vercel.app/api/helloでアクセスできます。

Edge Functions

より高速な応答が必要な処理には、Edge Functionsを使用できます。これらの関数は、ユーザーに最も近いエッジロケーションで実行されます。

// api/edge.js
export const config = {
  runtime: 'edge',
};

export default async function handler(req) {
  return new Response(
    JSON.stringify({ message: 'Hello from the edge!' }),
    {
      status: 200,
      headers: {
        'Content-Type': 'application/json',
      },
    }
  );
}

ISR（Incremental Static Regeneration）

Next.jsを使用している場合は、ISRを活用して静的ページを定期的に再生成できます。これにより、静的生成のパフォーマンスと動的コンテンツの両方のメリットを享受できます。

パフォーマンス最適化のヒント

Vercelでホスティングする際のパフォーマンス最適化のヒントをいくつか紹介します。

  1. ビルドサイズの最適化
    • 未使用のコードを削除
    • コード分割（Code Splitting）を活用
    • 画像の最適化
  2. キャッシュ戦略
    • 静的アセットに適切なキャッシュヘッダーを設定
    • vercel.jsonでカスタムヘッダーを定義
  3. プリレンダリング
    • SEOが重要な場合は、Next.jsなどのSSRまたはSSGフレームワークの採用を検討

よくあるトラブルシューティング

ビルドエラー

ビルド時にエラーが発生する場合は、ローカル環境でnpm run buildを実行して同じエラーが再現するか確認しましょう。また、Vercelのビルドログを詳細に確認することも重要です。

ルーティングの問題

React Routerなどのクライアントサイドルーティングライブラリを使用している場合は、vercel.jsonファイルで適切なルーティング設定を行う必要があります。

環境変数の問題

環境変数は、REACT_APP_プレフィックスで始める必要があります。また、環境変数を変更した後は再デプロイが必要です。

まとめ

Vercelは、Reactアプリケーションをホスティングするための優れたプラットフォームです。GitHubとの連携による簡単なデプロイフロー、自動プレビュー環境、グローバルCDNによる高速配信など、多くの魅力的な機能を提供しています。

この記事で紹介した手順に従えば、数分でReactアプリをVercelにデプロイし、世界中のユーザーに提供することができます。また、無料プランでも個人プロジェクトや小規模なアプリケーションであれば十分な機能を利用できるため、コストを気にすることなく始められるのも大きな利点です。

Vercelの特徴を活かして、あなたのReactアプリケーションを効率的にデプロイし、ユーザーに最高のエクスペリエンスを提供しましょう！

コメント

タイトルとURLをコピーしました