Viteは高速な開発サーバーと最適化されたビルドプロセスを提供するビルドツールです。Vue.jsプロジェクトをViteでビルドし、様々なプラットフォームにデプロイする方法を学びましょう。この章では、ビルド設定のカスタマイズからサーバーへのデプロイまで、本番環境に向けた準備を詳しく解説します。
Viteは、Vue.jsの作者であるEvan Youが開発した次世代フロントエンドビルドツールです。ES Modulesを活用した高速な開発サーバーと、Rollupを使用した最適化されたビルドプロセスが特徴です。従来のwebpackベースのビルドツールと比較して、開発時の起動速度やHMR（Hot Module Replacement）のパフォーマンスが大幅に向上しています。
Viteプロジェクトのビルドは非常にシンプルです。以下のコマンドでプロダクション用のビルドを実行できます：
# プロジェクトをビルド
npm run build
このコマンドは、プロジェクトルートのdistディレクトリに最適化されたファイルを生成します。ビルド後のファイル構造は次のようになります：
dist/
├── assets/
│ ├── index-a1b2c3d4.js # メインのJSバンドル（ハッシュ付き）
│ ├── vendor-e5f6g7h8.js # 外部ライブラリのJS
│ └── index-i9j0k1l2.css # CSSファイル（ハッシュ付き）
├── favicon.ico # ファビコン
└── index.html # エントリーポイントのHTMLビルド結果をローカルでプレビューするには：
# ビルド結果をプレビュー
npm run preview
Viteのビルド設定はvite.config.js（またはTypeScriptを使用している場合はvite.config.ts）ファイルでカスタマイズできます。
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
// ベースパスの設定（サブディレクトリにデプロイする場合に便利）
base: '/my-app/',
// ビルド設定のカスタマイズ
build: {
// 出力ディレクトリ
outDir: 'dist',
// アセットファイルのサイズ警告閾値（デフォルト: 500kB）
chunkSizeWarningLimit: 1000,
// CSS コード分割の有効/無効
cssCodeSplit: true,
// ソースマップ生成
sourcemap: false,
// Rollupオプション
rollupOptions: {
// 出力設定
output: {
// チャンク分割の設定
manualChunks: {
'vendor': ['vue', 'vue-router', 'pinia']
},
// アセットファイル名のカスタマイズ
assetFileNames: 'assets/[name]-[hash].[ext]'
}
},
// minify設定（'terser'または'esbuild'）
minify: 'terser',
// Terser オプション
terserOptions: {
compress: {
// コンソールログを削除
drop_console: true,
// デバッグ文を削除
drop_debugger: true
}
}
},
// 解決設定
resolve: {
// エイリアス
alias: {
'@': path.resolve(__dirname, 'src')
}
},
// 開発サーバー設定
server: {
port: 3000,
// プロキシ設定
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
Viteは環境変数を使用して開発環境と本番環境を区別できます。.envファイルを使用して環境変数を設定できます。
.env - すべての環境で読み込まれる.env.local - すべての環境で読み込まれる（gitignoreされる）.env.development - 開発環境のみ.env.production - 本番環境のみ# .env.production
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vue App
環境変数を使用するには、import.meta.envを使います：
// アプリケーションコード内で環境変数にアクセス
console.log(import.meta.env.VITE_API_URL) // https://api.example.com
console.log(import.meta.env.VITE_APP_TITLE) // My Vue App
注意：セキュリティ上の理由から、VITE_プレフィックスがない環境変数はクライアントサイドのコードから参照できません。
publicディレクトリに配置したファイルは、ビルド時にルートディレクトリにコピーされます。これはファビコンやrobots.txtなどのファイルに適しています。
public/
├── favicon.ico
├── robots.txt
└── static-image.pngこれらのファイルは以下のように参照できます：
<img src="/static-image.png" alt="静的画像" />
src/assetsディレクトリに配置したファイルは、インポート時に処理され、最適化されます。
// CSSファイルのインポート
import './assets/style.css'
// 画像のインポート
import logo from './assets/logo.png'<template>
<img :src="logo" alt="ロゴ" />
</template>Viteでビルドした静的ファイルは様々なホスティングサービスにデプロイできます。ここでは代表的なデプロイ方法をいくつか紹介します。
GitHub Pagesにデプロイする場合は、以下の手順に従います：
# vite.config.jsでベースパスを設定（リポジトリ名を使用）
# base: '/your-repository-name/'
# ビルド
npm run build
# GitHub Pagesにデプロイ用のスクリプト（package.jsonに追加）
# "deploy": "gh-pages -d dist"
# デプロイ
npm run deployまたは、GitHub Actionsを使用した自動デプロイも可能です：
# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
push:
branches: [ main ]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Deploy
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: dist
branch: gh-pagesNetlifyへのデプロイは非常に簡単です：
npm run builddistVercelへのデプロイも同様に簡単です：
ApacheやNginxなどの従来のWebサーバーにデプロイする場合は、ビルドしたdistディレクトリの内容をサーバーにアップロードします。
SPA（シングルページアプリケーション）の場合、すべてのリクエストをindex.htmlにリダイレクトする設定が必要です。
# .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule># nginx.conf
server {
listen 80;
server_name example.com;
root /path/to/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
# キャッシュ設定
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 1y;
add_header Cache-Control "public, max-age=31536000";
}
}Dockerを使用してアプリケーションをコンテナ化することもできます。
# Dockerfile
FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# 本番環境用のステージ
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]# Dockerイメージをビルド
docker build -t my-vue-app .
# コンテナを実行
docker run -p 8080:80 my-vue-appViteは自動的にルートベースのコード分割を行います。Vue Routerを使用している場合、各ルートは個別のチャンクになります。
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
component: () => import('../views/Home.vue') // 遅延ロード
},
{
path: '/about',
component: () => import('../views/About.vue') // 遅延ロード
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default routerViteは自動的にプリロードリンクを生成しますが、ユーザー操作の前にリソースをプリロードするような追加の最適化も可能です。
// マウスがボタン上にホバーしたときに、About ページをプリロード
function preloadAboutPage() {
const aboutComponent = import('../views/About.vue')
}
Viteは出力ファイル名にハッシュを含めることで、効率的なキャッシュ管理を実現しています。ビルド設定でこの動作をカスタマイズできます。
// vite.config.js
export default defineConfig({
build: {
rollupOptions: {
output: {
// チャンクファイル名のカスタマイズ
chunkFileNames: 'assets/js/[name]-[hash].js',
// エントリーファイル名のカスタマイズ
entryFileNames: 'assets/js/[name]-[hash].js',
// アセットファイル名のカスタマイズ
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
}
}
}
})Viteを使用して再利用可能なライブラリをビルドすることもできます。
// vite.config.js
export default defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, 'src/index.js'),
name: 'MyLib',
fileName: (format) => `my-lib.${format}.js`
},
rollupOptions: {
// 外部依存関係を指定
external: ['vue'],
output: {
// グローバル変数の名前を指定
globals: {
vue: 'Vue'
}
}
}
}
})Vite PWA プラグインを使用して、Service Worker とマニフェストファイルを生成できます。
# Vite PWA プラグインをインストール
npm install -D vite-plugin-pwa// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
vue(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
manifest: {
name: 'My Vue App',
short_name: 'MyApp',
description: 'My Awesome Vue App',
theme_color: '#ffffff',
icons: [
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png'
}
]
}
})
]
})古いブラウザをサポートする場合は、@vitejs/plugin-legacy を使用できます。
# レガシープラグインをインストール
npm install -D @vitejs/plugin-legacy// vite.config.js
import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
plugins: [
vue(),
legacy({
targets: ['> 1%', 'last 2 versions', 'not dead'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})
]
})自動化されたビルドとデプロイプロセスを構築することで、開発効率を向上させることができます。
# .github/workflows/ci.yml
name: CI/CD
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build-and-test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Lint
run: npm run lint
- name: Test
run: npm run test
- name: Build
run: npm run build
- name: Upload artifacts
uses: actions/upload-artifact@v3
with:
name: dist
path: dist
deploy:
needs: build-and-test
if: github.ref == 'refs/heads/main'
runs-on: ubuntu-latest
steps:
- name: Download artifacts
uses: actions/download-artifact@v3
with:
name: dist
path: dist
- name: Deploy to production
uses: some-deployment-action@v1
with:
folder: dist
token: ${{ secrets.DEPLOY_TOKEN }}大規模プロジェクトでは、より高度なビルド戦略が必要になります。
大規模アプリケーションでは、マイクロフロントエンドアーキテクチャを採用し、複数のViteアプリケーションを統合することができます。
Viteは現代的なフロントエンド開発において非常に効率的なビルドツールです。この章では、Viteを使用したビルドプロセス、最適化手法、およびデプロイ戦略について学びました。適切なビルド設定とデプロイ方法を選択することで、高速で安定したVue.jsアプリケーションを提供できます。