Vite manifest not found エラーの解決方法

Laravel 9+ と Vite を使用したプロジェクトで「Vite manifest not found」エラーが発生する場合の解決方法を解説します。このエラーは開発環境では問題なく動作するものの、本番環境（特に cPanel サーバー）で頻繁に発生します。

問題の概要

以下のエラーメッセージが表示される場合：

Vite manifest not found at: /home/???????/cart_shop/public/build/manifest.json

Missing Vite Manifest File
Did you forget to run `npm install && npm run dev`?

これは Vite がビルドプロセスで生成する manifest.json ファイルが正しい場所に見つからないことを示しています。

主な原因と解決策

1. 基本的なビルドプロセスの実行

最も基本的な解決方法は、Vite のビルドプロセスを正しく実行することです。

# 依存パッケージのインストール
npm install

# プロダクションビルドの実行
npm run build

TIP

開発環境では npm run dev を使用しますが、本番環境では npm run build を実行して静的アセットを生成する必要があります。

2. Node.js のバージョン確認

Vite は特定の Node.js バージョンを要求します。古いバージョンでは問題が発生することがあります。

# 推奨バージョンのインストール（例：Node.js 20）
nvm install 20
nvm use 20

WARNING

cPanel などの共有ホスティング環境では、デフォルトの Node.js バージョンが古い場合があります。必要に応じてバージョンマネージャーを使用してください。

3. ファイルパーミッションの確認

manifest.json ファイルが存在するのにエラーが発生する場合は、パーミッション問題の可能性があります。

# パーミッションの変更（Apache を使用している場合）
sudo chown www-data:www-data -R public/build/
sudo chmod g+w -R public/build/

4. cPanel 環境での特別な設定

cPanel 環境では、ファイル構造が標準の Laravel 構造と異なることが多いです。

標準的な Laravel 構造：

- home
    - public_html
        - cart_shop
           - app
           - bootstrap
           - public
           - resources
           - etc

cPanel での一般的な構造：

- home
    - public_html (公開ディレクトリ)
        - 公開ファイルとフォルダ
- cart_shop (アプリケーションルート)
    - app
    - bootstrap
    - resources
    - etc

この場合、以下のいずれかの方法で対応します。

方法 A: ビルドフォルダの複製

1. ローカルで npm run build を実行
2. 生成された build フォルダをアプリケーションルートの public/build に配置
3. 同じ build フォルダを public_html/build にも複製

方法 B: パブリックパスの設定変更

AppServiceProvider.php でビルドディレクトリを変更：

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Vite;

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        Vite::useBuildDirectory('.'); // カレントディレクトリをビルドディレクトリに
    }
}

方法 C: パブリックパスの明示的設定

public/index.php でパブリックパスを設定：

<?php

use Illuminate\Http\Request;

define('LARAVEL_START', microtime(true));

// メンテナンスモードの確認...
if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
    require $maintenance;
}

// Composer オートローダーの読み込み...
require __DIR__.'/../vendor/autoload.php';

// Laravel の起動とリクエスト処理...
$app = require_once __DIR__.'/../bootstrap/app.php';

$app->usePublicPath(__DIR__); // パブリックパスを明示的に設定

$app->handleRequest(Request::capture());

5. Vite 設定ファイルの調整

vite.config.js でカスタムパスを設定する場合：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            // 必要に応じて公開ディレクトリを設定
            // publicDirectory: 'public_html'
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    // ビルド出力先のカスタマイズ
    build: {
        outDir: 'public_html/build',
        manifest: true,
    },
});

トラブルシューティングのチェックリスト

1. ビルドの実行: npm run build が成功しているか確認
2. Node.js バージョン: サポートされているバージョンを使用（Node.js 16+ 推奨）
3. ファイルの存在確認: manifest.json が正しい場所に生成されているか確認
4. パーミッション: ウェブサーバーがビルドファイルにアクセスできるか確認
5. gitignore 設定: public/build が .gitignore に含まれていないか確認
6. キャッシュクリア: 変更後は設定キャッシュをクリア

   php artisan config:clear
   php artisan cache:clear

まとめ

「Vite manifest not found」エラーは、主に以下の原因で発生します：

• ビルドプロセスの未実行または失敗
• Node.js のバージョン不一致
• ファイルパス設定の不備（特に cPanel 環境）
• パーミッション問題

環境に応じて適切な解決方法を選択し、本番環境デプロイ前に必ずテストを行うことをお勧めします。

INFO

本番環境でのデプロイ時は、必ず npm run build を実行してプロダクション用のアセットを生成してください。開発用の npm run dev コマンドはホットリロード機能付きの開発サーバーを起動します。