実現したいこと
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}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。