タイトル: vue.jsを本番環境にリリースする方法
SEOタイトル: Vue.js を本番環境にリリース｜Mix / Vite ビルド・デプロイ手順
| この記事の要点 |
|
環境別ビルドコマンド
| ツール | 開発 | 本番ビルド | 出力先 |
|---|---|---|---|
| Laravel Mix (旧) | npm run dev / watch | npm run prod / production | public/ |
| Laravel Vite (推奨) | npm run dev | npm run build | public/build/ |
| Vue CLI | npm run serve | npm run build | dist/ |
| Vite (standalone) | npm run dev | npm run build | dist/ |
| Nuxt 3 | npm run dev | npm run build | .output/ |
Laravel Mix（旧プロジェクト）
# 開発時（HMR、ファイル監視）
npm run dev
npm run watch # 自動再ビルド
# 本番ビルド
npm run prod
# = npm run production
# = mix --production
# webpack.mix.js
# mix.js('resources/js/app.js', 'public/js')
# .vue()
# .sass('resources/sass/app.scss', 'public/css')
# .version(); // ← ハッシュ付きで cache bustLaravel Vite（新プロジェクト・推奨）
# 開発時
npm run dev
# 本番ビルド
npm run build
# 出力: public/build/
# ├── manifest.json
# ├── assets/
# │ ├── app-3a8f9b2c.js
# │ └── app-7d4e5a1b.css{{-- Blade テンプレート --}}
<!DOCTYPE html>
<html>
<head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>本番ビルドの最適化
本番ビルドコマンドは以下を自動で行います:
- Minification: 空白・コメント削除、変数名短縮
- Tree shaking: 未使用コードの除去
- Code splitting: ルートやコンポーネント単位で分割ロード
- CSS 最適化: 未使用 CSS 削除（Tailwind 等）
- 画像最適化: 設定があれば
- ファイル名にハッシュ付与:
app.abc123.jsで CDN キャッシュ問題回避 - Source map: デフォルトは無効、ビルドオプションで切替
本番デプロイの流れ
- ローカルまたは CI でビルド:
npm run build - 生成されたファイルを本番サーバに転送:
- Mix:
public/js/public/css/ - Vite:
public/build/ - Vue CLI:
dist/
- Mix:
- 静的ファイルはCDN（CloudFront / Cloudflare）経由配信が高速
- 古いアセットはハッシュ付きファイル名なので残しておいても問題ない（ブラウザキャッシュされたままユーザに）
CI/CD でビルド（GitHub Actions 例）
name: Build & Deploy
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install
run: npm ci
- name: Build
run: npm run build
- name: Deploy to S3
run: aws s3 sync public/build s3://my-bucket/build --delete
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}環境別ビルド
# Vite ではモード指定可
npm run build -- --mode production
npm run build -- --mode staging
npm run build -- --mode development
# .env.production / .env.staging が読み込まれる
# キー名は VITE_ プレフィックスビルドサイズの分析
# Vite: rollup-plugin-visualizer 等で可視化
npm install --save-dev rollup-plugin-visualizer
# vite.config.js に追加
# import { visualizer } from 'rollup-plugin-visualizer';
# plugins: [vue(), visualizer({ open: true })]
# Mix: webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
# webpack.mix.js に追加
# const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
# mix.webpackConfig({ plugins: [new BundleAnalyzerPlugin()] });
# Vue CLI 標準
npm run build -- --report
# → dist/report.html が生成されるSPA を別ホスティング
Laravel 等のバックエンドとは別に SPA だけを CDN にデプロイする構成:
- Vercel / Netlify: Vue / Nuxt をワンクリックデプロイ
- AWS S3 + CloudFront: 高い柔軟性
- GitHub Pages: 個人プロジェクト向け
- Cloudflare Pages: 高速 CDN + 自動ビルド
よくあるハマりどころ
- 本番ビルド後にエラー: minify で予約語がぶつかる場合あり → ターゲット ES バージョンを変更
- 画像 / CSS パスがズレる:
vite.config.jsのbase設定 / 公開パスを確認 - Vuex / Pinia の初期データが消える: SSR でないのにサーバ状態に依存している
- 404 リロード: SPA で history mode なら Web サーバで catch-all ルートが必要
- 環境変数が undefined:
VITE_プレフィックスが付いているか、ビルド前に .env を更新