vife-webclient Docker镜像文档

1. 镜像概述和主要用途

vife-webclient 是基于 MEIGarage 项目的 ViFE Web 客户端应用 Docker 镜像。该镜像封装了完整的 Web 客户端运行环境及构建工具链，支持开发环境热重载、生产环境优化构建、代码质量检查及单元测试等核心功能，适用于 MEIGarage 相关 Web 界面的开发、部署与测试流程。

2. 核心功能和特性

• 开发环境支持：集成热重载机制，代码变更实时生效，提升开发效率。
• 生产构建优化：提供生产级构建命令，自动压缩、混淆资源，生成最小化静态文件。
• 代码质量保障：内置代码检查工具，支持自动修复常见代码规范问题。
• 单元测试集成：支持单元测试执行，验证代码功能正确性。
• 跨环境兼容性：通过 Docker 容器化，确保开发、测试、生产环境一致性。

3. 使用场景和适用范围

4. 使用方法和配置说明

4.1 基础环境要求

• Docker Engine 20.10+
• Docker Compose 2.0+（如需使用 Compose 配置）

4.2 镜像获取

假设镜像已构建并推送到仓库（如私有 registry 或 Docker Hub），拉取命令：

docker pull [镜像仓库地址]/vife-webclient:latest

4.3 开发环境使用（热重载）

4.3.1 直接运行（docker run）

映射本地代码目录至容器，实现代码实时同步与热重载：

docker run -it --rm \
  -v $(pwd):/app \          # 映射本地项目目录至容器工作目录
  -p 8080:8080 \            # 映射开发服务器端口（默认 8080）
  -e NODE_ENV=development \ # 开发环境模式
  [镜像仓库地址]/vife-webclient \
  npm run serve             # 启动热重载开发服务器

4.3.2 Docker Compose 配置（开发环境）

创建 docker-compose.dev.yml：

version: '3.8'
services:
  vife-webclient-dev:
    image: [镜像仓库地址]/vife-webclient:latest
    volumes:
      - ./:/app              # 映射本地代码至容器
    ports:
      - "8080:8080"          # 开发服务器端口
    environment:
      - NODE_ENV=development
    command: npm run serve   # 启动热重载

启动命令：

docker-compose -f docker-compose.dev.yml up

4.4 生产环境部署

4.4.1 构建生产静态资源

如需在容器内构建生产资源（输出至 /app/dist 目录）：

docker run -it --rm \
  -v $(pwd):/app \          # 映射本地目录以输出构建结果
  -e NODE_ENV=production \  # 生产环境模式
  [镜像仓库地址]/vife-webclient \
  npm run build             # 执行生产构建

4.4.2 运行生产环境服务（Nginx 示例）

假设生产构建产物（dist 目录）需通过 Nginx 提供服务，可结合多阶段构建或单独配置 Nginx 容器：

docker-compose.prod.yml：

version: '3.8'
services:
  vife-webclient-prod:
    image: nginx:alpine     # 使用 Nginx 作为静态资源服务器
    ports:
      - "80:80"             # 对外暴露 80 端口
    volumes:
      - ./dist:/usr/share/nginx/html # 挂载生产构建产物
      - ./nginx.conf:/etc/nginx/conf.d/default.conf # 自定义 Nginx 配置
    depends_on:
      - build-stage         # 依赖构建阶段

  build-stage:
    image: [镜像仓库地址]/vife-webclient:latest
    volumes:
      - ./:/app
    command: npm run build   # 构建生产资源到 ./dist

启动生产环境：

docker-compose -f docker-compose.prod.yml up

4.5 代码检查与单元测试

4.5.1 执行代码检查（Lint）

docker run -it --rm \
  -v $(pwd):/app \
  [镜像仓库地址]/vife-webclient \
  npm run lint              # 执行代码检查并修复

4.5.2 运行单元测试

docker run -it --rm \
  -v $(pwd):/app \
  [镜像仓库地址]/vife-webclient \
  npm run test:unit         # 执行单元测试

5. 配置参数与环境变量

6. 注意事项

• 开发环境下，本地代码修改会实时同步至容器，需确保本地已执行 npm install（或通过容器内 npm install 安装依赖）。
• 生产环境部署前，建议通过 npm run lint 和 npm run test:unit 验证代码质量。
• 构建生产镜像时，推荐使用多阶段构建（如 Node.js 构建 + Nginx 运行）以减小镜像体积。