DockerでLaravelのviteをbuildで使う時のエラー

viteサーバーを起動せずにlarvelアプリにアクセスすると、静的アセットが有りませんと
ブラウザーが言うから、調べてみた。

viteサーバーを立ち上げて

npm run dev

ブラウザーからアクセスすれば、ちゃんと静的アセット（js、css、pngなどのファイル）は普通に
送られてくる。(ちなみに強制終了コマンド：Ctrl+c)

これを

npm run build

で、public/build/assets/内に静的アセットを作って、ブラウザーからアクセスすると、
ブラウザーにエラーが表示される。図にするとこんな感じ。

WebサーバーにNginXを使い、アプリケーションサーバーにLaravelをインストールしている。
開発環境のホストPCと同期をとりたいので、volumesで同期の設定を行っている。
これで問題ないと思っていたのですが、NginXは自分のコンテナ内を探して、静的アセットが
存在しないと、ブラウザーに”そんなもの有りません”と返すようです。
なので、docker-composer.ymlファイルで、コンテナを作る際にvolumes設定を
Webサーバーとアプリケーションサーバー、ホストPCで同期をとるようにすると、
エラーが解消されます。

具体的には、

 volumes:
      - .:/var/www/html

の記述をWebサーバーとAppサーバーの設定で、両方に記述すればOK

Docker Engが間接的に同期してくれます。
これにより、Appサーバーコンテナで作られたbuildの内容がWebサーバーコンテナ
に反映されてエラーが無くなります。

とりあえず動作を確認したい時は、エラーを回避できます。
また、laravelなので、ルートを設定して静的アセットを送り返す方法も当然可能です。

また、編集後に表示内容が変わらない場合は、
①chromeブラウザのキャシュを削除
　Ctrl＋shift＋R

②サーバー側のキャシュを削除

php artisan cache:clear

php artisan view:clear

①②で表示が反映されるはずです。