Dockerized React 应用程序不重新编译代码答案

【问题标题】：Dockerized React app not recompiling codeDockerized React 应用程序不重新编译代码
【发布时间】：2021-01-22 16:16:53
【问题描述】：

我正在尝试对通过 npx create-react-app project-name 创建的基本 CRA 模板进行 dockerize，其中 Dockerfile 看起来像：

FROM node:latest

WORKDIR /usr/src/client

COPY ./ ./

RUN npm install

EXPOSE 3000

CMD ["npm", "start"]

我通过运行docker build -t containername . 构建了映像然后用docker run -it -p 3000:3000 containername运行它

一切正常，容器运行成功，我可以在浏览器上看到网页正在运行。

这里的问题是 webpack 热重载不起作用，导致应用程序在更改时无法重新编译。

here 和 here 已经提出了同样的问题，但遗憾的是结果不成功。 Windows 用户似乎出现了问题，但就我而言，我使用的是 Mac。

我已经试过了：

使用CHOKIDAR_USEPOLLING=true react-scripts start 更新npm start 脚本
按照here 的说明添加EXPOSE 35729

任何建议都非常感谢，提前谢谢！

【问题讨论】：

应该可以安装 Node 并将其用作具有热重载和其他细节的本地开发环境；你不需要像 Docker 这样的隔离工具。
@DavidMaze 你能解释一下你的意思吗？为什么会这样？我的想法是让所有东西都可以通过AWS ECS 进行部署
您可以使用本地Node环境进行开发，将您的应用打包到Docker中，然后使用ECS进行部署。这应该可以使用相同的代码库，在您开发应用程序时使用 npm run dev 之类的东西，并且仅在您需要运行集成测试或部署它时才引入 Docker。

标签： reactjs docker

【解决方案1】：

我认为 webpack 服务器没有看到任何新的变化，因为你修改了本地文件，但是容器在运行时使用它的副本，这是在构建时传递的。所以你应该把你的本地目录挂载到容器中。

我可以建议您使用docker-compose 将您的工作目录从主机挂载到容器：

docker-compose.yml

version: '3.4'
services:
  app:
    build: ./
    volumes:
      - ./src:/usr/src/client
    ports:
      - 3000:3000 # HOST:CONTAINER
    command: npm start

或者在运行命令docker run ...中使用-v $(pwd)/src:/app/src

【讨论】：

这实际上是我真正在做的事情，相关的节点、mongodb 和 redis 服务也会启动 - 工作方式相同，但 react 应用程序不会重新编译
感谢您的回答，您实际上让我注意到我没有为它设置任何音量 - 我已经尝试使用包括 -v 和 docker-compose 在内的 docker 命令直接设置在客户端根文件夹中，但仍然无法重新编译

【解决方案2】：

难以置信，问题是由工作目录命名引起的。

为了修复它，我只需将它从 /usr/src/client 更改为 /app 并开始重新编译，尽管我不知道原因。

FROM node:latest

WORKDIR /app

COPY ./ ./

RUN npm install

EXPOSE 3000

CMD ["npm", "start"]

【讨论】：

【解决方案3】：

以下内容对我有用。

docker run -p 3000:3000 -v ${PWD}:/usr/app -e CHOKIDAR_USEPOLLING=true globoreactapp/latest

在 windows poweshell 上运行它。

如果你使用的是windows cmd，可以试试，

docker run -p 3000:3000 -v %cd%:/usr/app -e CHOKIDAR_USEPOLLING=true globoreactapp/latest

如果你在一些 linux 发行版上运行，你可以试试这样的。

docker run -p 3000:3000 -v -e CHOKIDAR_USEPOLLING=true $(pwd):/usr/app

所以这里指定

-e CHOKIDAR_USEPOLLING=true

改变了我。

同样使用 docker-compose，您需要添加相同的环境变量。我的看起来如下。

version: '3'
services:
  redis-server:
    image: 'redis'
  node-app:
    build: 
      context: ./globoappserver
    ports:
      - "9080:8080"     
    container_name: api-server  
  ui:
    build:
      context: ./globo-react-app-ui
    environment:
      - CHOKIDAR_USEPOLLING=true
    ports:
      - "7000:3000"
    stdin_open: true 
    volumes:
      - ./globo-react-app-ui:/usr/app

【讨论】：