使用容器進行 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 應用程式——在不同環境中高效且一致。

透過這些指南，加深你的知識並改進你的容器化開發工作流

後續步驟

在下一節中，您將學習如何在 Docker 容器中執行 React.js 應用程式的單元測試。這可確保跨所有環境進行一致的測試，並消除對本地機器設定的依賴。

在容器中執行 React.js 測試 »