🤖

Laravel × Vue3 × Vite のデプロイ(備忘録)

2023/04/09に公開1

最近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)まで行う記事が無いのだ。

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

├── 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', '.*');

mine_typeはWebサーバ側から取得したり、別途定義する方がよいだろうが、とりあえずこれでアクセスできるようになった!

まとめ

Laravel × Vue3 × Vite での開発環境整備の記事は山ほどあるのだが、デプロイのための設定に関する記載は無かった。

  • 開発環境を作る際にデプロイのことまで考えるのが稀なのか?
  • Laravel × Vue3 × Vite はデプロイまで行かない人が多いのか?
  • もっと別のやり方があるのか?

疑問は尽きない、誰か詳しい方教えてクレメンス。

GitHubで編集を提案

Discussion

esuzunoesuzuno

可能性としてはWebサーバが実体のあるファイルが存在するにもかかわらずに、index.phpにアクセスしに行ってるように見えます。

Apacheならばpublicディレクトリ内にlaravelの標準で.htaccessが配置されていたと思うのですが
見たところ削除されているようなので、httpd.confの方で実体のあるファイルが存在すれば先に見に行く記述がされているか確認してみたらどうでしょうか

Nginxならば自分で設定しないといけないため
try_files あたりの記述に実体のあるファイルが存在すれば先に見に行く記述をしているか確認してみたらどうでしょうか