concree/wekomkom_new_front_preprod

Preprod Frontend 镜像文档

镜像概述

Preprod Frontend镜像是专为前端应用设计的预生产环境容器化解决方案，旨在提供与生产环境高度一致的运行环境，用于在应用正式部署前进行全面的测试与验证。该镜像集成了前端应用运行所需的基础依赖，并支持灵活配置，帮助开发团队在部署生产前发现并解决潜在问题。

核心功能与特性

1. 生产环境模拟

• 内置与生产环境一致的基础配置（如资源加载策略、缓存机制）
• 支持生产级别的前端资源打包（如代码压缩、资源合并）
• 模拟生产环境网络条件（可选集成网络限流工具）

2. 测试支持

• 集成常用前端测试工具（如Jest、Cypress运行时环境）
• 支持单元测试、集成测试和端到端测试的执行
• 提供测试结果输出与日志记录功能

3. 灵活配置

• 支持通过环境变量自定义配置（如后端API地址、第三方服务端点）
• 允许挂载本地代码目录实现热重载，便于开发调试
• 兼容主流前端框架（React、Vue、Angular等）的构建产物

4. 监控与调试

• 内置基础性能监控工具，可收集页面加载速度、资源占用等指标
• 支持调试日志输出，便于问题定位
• 提供健康检查接口，支持容器编排平台的状态监控

使用场景与适用范围

适用场景

• 开发团队：前端应用开发完成后的集成测试与联调
• QA团队：功能验证、兼容性测试及用户体验评估
• 性能测试团队：前端性能瓶颈分析与优化验证
• CI/CD流程：作为自动化测试环节的运行环境，确保部署前应用质量

适用范围

• 基于现代前端框架（React、Vue、Angular、Svelte等）开发的单页应用（SPA）
• 静态站点生成（SSG）应用的预发布验证
• 需要多环境配置管理的前端项目

使用方法与配置说明

基本使用命令

通过docker run启动预生产前端环境容器：

bash
docker run -d \
  --name preprod-frontend \
  -p 8080:80 \
  -v $(pwd)/dist:/app/dist \  # 挂载前端构建产物目录
  -e NODE_ENV=preprod \       # 设置环境为预生产
  -e API_URL=https://test-api.example.com \  # 测试后端API地址
  preprod-frontend:latest

本地开发模式（热重载）

如需在开发过程中实时调试，可挂载源码目录并启用热重载：

bash
docker run -it \
  --name preprod-frontend-dev \
  -p 3000:3000 \
  -v $(pwd)/src:/app/src \    # 挂载源码目录
  -v $(pwd)/package.json:/app/package.json \
  -e NODE_ENV=preprod \
  -e HOT_RELOAD=true \        # 启用热重载
  preprod-frontend:latest \
  npm run dev                 # 运行开发服务器

环境变量配置

容器健康检查

镜像内置健康检查机制，可通过以下命令验证容器状态：

bash
docker inspect --format='{{.State.Health.Status}}' preprod-frontend

健康检查默认通过访问http://localhost/health端点实现，返回状态码200表示容器正常运行。

注意事项

• 预生产环境配置应尽可能接近生产环境，但需避免包含敏感信息（如生产数据库凭证）
• 建议在CI/CD流程中使用固定版本标签（如preprod-frontend:v1.2.0）而非latest，确保环境一致性
• 本地开发模式下，热重载可能需要调整宿主防火墙设置以允许容器端口访问