如何在ReactJS Docker中进行热重载

Question

如何在ReactJS Docker中进行热重载

pythonnode.jsreactjsdocker

23

这听起来可能很简单，但我有这个问题。

我有两个正在运行的 docker 容器。一个是我的 front-end 服务，另一个是我的 backend 服务。

这是两个服务的 Dockerfile。

front-end Dockerfile：

# Use an official node runtime as a parent image
FROM node:8

WORKDIR /app

# Install dependencies
COPY package.json /app

RUN npm install --silent

# Add rest of the client code
COPY . /app

EXPOSE 3000

CMD npm start

后端 Dockerfile :

FROM python:3.7.7

WORKDIR /usr/src/app

COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt

COPY server.py /usr/src/app
COPY . /usr/src/app

EXPOSE 8083

# CMD ["python3", "-m",  "http.server", "8080"]
CMD ["python3", "./server.py"]

我正在使用以下的docker-compose.yaml文件构建镜像:

version: "3.2"

services:

  frontend:
    build: ./frontend
    ports:
      - 80:3000
    depends_on: 
      - backend

  backend: 
    build: ./backends/banuka
    ports: 
      - 8080:8083

如何使这两个服务在前端或后端发生更改时进行更新？

我发现了一个包含reactjs、python-flask和posgresel的模板库，并声称已经为reactjs前端和python-flask后端启用了热重载。但是我找不到相关的信息。有人可以帮助我吗？模板库链接我的要求是：每次代码更改后容器应自动更新！

- user13456401

3

在你的compose环境中，你需要添加CHOKIDAR_USEPOLLIN=true。 - Atin Singh

@AtinSingh 对所有服务都进行了吗？ - user13456401

对于你的前端来说，这很有用。但是如果你使用nodemon，我猜你也需要它来进行后端开发。 - Atin Singh

抱歉，我对Python一无所知。我只在Node.js上工作过。 - Atin Singh

这对我有效：https://frontendguruji.com/blog/how-to-create-react-app-in-docker-container/#Hot-Reloading-not-working - Mandeep Pasbola

显示剩余3条评论

2个回答

3

如果您将React容器的端口映射到另一个端口：

    ports:
      - "30000:3000"

您可能需要告诉WebSocketClient查看正确的端口：

    environment:
      - CHOKIDAR_USEPOLLING=true # create-ui-app <= 5.x
      - WATCHPACK_POLLING=true # create-ui-app >= 5.x
      - FAST_REFRESH=false
      - WDS_SOCKET_PORT=30000 # The mapped port on your host machine

请查看相关问题：https://github.com/facebook/create-react-app/issues/11779

- penguin egg

谢谢您的回答。对我来说，只添加最后一个环境变量就可以了：WDS_SOCKET_PORT=<host port>。设置：docker-compose: FROM node:16-alpine（node 16.20.0）。 - Caco

补充我的上一个评论：react-scripts 5.0.1。 - Caco

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Atin Singh · Accepted Answer

在你的docker-compose.yml中尝试这个

version: "3.2"

services:

  frontend:
    build: ./frontend
    environment:
      CHOKIDAR_USEPOLLING: "true"
    volumes:
      - /app/node_modules
      - ./frontend:/app
    ports:
      - 80:3000
    depends_on: 
      - backend

  backend: 
    build: ./backends/banuka
    environment:
      CHOKIDAR_USEPOLLING: "true"
    volumes:
      - ./backends/banuka:/app    
    ports: 
      - 8080:8083

基本上，您需要使用Chokidar环境来启用热重新加载，并且需要卷绑定来使您的机器上的代码与容器中的代码通信。看看这是否有效。