### 使用 Docker 在 Windows 系统上部署 React 项目 在 Windows 系统中使用 Docker 部署 React 项目是一个高效且可靠的方式，能够确保应用程序的一致性和可移植性。以下是实现此目标的具体方法： #### 安装 Docker Desktop 为了在 Windows 上使用 Docker，需要先安装 **Docker Desktop**。该工具支持 Windows 平台上的容器化应用开发，并提供了对 WSL2 的集成支持[^1]。 下载并安装最新版本的 Docker Desktop 后，启动它并将设置调整为启用 WSL2 支持（如果尚未开启）。这一步骤可以显著提升性能以及兼容性。 --- #### 准备 React 项目文件 假设已经有一个现有的 React 项目或者可以通过 `npx create-react-app my-app` 创建一个新的 React 应用程序。完成后，目录结构应类似于以下内容： ``` my-app/ ├── node_modules/ ├── public/ ├── src/ ├── package.json └── README.md ``` --- #### 编写 Dockerfile 为了让 Docker 能够构建和运行 React 项目，需创建一个名为 `Dockerfile` 的文件。这个文件定义了如何打包和运行应用程序。 下面是一个典型的用于生产环境的 Dockerfile 示例： ```dockerfile # 基础镜像 FROM node:16-alpine AS build-stage # 设置工作目录 WORKDIR /app # 复制 package*.json 文件到容器中 COPY package*.json ./ # 安装依赖项 RUN npm install --silent # 将源码复制到容器中 COPY . . # 构建 React 应用程序 RUN npm run build # 生产阶段的基础镜像 FROM nginx:stable-alpine # 删除默认的 Nginx 页面 RUN rm -rf /usr/share/nginx/html/* # 将构建好的静态资源拷贝至 Nginx 默认路径 COPY --from=build-stage /app/build /usr/share/nginx/html # 暴露端口 EXPOSE 80 # 启动 Nginx CMD ["nginx", "-g", "daemon off;"] ``` 上述脚本分为两个部分： 1. 利用 Node.js 进行前端项目的编译； 2. 使用 NGINX 提供静态资源服务[^3]。 --- #### 构建 Docker 镜像 完成 Dockerfile 的编写后，在终端执行以下命令来构建镜像： ```bash docker build -t react-app . ``` 其中 `-t react-app` 表示给镜像打标签名称为 `react-app`。 --- #### 运行容器 成功构建镜像之后，可通过如下命令启动容器： ```bash docker run -d -p 8080:80 --name react-container react-app ``` 这里的关键参数解释如下： - `-d`: 让容器以后台模式运行； - `-p 8080:80`: 将主机的 8080 端口映射到容器内的 80 端口； - `--name react-container`: 给容器指定名字以便管理。 访问浏览器中的地址 `http://localhost:8080/` 即可查看已部署的应用界面。 --- #### (可选) 使用 Docker Compose 简化流程 如果希望进一步简化管理和配置过程，则推荐采用 **Docker Compose** 工具。为此需要额外准备一份 `docker-compose.yml` 文件，其内容可能如下所示： ```yaml version: '3' services: app: container_name: react-container image: react-app ports: - "8080:80" restart: always ``` 随后只需运行一条命令即可启动整个服务栈： ```bash docker-compose up -d ``` 停止服务时则执行： ```bash docker-compose down ``` --- ### 注意事项 1. 如果遇到权限问题或其他错误，请确认 Docker 是否正常运行以及是否有足够的磁盘空间。 2. 对于开发用途而非生产环境，可以选择不移除默认页面而直接挂载本地代码作为卷共享方式测试更改效果更快捷[^2]。 ---