Viteで始める高速Web開発 | 第5章: ビルドとデプロイ

はじめに

第4章でViteの開発機能を活用しました。今回は、アプリを本番環境用にビルドし、Vercelにデプロイします。これでToDoリストを世界に公開できます。

目標

• Viteで本番用ビルドを作成する
• ビルド結果をプレビューする
• Vercelにデプロイする

本番用ビルドの作成

Viteでアプリをビルドするには、以下のコマンドを使用：

npm run build

• dist/フォルダに最適化されたファイル（HTML、JS、CSS）が生成。
• Rollupがコードをバンドルし、不要な部分を削除。

ビルド設定の調整

vite.config.jsで出力オプションをカスタマイズ可能：

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

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist', // 出力先（デフォルト）
    minify: 'esbuild', // 圧縮方式
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'], // ベンダーコードを分離
        },
      },
    },
  },
});

• manualChunksで大きなライブラリを別ファイルに分割。

ビルド結果のプレビュー

ローカルで本番環境をシミュレート：

npm run preview

http://localhost:4173で確認。ToDoリストが動作するかテストしてください。

Vercelへのデプロイ

VercelはViteとの相性が良く、簡単にデプロイできます。

1. Vercel CLIのインストール

npm install -g vercel

2. デプロイ手順

1. my-vite-reactフォルダでログイン：

   vercel login
   

2. 初回デプロイ：

   vercel
   

   • プロジェクト名や設定を聞かれます（デフォルトでOK）。
   • .vercelignoreで不要なファイルを除外（例: node_modules）。
3. 本番デプロイ：

   vercel --prod
   

完了後、URL（例: https://my-vite-react.vercel.app）が提供されます。

3. 環境変数の設定

Vercelで環境変数を追加：

1. Vercelダッシュボードにアクセス。
2. プロジェクト > Settings > Environment Variables。
3. 以下を追加：

   VITE_APP_TITLE=私のToDoアプリ
   

ローカルの.envと一致させ、再デプロイ：

vercel --prod

動作確認

デプロイしたURLにアクセスし、ToDoリストが正しく表示・動作するか確認。タイトルが「私のToDoアプリ」になっているかもチェック。

デプロイTips

• カスタムドメイン: Vercelで独自ドメインを設定可能。
• 自動デプロイ: GitHubと連携すると、プッシュごとに自動更新。
• プレビュー: vercelコマンドで本番前のプレビューURLを生成。

次回予告

第6章では、Viteをバックエンドと連携させ、APIからデータを取得する方法を学びます。お楽しみに！

---

この記事が役に立ったら、ぜひ「いいね」や「ストック」をお願いします！質問や感想はコメント欄で気軽にどうぞ。次回も一緒に学びましょう！