🤖

Laravel × Vue3 × Vite のデプロイ（備忘録）

2023/04/09に公開2件

Laravel

最近Laravel × Vue3 × Viteのデプロイでハマった話。
ググっても明確な結論がでてこなかったので雑な備忘録。

環境

フロント：Vue3
バックエンド：Laravel
ビルド：Vite

フォルダ構成はザッと以下。

.
├── README.md
├── app
├── artisan
├── bootstrap
├── composer.json
├── composer.lock
├── config
├── database
├── node_modules
├── package-lock.json
├── package.json
├── phpunit.xml
├── public
│   ├── build
│   ├── favicon.ico
│   ├── index.php
│   ├── robots.txt
│   └── test.html
├── resources
│   ├── css
│   ├── js
│   └── views
├── routes
│   ├── api.php
│   ├── channels.php
│   ├── console.php
│   └── web.php
├── storage
├── tests
├── tsconfig.json
├── vendor
└── vite.config.js

環境構築方法

Laravel × Vue3 × Vite環境構築は、色々な方が既に書いてるので割愛。
~~決して書くのが面倒なわけじゃない。~~

問題

開発段階では問題は無かったが、デプロイしようとした時に問題発生。
viteを使ってbuildを実行し、特にエラー無しで終了。
いざ、デプロイしてみると、画面が真っ白。
コンソールログを見ると、以下のようなエラーが。

GET http://xxxxxxxx/build/assets/app-cab0639b.js net::ERR_ABORTED 404 (Not Found)

ここで脳死してググっただけなのが良くなかった。
探しても探しても、開発環境整備の記事ばかりで、デプロイする（Build)まで行う記事が無いのだ。

時間を溶かしたところで、自力解決に乗り出す。
４０４ということは、ファイルが無い？パスが違うかな？

├── build
│   ├── assets
│   │   ├── app-4ed993c7.js
│   │   └── app-cab0639b.js
│   └── manifest.json

ちゃんとある・・・・

アクセスできない理由は何なのか・・・

結論

Laravel側のルーティングの問題だった。
開発環境では、localhostのViteサーバーにアクセスして、JSやCSSを読んでくれるので問題ないのだが、BuildされたファイルはPublic配下に作成されるので影響を受けるわけだ。

Buildされたファイルを読み込めるようにルーティングに手を加える。

routes/web.php

Route::get('/build/{any}', function ($any) {
    $extensions = substr($any, strrpos($any, '.') + 1);
    $mine_type=[
        "css"=>"text/css",
        "js"=>"application/javascript"
    ];
    if(!array_key_exists($extensions,$mine_type)){
        return \App::abort(404);
    }
    if(!file_exists(public_path() . '/build/'.$any)){
        return \App::abort(404);
    }
    return response(\File::get(public_path() . '/build/'.$any))->header('Content-Type',$mine_type[$extensions]);
})->where('any', '.*');