過去バージョン

環境別ビルドコマンド

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 bust

Laravel Vite（新プロジェクト・推奨）

# 開発時
npm run dev

# 本番ビルド
npm run build

# 出力: public/build/
#   ├── manifest.json
#   ├── assets/
#   │   ├── app-3a8f9b2c.js
#   │   └── app-7d4e5a1b.css

{{-- Blade テンプレート --}}



    @vite(['resources/css/app.css', 'resources/js/app.js'])


    

本番ビルドの最適化

本番ビルドコマンドは以下を自動で行います:

• Minification: 空白・コメント削除、変数名短縮
• Tree shaking: 未使用コードの除去
• Code splitting: ルートやコンポーネント単位で分割ロード
• CSS 最適化: 未使用 CSS 削除（Tailwind 等）
• 画像最適化: 設定があれば
• ファイル名にハッシュ付与: app.abc123.js で CDN キャッシュ問題回避
• Source map: デフォルトは無効、ビルドオプションで切替

本番デプロイの流れ

1. ローカルまたは CI でビルド: npm run build
2. 生成されたファイルを本番サーバに転送:
   • Mix: public/js/ public/css/
   • Vite: public/build/
   • Vue CLI: dist/
3. 静的ファイルはCDN（CloudFront / Cloudflare）経由配信が高速
4. 古いアセットはハッシュ付きファイル名なので残しておいても問題ない（ブラウザキャッシュされたままユーザに）

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 を更新