Docker + 前端：Windows 系统下项目部署的操作指南

本指南将详细说明在 Windows 环境中使用 Docker 部署前端项目的完整流程，包含环境配置、镜像构建和容器运行等关键步骤。

---

1. 环境准备

确保系统满足以下条件：

• Windows 10 或 11（64位）
• 启用 Hyper-V 虚拟化（控制面板 → 程序 → 启用功能）
• 安装 Docker Desktop（最新稳定版）
• 安装 WSL 2（Windows Subsystem for Linux）

验证安装：

docker --version        # 应返回类似 $ \text{Docker version 24.0.6} $ 
docker-compose --version # 应返回 $ \text{Docker Compose version v2.23.0} $

---

2. 项目配置

在项目根目录创建关键文件：

Dockerfile（前端镜像构建）

# 使用官方 Node 基础镜像
FROM node:18-alpine AS build-stage

# 设置工作目录
WORKDIR /app

# 复制依赖文件并安装
COPY package*.json ./
RUN npm install

# 复制源码并构建
COPY . .
RUN npm run build

# 使用 Nginx 作为生产服务器
FROM nginx:stable-alpine
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80

docker-compose.yml（容器编排）

version: '3.8'
services:
  frontend:
    build: .
    ports:
      - "8080:80"
    restart: always

---

3. 构建与运行

通过 PowerShell 执行操作：

# 进入项目目录
cd C:\your-project-path

# 构建 Docker 镜像（注意结尾的点）
docker build -t frontend-app .

# 启动容器
docker-compose up -d

验证容器状态：

docker ps # 应显示端口映射 $ \text{0.0.0.0:8080→80/tcp} $

---

4. 访问应用

浏览器访问：
http://localhost:8080
若显示前端界面，则部署成功。

---

5. 常见问题处理

问题现象	解决方案
端口冲突	修改 docker-compose.yml 中的端口号 $ \text{8080:X} \rightarrow \text{新端口} $
构建缓慢	添加 .dockerignore 文件排除 node_modules
文件权限错误	在 Dockerfile 添加 RUN chown -R nginx:nginx /usr/share/nginx/html
WSL 启动失败	执行 wsl --update 并重启系统

---

6. 生产环境优化建议

• 使用多阶段构建减少镜像体积（如示例所示）
• 配置 Nginx 缓存策略：

  # 在项目根目录添加 nginx.conf
  gzip on;
  gzip_types text/css application/javascript;
  expires 1y;
  

• 添加健康检查：

  HEALTHCHECK --interval=30s CMD curl --fail http://localhost:80 || exit 1
  

通过以上步骤，可实现前端项目的容器化部署。最终镜像大小通常可控制在 $ \text{50MB} $ 左右，启动时间 $ \leq \text{2s} $。