Docker化的React应用与Nodemon监控

huangapple
go评论109阅读模式
英文:

Dockerized React App x Nodemon monitoring

问题

I've got a React App running on docker with Nodemon checking for any modifications in the App.js file. I first initialise the dockerfile via an initialise.bat which just builds.

initialise.bat

docker build . -f Dockerfile -t react-dev-app

DockerFile

  2. WORKDIR /app
  4. COPY package.json package-lock.json /app/
  5. COPY public /app/public
  6. COPY src /app/src
  8. RUN npm install --verbose --only=production
  9. COPY . .
  10. RUN npm install --verbose -g nodemon
  12. EXPOSE 3000
  14. CMD ["nodemon", "--watch", "**/*", "App.js"]

docker-compose.yml

  1. services:
  2.   devreact:
  3.     image: react-dev-app
  4.     stdin_open: true
  5.     tty: true
  6.     volumes:
  7.       - ./:/app
  8.       - node_modules:/app/node_modules
  9.     ports: 
  10.       - "3000:3000"
  11. volumes:
  12.   node_modules:

Package.Json

  1.     "name": "app",
  2.     "version": "0.1.0",
  3.     "private": true,
  4.     "dependencies": {
  5.         "@testing-library/jest-dom": "^5.16.5",
  6.         "@testing-library/react": "^13.4.0",
  7.         "@testing-library/user-event": "^13.5.0",
  8.         "nodemon": "^2.0.22",
  9.         "nth-check": "^2.0.1",
  10.         "react": "^18.2.0",
  11.         "react-dom": "^18.2.0",
  12.         "react-scripts": "^5.0.1",
  13.         "web-vitals": "^2.1.4"
  14.     },
  15.     "scripts": {
  16.         "start": "react-scripts start",
  17.         "build": "react-scripts build",
  18.         "test": "react-scripts test",
  19.         "eject": "react-scripts eject"
  20.     },
  21.     "eslintConfig": {
  22.         "extends": [
  23.             "react-app",
  24.             "react-app/jest"
  25.         ]
  26.     },
  27.     "browserslist": {
  28.         "production": [
  29.             ">0.2%",
  30.             "not dead",
  31.             "not op_mini all"
  32.         ],
  33.         "development": [
  34.             "last 1 chrome version",
  35.             "last 1 firefox version",
  36.             "last 1 safari version"
  37.         ]
  38.     },
  39.     "devDependencies": {
  40.         "css-select": "^4.1.3",
  41.         "nodemon": "^2.0.22"
  42.     }
  43. }```
  45. <details>
  46. <summary>英文:</summary>
  48. I&#39;ve got a React App running on docker with Nodemon checking for any modifications in the App.js file. I first initialise the dockerfile via an initialise.bat which just builds.
  50. **initialise.bat**

docker build . -f Dockerfile -t react-dev-app

  3. **DockerFile**

FROM node:latest

WORKDIR /app

COPY package.json package-lock.json /app/
COPY public /app/public
COPY src /app/src

RUN npm install --verbose --only=production
COPY . .
RUN npm install --verbose -g nodemon

EXPOSE 3000

CMD ["nodemon", "--watch", "**/*", "App.js"]

  1. **docker-compose.yml**
  2. ```version: &#39;3&#39;
  3. services:
  4.   devreact:
  5.     image: react-dev-app
  6.     stdin_open: true
  7.     tty: true
  8.     volumes:
  9.       - ./:/app
  10.       -  node_modules:/app/node_modules
  11.     ports: 
  12.       - &quot;3000:3000&quot;
  13. volumes:
  14.   node_modules:

Package.Json

  1. {
  2.     &quot;name&quot;: &quot;app&quot;,
  3.     &quot;version&quot;: &quot;0.1.0&quot;,
  4.     &quot;private&quot;: true,
  5.     &quot;dependencies&quot;: {
  6.         &quot;@testing-library/jest-dom&quot;: &quot;^5.16.5&quot;,
  7.         &quot;@testing-library/react&quot;: &quot;^13.4.0&quot;,
  8.         &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
  9.         &quot;nodemon&quot;: &quot;^2.0.22&quot;,
  10.         &quot;nth-check&quot;: &quot;^2.0.1&quot;,
  11.         &quot;react&quot;: &quot;^18.2.0&quot;,
  12.         &quot;react-dom&quot;: &quot;^18.2.0&quot;,
  13.         &quot;react-scripts&quot;: &quot;^5.0.1&quot;,
  14.         &quot;web-vitals&quot;: &quot;^2.1.4&quot;
  15.     },
  16.     &quot;scripts&quot;: {
  17.         &quot;start&quot;: &quot;react-scripts start&quot;,
  18.         &quot;build&quot;: &quot;react-scripts build&quot;,
  19.         &quot;test&quot;: &quot;react-scripts test&quot;,
  20.         &quot;eject&quot;: &quot;react-scripts eject&quot;
  21.     },
  22.     &quot;eslintConfig&quot;: {
  23.         &quot;extends&quot;: [
  24.             &quot;react-app&quot;,
  25.             &quot;react-app/jest&quot;
  26.         ]
  27.     },
  28.     &quot;browserslist&quot;: {
  29.         &quot;production&quot;: [
  30.             &quot;&gt;0.2%&quot;,
  31.             &quot;not dead&quot;,
  32.             &quot;not op_mini all&quot;
  33.         ],
  34.         &quot;development&quot;: [
  35.             &quot;last 1 chrome version&quot;,
  36.             &quot;last 1 firefox version&quot;,
  37.             &quot;last 1 safari version&quot;
  38.         ]
  39.     },
  40.     &quot;devDependencies&quot;: {
  41.         &quot;css-select&quot;: &quot;^4.1.3&quot;,
  42.         &quot;nodemon&quot;: &quot;^2.0.22&quot;
  43.     }
  44. }

the react app starts up fine but it's not detecting any changes made in App.js or anywhere.

i tried changing the start string in Package.json but no luck there. also tried a different package as an alternative to nodemon and still got the same outcome. tried different CMD commands in the dockerfile and still no luck. i either enter a big loop or it just errors.

EDIT: there appears to be some sort of cross-compatibility issue between Mac and pc. On Mac, file changes are being monitored and then restarts as intended then I accessed the files on my windows pc no changes are being monitored.

答案1

得分: 0

在Windows系统中，你需要加入 --legacy watch 选项来检查文件的变化。

  1. version: '3'
  2. services:
  3.   devreact:
  4.     build:
  5.       context: .
  6.       dockerfile: Dockerfile
  7.     stdin_open: true
  8.     tty: true
  9.     volumes:
  10.       - .:/app
  11.       - node_modules:/app/node_modules
  12.     ports:
  13.       - "3000:3000"
  14.     command: nodemon --legacy-watch App.js
  15. volumes:
  16.   node_modules:
英文:

turns out in windows you need to put --legacy watch to check files changes.

  1. version: &#39;3&#39;
  2. services:
  3.   devreact:
  4.     build:
  5.       context: .
  6.       dockerfile: Dockerfile
  7.     stdin_open: true
  8.     tty: true
  9.     volumes:
  10.       - .:/app
  11.       - node_modules:/app/node_modules
  12.     ports:
  13.       - &quot;3000:3000&quot;
  14.     command: nodemon --legacy-watch App.js
  15. volumes:
  16.   node_modules:

huangapple
  • 本文由 发表于 2023年4月6日 21:21:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/75950027.html
  • docker
  • docker-compose
  • dockerfile
  • nodemon
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定