如何在 ReactJS Docker 中热重载

Posted 2023-02-22

【中文标题】如何在 ReactJS Docker 中热重载

【英文标题】：How to Hot-Reload in ReactJS Docker

【发布时间】：2020-08-17 23:02:49

【问题描述】：

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

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

这些是两个服务的Dockerfiles。

前端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

当前端或后端发生变化时，我怎样才能使这两个服务Update？

我找到了这个 repo，它是 reactjs、python-flask 和 posgresel 的样板，它表示它已经为 reactjs 前端和 python-flask 后端启用了 Hot reload。但我找不到与此相关的任何东西。有人可以帮我吗？

repo link

我想要的是：每次代码更改后，容器应该自动更新！

【问题讨论】：

您需要在撰写环境中添加 CHOKIDAR_USEPOLLIN=true

@AtinSingh 到所有服务？

为您的前端。但我想如果你使用 nodemon，你也需要它作为后端

我不使用nodemon。这是一个简单的python服务器。我怎样才能做到这一点到后端？

抱歉不知道 Python。我只在 node,js 上工作过

【参考方案1】：

在你的 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 环境来启用热重载，并且您需要卷绑定以使您机器上的代码与容器中的代码通信。看看这是否有效。

【讨论】：

所以您已将CHOKIDAR_USEPOLLING: "true" 放入backend。我想这也适用于reactjs/front-end 更改？

@user13456401 是的，应该。试试看。

测试完毕后，我会尽快回复您。您是否在我可以联系到您的任何其他社交媒体上？

@user13456401 我很活跃所以你可以在这里联系我。我也在reddit上。 u/auctus10.

谢谢。如果这里有问题，我会与您联系