質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

解決済

Docker開発環境、Laravel, viteでnpm run devで画面が真っ白になる

mikeko0901
mikeko0901

総合スコア227

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

1回答

0グッド

0クリップ

668閲覧

投稿2022/10/27 13:40

wsl2, Dockerで開発しています。
Laravel9, viteでnpm run devを実行すると画面が真っ白になってしまいます。

npm run dev後のhttp://localhost/の画面
イメージ説明
真っ白です…

こちらの記事に解決策があったので試しました。

一方で、 npm run dev の場合は、 Vite の開発サーバが別途立ち上がります。そして Vite でビルドされたファイルへアクセスするための埋め込みリンクは、 Vite の開発サーバの URL となります。 Docker を使う場合、 Docker ホスト側から Docker コンテナ内の Vite 開発サーバへどうやってアクセスするのかが、問題になりました。

とありましたので、記事の通りに試しました。

フォルダ構成

project └docker   └app…php用コンテナ     └Dockerfile     └php.ini   └db…mysql用コンテナ     └Dockerfile     └my.conf   └phpmyadmin…phpmyadmin用コンテナ     └session   └web…nginx用コンテナ     └Dockerfile     └default.conf └src…Laravelのソース一式

ソース

■vite.config.js(src配下のLaravel用ソースの中のもの)

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', refresh: true, }), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], server: { host: true, hmr: { host: 'localhost', }, }, });

記事にあるように、

server: { host: true, hmr: { host: 'localhost', }, },

を追加しました。

■docker-compose.yml

version: '3' services: # --------------------------------- # php # --------------------------------- app: build: context: . dockerfile: ./docker/app/Dockerfile container_name: NLaraCrm_app volumes: - ./src/:/app # --------------------------------- # nginx # --------------------------------- web: build: context: . dockerfile: ./docker/web/Dockerfile ports: - 80:80 - 5173:5173 depends_on: - app volumes: - ./src/:/app # --------------------------------- # mysql # --------------------------------- db: build: context: . dockerfile: ./docker/db/Dockerfile container_name: NLaraCrm_db ports: - 3306:3306 environment: MYSQL_DATABASE: database MYSQL_USER: user MYSQL_PASSWORD: password MYSQL_ROOT_PASSWORD: password TZ: 'Asia/Tokyo' # 起動時のコマンド command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci volumes: - mysql-volume:/var/lib/mysql # --------------------------------- # phpmyadmin # --------------------------------- phpmyadmin: image: phpmyadmin/phpmyadmin:5 container_name: NLaraCrm_phpmyadmin links: - db ports: - 8081:80 volumes: - ./docker/phpmyadmin/sessions:/sessions volumes: mysql-volume:

webのportsに - 5173:5173を追加しました。

docker-compose up -dをし直し、appコンテナに入りキャッシュをクリアしましたが依然として画面は白いままです。。。

白い画面のソースを見ますと

<script type="module" src="http://localhost:5173/@vite/client"></script><script type="module" src="http://localhost:5173/resources/js/app.js">

イメージ説明
になっていましたので、試しにhttp://localhost:5173/@vite/clientをクリックすると

イメージ説明

動作していませんとエラーが…

ポート5173につながっていないのでしょうか…

アドバイスをいただけますと幸いです。
よろしくお願いいたします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

自分で解決できないうちはLaravel公式の使い方だけした方がいい。
SailならWindows/Mac、npm run devをDocker内で動かす/外で動かす、どのパターンでも問題ないし何か問題があっても解決方法を探しやすい。
独自のDockerfile docker-compose.ymlではどこが原因かは他人からは調べにくい。

投稿2022/10/28 06:30

kawax

総合スコア10020

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mikeko0901

2022/11/02 03:24

ありがとうございます。 sailを使うことにしました!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。