如何创建可将React项目同步至本地的Docker容器？

嘿，我完全懂你的需求——想用Docker搞定React环境和项目初始化，不用每次都在本地装依赖，还能把生成的项目同步到本地对吧？你的问题出在当前Docker配置里的几个小细节，我帮你梳理清楚，再给你两种针对性的解决方案：

先说说你当前配置的问题 #

1. Dockerfile的多阶段构建+COPY . .画蛇添足：你第二个阶段里的COPY . .会把本地当前目录的内容直接覆盖到容器的/app/react-app里，等于把builder阶段辛辛苦苦生成的React项目给冲没了。
2. docker-compose的挂载逻辑搞反了：你用- .:/app把本地目录挂载到容器的/app，这会直接替换容器里的整个/app目录——构建镜像时生成的react-app文件夹会被本地的空目录（或者你本地现有的内容）覆盖，所以你在容器里看到的可能是镜像构建阶段的残留，实际运行时容器里的/app已经是本地的内容了，自然同步不到本地。

方案一：一次性生成React项目到本地（适合快速初始化项目） #

如果你只是想用Docker生成一次React项目，之后在本地开发，不用长期依赖容器，那可以这么改：

修改后的Dockerfile

FROM node:20.1.0

WORKDIR /app
# 全局安装create-react-app，避免每次npx拉取
RUN npm install -g create-react-app

# 在容器里生成React项目
RUN create-react-app my-react-app

# 容器启动时把项目复制到挂载的本地目录，然后保持运行
CMD ["sh", "-c", "cp -r /app/my-react-app/* /local-project && tail -f /dev/null"]

修改后的docker-compose.yaml

version: "3.8"

services:
  react-init:
    build: .
    volumes:
      # 把本地要存放项目的目录挂载到容器的/local-project
      - ./my-local-react-project:/local-project

运行步骤

执行docker-compose up --build，等容器启动完成后，你就能在本地的./my-local-react-project里看到完整的React项目了，之后可以直接停止容器：docker-compose down。

方案二：容器+本地双向同步（适合开发时用） #

如果你想全程用容器里的Node环境开发，本地只写代码，不用装依赖，那得调整挂载逻辑，只同步代码目录，保留容器里的依赖：

修改后的Dockerfile

FROM node:20.1.0

WORKDIR /app
# 生成React项目
RUN npx create-react-app my-react-app

# 切换到项目目录
WORKDIR /app/my-react-app

# 暴露开发服务器端口
EXPOSE 3000

# 启动React开发服务器
CMD ["npm", "start"]

修改后的docker-compose.yaml

version: "3.8"

services:
  react-dev:
    build: .
    ports:
      - "3000:3000"
    volumes:
      # 只同步本地的src目录到容器的项目src，改本地代码容器实时热更
      - ./src:/app/my-react-app/src
      # 保留容器里的node_modules，避免本地没有依赖的问题
      - /app/my-react-app/node_modules

运行步骤

1. 先执行docker-compose up --build，等容器启动完成，你可以访问http://localhost:3000看到React默认页面。
2. 此时本地会自动生成src目录，你在本地修改src里的代码，容器里的开发服务器会自动热更新，完全不用在本地装Node和依赖。

另一种快速方法：直接用Docker命令复制项目 #

如果你不想改配置，也可以用Docker命令直接把容器里的项目复制出来：

# 构建镜像
docker build -t react-builder .
# 启动临时容器
docker run -d --name temp-react react-builder
# 把容器里的react-app复制到本地
docker cp temp-react:/app/react-app ./my-local-project
# 清理临时容器
docker stop temp-react && docker rm temp-react

这样也能快速把容器里生成的项目同步到本地。

备注：内容来源于stack exchange，提问作者Lucas Macedo