LoginSignup
1
2

More than 1 year has passed since last update.

Docker環境のLaravel 9 + VITEでハマったこと

Last updated at Posted at 2022-12-05

はじめに

Docker環境でLaravel9のbreezeを使用した時にcss, jsの参照問題で地味にハマったのでその解決法の共有です。

環境

Docker環境と構成: リポジトリ

  • PHP
  • Nginx
  • Node
  • Mysql
  • Mysql(test db)
  • PHP My Admin
  • Ngrock
  • Schemaspy
  • Schemaspy Server(Nginx)

それぞれのVersion

  • PHP: 8.1.13
  • Laravel: 9.42.2
  • Composer: 1.10.26
  • Node: 16.18.1

前提

  • Dockerを使用してLaravel環境を構築している。
  • Breezeをインストールしている。
  • Nodeサーバーではnpm run devをしている状態。

現象

下記の画像のようにcssとjsの参照がうまくできていませんでした。
image.png

エラー内容

Failed to load resource: net::ERR_EMPTY_RESPONSE

原因

  • Laravel9からビルドツールがLaravel MixからViteへの変更があった。
  • ブラウザからNodeサーバーにアクセスするため、Nodeサーバーの5173ポートを公開する必要がある。
  • Viteのネットワーク経由のアクセスを設定していない。

解決方法

Nodeサーバーの5173ポートを公開

自分の環境では下記のように追加

Node Dockerfile
  node:
    container_name: node
    build: ./infra/node
    ports:
      - 5173:5173 //追加
    tty: true
    volumes:
      - ./backend:/work
    working_dir: /work

http://localhost:5173/で下記のようになっていればOKです。
image.png

Viteの設定

vite.config.jsでネットワーク経由のアクセスを設定する。

vite.config.js
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
// ここから追加
    server: {
        host: true,
        hmr: {
            host: 'localhost',
        },
    },
});

変更後にnpm run dev をするとNetworkのところにURLが設定されていればOKです。
image.png

このNetworkのIPアドレスはDocker Networkで設定されているもので下記のコマンドで確認できます。

# ネットワークの名前を検索
$ docker network ls

# ネットワークの詳細を表示
$ docker network inspect NETWORK_NAME

ブラウザで確認

http://localhost:8080/loginにアクセスすると下記のようになっていればOKです。
image.png

参考

1
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2