使用容器进行 React.js 开发

先决条件

完成容器化 React.js 应用程序。

概述

在本节中，您将学习如何使用 Docker Compose 为您的容器化 React.js 应用程序设置生产和开发环境。此设置允许您通过 Nginx 提供静态生产版本，并使用带有 Compose Watch 的实时重载开发服务器在容器内高效开发。

你将学习如何

• 为生产和开发配置单独的容器
• 在开发中使用 Compose Watch 启用自动文件同步
• 无需手动重建即可实时调试和实时预览您的更改

自动更新服务（开发模式）

使用 Compose Watch 自动将源文件更改同步到您的容器化开发环境中。这提供了无缝、高效的开发体验，无需手动重启或重建容器。

步骤 1：创建开发 Dockerfile

在项目根目录中创建一个名为 Dockerfile.dev 的文件，其内容如下

# =========================================
# Stage 1: Develop the React.js Application
# =========================================
ARG NODE_VERSION=22.14.0-alpine

# Use a lightweight Node.js image for development
FROM node:${NODE_VERSION} AS dev

# Set the working directory inside the container
WORKDIR /app

# Copy package-related files first to leverage Docker's caching mechanism
COPY package.json package-lock.json ./

# Install project dependencies
RUN --mount=type=cache,target=/root/.npm npm install

# Copy the rest of the application source code into the container
COPY . .

# Expose the port used by the Vite development server
EXPOSE 5173

# Use a default command, can be overridden in Docker compose.yml file
CMD ["npm", "run", "dev"]

此文件使用开发服务器为您的 React 应用程序设置了一个轻量级开发环境。

步骤 2：更新你的 compose.yaml 文件

打开您的 compose.yaml 文件并定义两个服务：一个用于生产 (react-prod)，一个用于开发 (react-dev)。

以下是 React.js 应用程序的配置示例

services:
  react-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-reactjs-sample
    ports:
      - "8080:8080"

  react-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    develop:
      watch:
        - action: sync
          path: .
          target: /app

• react-prod 服务使用 Nginx 构建并提供您的静态生产应用程序。
• react-dev 服务使用实时重载和热模块替换运行您的 React 开发服务器。
• watch 触发与 Compose Watch 的文件同步。

注意

有关更多详细信息，请参阅官方指南：使用 Compose Watch。

步骤 3：更新 vite.config.ts 以确保其在 Docker 中正常工作

为了使 Vite 的开发服务器在 Docker 中可靠地工作，您需要使用正确的设置更新 vite.config.ts。

打开项目根目录中的 vite.config.ts 文件并按如下方式更新

/// <reference types="vitest" />

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  base: "/",
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    strictPort: true,
  },
});

注意

vite.config.ts 中的 server 选项对于在 Docker 中运行 Vite 至关重要

• host: true 允许开发服务器从容器外部访问。
• port: 5173 设置一致的开发端口（必须与 Docker 中暴露的端口匹配）。
• strictPort: true 确保如果端口不可用，Vite 会明确失败，而不是静默切换。

有关完整详细信息，请参阅 Vite 服务器配置文档。

完成上述步骤后，你的项目目录现在应该包含以下文件

├── docker-reactjs-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md

步骤 4：启动 Compose Watch

从项目根目录运行以下命令以在监视模式下启动容器

$ docker compose watch react-dev

步骤 5：使用 React 测试 Compose Watch

要验证 Compose Watch 是否正常工作

1. 在您的文本编辑器中打开 src/App.tsx 文件。

2. 找到以下行

   <h1>Vite + React</h1>

3. 更改为

   <h1>Hello from Docker Compose Watch</h1>

4. 保存文件。

5. 在浏览器中打开 https://:5173。

你应该会立即看到更新的文本出现，而无需手动重建容器。这确认了文件监视和自动同步按预期工作。

摘要

在本节中，您使用 Docker 和 Docker Compose 为您的 React.js 应用程序设置了一个完整的开发和生产工作流程。

以下是您取得的成就

• 创建了 Dockerfile.dev 以简化带有热重载的本地开发
• 在您的 compose.yaml 文件中定义了单独的 react-dev 和 react-prod 服务
• 使用 Compose Watch 启用了实时文件同步，以获得更流畅的开发体验
• 通过修改和预览组件验证了实时更新的无缝工作

通过此设置，您现在可以完全在容器内构建、运行和迭代您的 React.js 应用程序——在不同环境中高效且一致。

相关资源

通过这些指南，加深你的知识并改进你的容器化开发工作流

• 使用 Compose Watch – 在开发过程中自动同步源更改
• 多阶段构建 – 创建高效、生产就绪的 Docker 镜像
• Dockerfile 最佳实践 – 编写干净、安全和优化的 Dockerfile。
• Compose 文件参考 – 学习在 compose.yaml 中配置服务的完整语法和可用选项。
• Docker 卷 – 在容器运行之间持久化和管理数据

后续步骤

在下一节中，您将学习如何在 Docker 容器中运行 React.js 应用程序的单元测试。这可确保跨所有环境进行一致的测试，并消除对本地机器设置的依赖。