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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Laravel

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

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

3900閲覧

npm run watch時にreactの変更が反映されない

yuyaamano23

総合スコア0

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Laravel

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

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1グッド

1クリップ

投稿2020/09/26 04:11

実現したいこと

docker上でlaravelのフロントにreactを導入して環境構築を行っています。
reactに変更を加えて、ブラウザで確認するために、dockerコンテナに入って npm run watch と入力しても反映されません。
npm run production と入力すると反映されますが、時間がかかってしまうのでなるべく使用しない方向で行きたいです。

環境

nginx 1.19.2
PHP 7.2.33
MySQL 8.0.21
Laravel 6.18.40
Node 11.15.0
npm 6.14.8
Bootstrap 4.5.2
React 16.13.1

試したこと

以下実行例です

・npm run dev とnpm run watch を実行したとき

DONE Compiled successfully in 14192ms 3:54:01 AM Asset Size Chunks Chunk Names /css/app.css 178 KiB /js/app [emitted] /js/app /js/app.js 2.13 MiB /js/app [emitted] /js/app

・npm run productionを実行したとき

このサイトをみながらやりましたhttps://qiita.com/milmil_neko/items/02ab1b9e38e8c94377cf

DONE Compiled successfully in 28275ms 3:41:33 AM Asset Size Chunks Chunk Names /css/app.css 141 KiB 0 [emitted] /js/app /js/app.js 403 KiB 0 [emitted] [big] /js/app /js/app.js.LICENSE.txt 3.27 KiB [emitted]

以下package.jsonの中身です

json:

1{ 2 "private": true, 3 "scripts": { 4 "dev": "npm run development", 5 "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 6 "watch": "npm run development -- --watch", 7 "watch-poll": "npm run watch -- --watch-poll", 8 "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js", 9 "prod": "npm run production", 10 "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 11 }, 12 "devDependencies": { 13 "@babel/preset-react": "^7.0.0", 14 "axios": "^0.19", 15 "bootstrap": "^4.0.0", 16 "cross-env": "^7.0", 17 "jquery": "^3.2", 18 "laravel-mix": "^5.0.1", 19 "lodash": "^4.17.19", 20 "popper.js": "^1.12", 21 "react": "^16.2.0", 22 "react-dom": "^16.2.0", 23 "resolve-url-loader": "^3.1.0", 24 "sass": "^1.15.2", 25 "sass-loader": "^8.0.0" 26 }, 27 "dependencies": { 28 "react-router-dom": "^5.2.0" 29 } 30}
yumauma20👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

質問された日がだいぶ前なので今更ですが、ググるとこの質問が上位に出るので解決方法を載せておきます。

・解決方法
マウントしているホストマシン側でnpm run watch する。高速でコンパイルされて画面にほぼリアルタイムで反映されます。マウントしていない場合は情報源のサイトを参照して他の方法で対応してください。

・注意点
ホストマシン側にnodejsとnpmがインストールされている必要があります。

・情報元
https://github.com/JeffreyWay/laravel-mix/issues/2325
こちらに前述した以外の解決策がいくつか記載されていますが、ホストマシンでnpm run watchするのが1番手っ取り早かったです。

投稿2020/11/17 08:39

jimbaran5601406

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問