如何在ReactJS Docker中进行热重新加载

wpx232ag  于 2022-10-23  发布在  React
关注(0)|答案(2)|浏览(224)

这听起来可能很简单,但我有这个问题。
我有两个docker容器在运行。一个用于我的front-end,另一个用于我的backend服务。
这些是两个服务的Dockerfile

前端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,它是reactjspython-flaskposgresel的回购,它说它已经为reactjs前端和python-flask后端启用了Hot reload。但我找不到任何与此相关的东西。有人能帮我吗?
repo link
我想要的是:每次代码更改后,容器应该自动更新!

vwkv1x7d

vwkv1x7d1#

在您的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环境来支持热重新加载,并且您需要卷绑定来使您机器上的代码与容器中的代码进行通信。看看这能不能行得通。

p1iqtdky

p1iqtdky2#

如果要将Reaction容器的端口Map到不同的端口:

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

相关问题