Question

我目前正在尝试在docker中运行React应用程序。我正在运行容器内运行npm start的create-react-app包中包含的脚本，并且我使用绑定挂载在主机中工作并反映容器中的更改。遗憾的是，即使文件确实发生了变化，反应包附带的重新编译功能也无法在容器内部运行。问题是，我使用的是docket工具箱。你们知道这可能是什么问题吗？为什么不重新编译？

我的文件结构如下。

project
|   .dockerignore
|   .gitignore
|   docker-compose.yml
|   Dockerfile
|   LICENSE
|   README.md
|
\---frontend
    +---nodemodules\*
    |   package-lock.json
    |   package.json
    |   README.md
    |
    +---public
    |       index.html
    |
    \---src
        |   index.js
        |
        \---container
                App.jsx

Dockerfile

FROM node:8.11.1

COPY . /usr/src/

WORKDIR /usr/src/frontend

ENV PATH /usr/src/frontend/node_modules/.bin:$PATH

RUN npm install -g create-react-app
RUN npm install

EXPOSE 3000

CMD [ "npm", "start" ]

搬运工-compose.yml

version: "3.5"

services:
  react:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - "./frontend:/usr/src/frontend"
      - '/usr/src/frontend/node_modules'
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development

Answer 1

有时，当应用在容器中运行时，React不会在更改文件时重新编译代码。

如果项目在虚拟机（例如由Vagrant提供的VirtualBox）中运行，请在项目目录中创建.env文件（如果不存在），然后添加CHOKIDAR_USEPOLLING=true。这样可以确保下次运行npm start时，监视程序会根据需要在VM内部使用轮询模式。有关详细信息，请参见documentation。

Answer 2

将树更改为

project
|   .dockerignore
|   .gitignore
|   docker-compose.yml
|   LICENSE
|   README.md
|
\---frontend
    +---nodemodules\*
    |   package-lock.json
    |   package.json
    |   README.md
    |   Dockerfile    
    |
    +---public
    |       index.html
    |
    \---src
        |   index.js
        |
        \---container
                App.jsx

<强> Dockerfile

FROM node:node:8.11.1
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .

EXPOSE 3000
CMD [ "npm", "start" ]

构建图片，您需要在每个chnage上执行此步骤

cd frontend/

docker build -t reactapp .

<强>搬运工-compose.yml

version: "3.5"
services:
  react:
     image: reactapp
     ports:
       - "3000:3000"

当docker容器内的数据发生更改时，Create-react-app服务器不会重新编译

2 个答案: