Docker 化 React 任务：实战 DevOps 实现

Source: Dev.to

介绍

在本文中，我将从零开始构建一个 Docker 化的 React 任务管理器，展示容器化、多阶段构建以及生产就绪部署等真实的 DevOps 实践。

项目概览

• 前端 – 使用 Vite 构建的 React 应用，由 Nginx 提供服务。
• 后端 – 占位 API（用于后续集成）。
• 编排 – 使用 Docker Compose 同时运行两个容器。

该项目既是一次 DevOps 实践练习，也可以作为生产就绪应用的模板。

前置条件

• Docker 20+
• Docker Compose 2+
• Node 20（Vite 所需）

设置 React 前端

# 创建 frontend 目录并初始化一个 Vite React 项目
cd frontend
npm create vite@latest . -- --template react
npm install

验证应用本地是否正常运行：

npm run dev

你应该能看到默认的 Vite UI，包含计数器和徽标。

Dockerfile（多阶段构建）

# ---- Build stage ----
FROM node:20-alpine AS build
WORKDIR /app

# Install dependencies
COPY package*.json ./
RUN npm install

# Copy source files and build
COPY . .
RUN npm run build

# ---- Production stage ----
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

注意： 原始 Dockerfile 使用了 node:18，导致 Vite 构建错误。Vite 需要 Node 20+。

Docker Compose 配置

version: "3.9"

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:80"
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "5000:5000"
    env_file:
      - .env
    networks:
      - devops-net

networks:
  devops-net:
    driver: bridge

说明

• frontend – 构建 React 应用并使用 Nginx 在容器内部的 80 端口提供服务；对外映射为 localhost:3000。
• backend – 占位 API，从 ./backend 构建，可通过 localhost:5000 访问。
• depends_on 确保后端在前端启动前先启动。
• 容器通过 devops-net 网络使用服务名称（frontend、backend）进行通信。

运行应用

# 构建并在前台启动两个容器
docker compose up --build

# 或者以分离模式运行
docker compose up -d --build

• 前端 URL:
• 后端 URL:

关键要点

• 多阶段 Docker 构建 通过将构建环境与运行环境分离，生成精简的生产镜像。
• Node 版本管理 至关重要；Vite 需要 Node 20 或更高版本。
• Docker Compose 简化了多服务的编排，并自动处理网络。
• Nginx 是为 React 生产构建提供静态文件服务的高效选择。

通过以上步骤，你已经拥有一个完整容器化的 React 任务管理器，准备好进行后续开发和部署。