🐛

Laravel「Vite manifest not found」エラーの原因と解決方法

に公開
Laravel
Vite
tech

背景

Laravel環境構築中に遭遇したエラーと解決方法の記録です。

Laravelは不慣れなため、1つ1つのコマンド実行でつまづきながら進めています。同じエラーに遭遇する方の参考になれば幸いです。

エラー内容

アプリケーションを起動してブラウザでアクセスすると、以下のエラーが表示されました。

Illuminate\Foundation\ViteManifestNotFoundException
Vite manifest not found at: /var/www/html/public/build/manifest.json

エラーの原因

このエラーは、Viteでビルドしたアセット(CSS/JavaScript)のマニフェストファイルが見つからないことを示しています。

Viteとは?

  • モダンなフロントエンド開発ツール
  • 開発時に高速なホットリロード(HMR)を提供
  • React/Vueなどでよく使われるが、Laravelでも標準採用されている

Laravelにおけるマニフェストファイル

LaravelはViteと連携して、以下のフローでアセットを管理します:

  1. 開発時: Vite開発サーバーがリアルタイムでアセットを提供
  2. 本番時: npm run buildでビルドしたファイルをpublic/build/に配置
  3. マニフェストファイル: ビルド後のファイル名(ハッシュ付き)とエントリーポイントの対応表をpublic/build/manifest.jsonとして生成

なぜエラーが発生するのか?

Laravelはpublic/build/manifest.jsonを探しにいきますが、ビルドを実行していないとこのファイルが存在しないため、ViteManifestNotFoundExceptionが発生します。

解決方法

本番環境向け: アセットをビルドする

以下のコマンドでViteビルドを実行します:

npm run build

このコマンドにより:

  • resources/jsやresources/cssのアセットがビルドされる
  • ビルド結果がpublic/build/ディレクトリに出力される
  • public/build/manifest.jsonが生成される

ビルド後、再度ブラウザでアクセスすればエラーが解消されます。

開発環境向け: Vite開発サーバーを起動する

開発中は、ビルドではなくVite開発サーバーを使用する方が効率的です:

npm run dev

このコマンドにより:

  • Vite開発サーバーが起動(通常はhttp://localhost:5173)
  • ファイル変更時に自動でブラウザがリロードされる(HMR)
  • ビルド不要でリアルタイムに開発できる

エラー詳細の理解

ViteManifestNotFoundExceptionの仕組み

  1. Laravelの@viteディレクティブがBladeテンプレートで使用される
  2. Laravelはpublic/build/manifest.jsonを読み込もうとする
  3. ファイルが存在しない場合、ViteManifestNotFoundExceptionを投げる
  4. アセット読み込みが中断され、エラー画面が表示される

manifest.jsonの役割

manifest.jsonには、以下のような情報が含まれます:

{
  "resources/js/app.js": {
    "file": "assets/app-abc123.js",
    "src": "resources/js/app.js",
    "isEntry": true
  },
  "resources/css/app.css": {
    "file": "assets/app-def456.css",
    "src": "resources/css/app.css"
  }
}

これにより、Laravelはキャッシュバスティング(ハッシュ付きファイル名)を適切に処理できます。

まとめ

ごちゃごちゃと調べたことを書いてしまったので、ざっとしたまとめです。

エラーの要約

  • エラー: Vite manifest not found
  • 原因: Viteビルドを実行していない
  • 解決: npm run buildを実行

開発フロー

環境 コマンド 用途
開発環境 npm run dev Vite開発サーバーでリアルタイム開発
本番環境 npm run build 最適化されたアセットをビルド

推奨ワークフロー

  1. 開発開始: npm run devを実行
  2. 開発中: ファイルを編集すると自動でブラウザに反映
  3. デプロイ前: npm run buildでビルド
  4. 本番環境: ビルド済みアセットを使用

Laravel + Viteの組み合わせに慣れるまでには時間がかかりそう。。。

GitHubで編集を提案

Discussion