React客户端与Node/Express服务端分仓时如何使用Docker Compose？

当两个服务分别在独立仓库维护时，只需通过Docker Compose的build.context配置指向各自仓库的目录，即可实现多服务协同部署。以下是具体实现步骤：

1. 目录结构规划 #

建议创建一个统一的父目录，将两个仓库克隆至此，再单独存放Compose配置文件：

my-project/
├── react-client/       # React客户端仓库（内含Dockerfile）
├── node-server/        # Node/Express服务端仓库（内含Dockerfile）
└── docker-compose/
    └── docker-compose.yml

2. 编写各仓库的Dockerfile #

React客户端Dockerfile（多阶段构建优化） #

# 构建静态文件阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Nginx部署阶段
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
# 可选：替换Nginx配置以支持React路由
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Node/Express服务端Dockerfile #

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

3. 编写Docker Compose配置文件 #

在docker-compose.yml中，通过build.context指定每个服务的代码仓库路径：

version: '3.8'

services:
  client:
    build:
      context: ../react-client  # 指向React仓库的绝对/相对路径
    ports:
      - "8080:80"  # 本地8080端口映射到容器80端口
    environment:
      - REACT_APP_API_BASE_URL=http://server:3000  # 用服务名访问服务端
    depends_on:
      server:
        condition: service_healthy  # 等待服务端就绪后启动

  server:
    build:
      context: ../node-server  # 指向Node仓库的绝对/相对路径
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    healthcheck:
      # 健康检查：确保服务端启动完成
      test: ["CMD", "wget", "--spider", "http://localhost:3000/health"]
      interval: 10s
      timeout: 5s
      retries: 3

4. 启动与更新服务 #

• 首次启动（构建镜像并启动容器）：

  cd docker-compose
  docker-compose up --build -d
  

• 代码更新后重新构建并启动：

  docker-compose up --build -d
  

• 停止服务：

  docker-compose down
  

关键注意事项 #

• 服务间通信：Compose默认创建专属桥接网络，服务名可直接作为域名使用（如客户端请求http://server:3000/api）。
• 依赖就绪问题：depends_on仅控制启动顺序，通过healthcheck和condition: service_healthy可确保客户端在服务端完全就绪后启动。
• 环境变量：通过Compose的environment字段传递配置，避免硬编码服务地址。

内容的提问来源于stack exchange，提问作者Luis