使用 docker-compose 实时重新加载反应应用程序答案

【问题标题】：Live reload react app working with docker-compose使用 docker-compose 实时重新加载反应应用程序
【发布时间】：2023-03-22 11:18:01
【问题描述】：

我有两个服务：前端（产品列表）和后端（服务器 API）。

我创建了一个 docker-compose 文件，它工作正常：

version: '3.1'

services:
  server-api:
    build: ./server-api
    ports: 
      - "8080:8080"
  product-list:
    build: ./product-list
    environment:
      CHOKIDAR_USEPOLLING: "true"
    ports: 
      - "3000:3000"
    depends_on:
      - server-api

但我有一个问题：应用程序在更改后没有重新加载。

我已经读过这个，很多人说CHOKIDAR_USEPOLLING: "true" 应该可以工作。

它不适合我。

我想知道是否是音量问题（我不太清楚它们现在是如何工作的，或者我应该创建什么音量），或者我是否应该安装一些东西来观看文件。

这是我的前端应用程序中的 Dockerfile：

FROM node:14-alpine AS development

ENV NODE_ENV development

WORKDIR /app

COPY package.json .
COPY package-lock.json .

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

现在我只是使用docker-compose up 来启动应用程序。

我只需要知道我的 react 应用程序发生了什么以及为什么它没有重新加载，后端服务 (server-api) 工作正常，我不需要在该应用程序中热重新加载。

感谢任何帮助。

【问题讨论】：

这里真的需要 Docker 吗？特别是对于开发前端应用程序，您可能会发现直接使用 Node 会更容易，而无需尝试绕过 Docker 的隔离功能。
只是为了学习。

标签： javascript reactjs docker docker-compose

【解决方案1】：

要使更改进入容器，您需要将项目挂载为卷。在当前配置下，项目的改动只有在重建镜像后才会落入容器中。

例如：

  product-list:
    build: ./product-list
    environment:
      CHOKIDAR_USEPOLLING: "true"
    ports: 
      - "3000:3000"
    depends_on:
      - server-api
    volumes:
      - ".:/app"

【讨论】：