◀ 54.

Vue.js を本番環境にリリース｜Mix / Vite ビルド・デプロイ手順

▶
編集
この記事の要点
  • Vue.js プロジェクトを本番リリース用にビルドするコマンド
  • Laravel Mix: npm run prod （minify + 最適化）
  • Vite (Laravel 9.19+): npm run build
  • Vue CLI: npm run build → dist/ に出力
  • 生成された static ファイル (public/build/ or dist/) を本番に配置
  • ハッシュ付きファイル名でキャッシュバスティングが自動

環境別ビルドコマンド

ツール開発本番ビルド出力先
Laravel Mix (旧)npm run dev / watchnpm run prod / productionpublic/
Laravel Vite (推奨)npm run devnpm run buildpublic/build/
Vue CLInpm run servenpm run builddist/
Vite (standalone)npm run devnpm run builddist/
Nuxt 3npm run devnpm 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 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 を更新
編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. インストールと設定
  2. クイックスタート & チュートリアル(初心者向け)
  3. クイックスタート & チュートリアル(中級者向け)
  4. ルーティング
  5. Bladeテンプレート(ビュー/レイアウト)
  6. コントローラー
  7. マイグレーションとテーブル定義
  8. データベースの設定
  9. Eloquentモデル (ORM)
  10. SQLとクエリビルダー
  11. バリデーション
  12. .envファイルの設定値へのアクセス
  13. 動作環境による分岐処理
  14. configフォルダ配下の設定値へのアクセス
  15. assetヘルパーを利用したpublicフォルダへのアクセス
  16. storageフォルダへのアクセス
  17. アプリケーション名の変更
  18. メンテナンス
  19. ログイン画面(認証システム)の作成
  20. ログインの必須化
  21. ログインユーザー情報の取得
  22. ルートの認証化
  23. 本番サーバーへのデプロイ方法
  24. 多言語化
  25. csrf_field
  26. ファイルのダウンロード
  27. CSVのアップロードおよび読み込み(maatwebsite/excel)
  28. ページタイトルの設定
  29. コマンド一覧
  30. エラー一覧
  31. SQLの実行ログ出力方法
  32. キャッシュのクリア
  33. Selectの結果の最初もしくは最後に任意の値を追加する方法
  34. ajaxでPOST通信する際の注意点
  35. ソーシャルログインの実装
  36. セッション情報の確認
  37. ログイン、ユーザー登録、パスワードリセット後のリダイレクト先の変更方法
  38. redirectやreturn viewにメッセージを付与する方法
  39. クッキー(cookie)の設定と取得
  40. クラスの再読み込み
  41. csrfの有効時間を変更する方法
  42. ViewComposerを用いてviewに共通の値を付与する方法
  43. View::shareを用いて共通の値を各ビューに渡す方法
  44. ミドルウェアを用いた処理の共通化
  45. Middleware内でAuth::check()などを使用する方法
  46. Controller以外でリダイレクトする方法
  47. セッションの値の取得/保存/更新/削除
  48. $requestの値を変更する方法
  49. 常時SSL化
  50. ページング(ページネーション)をする方法
  51. vue.jsとの連携
  52. Vue.jsと連携するSPA実行環境構築
  53. .envの値をvue.jsで参照する方法
  54. vue.jsを本番環境にリリースする方法
  55. could not find driver（Windows, MySQL編）
2026-05-15 09:31:14 guest 2212

人気ページ

最近更新/作成されたページ