zeelo/frontend

前端项目构建与部署镜像

镜像概述

本镜像专为前端项目设计，提供完整的构建环境与部署能力，支持各类前端框架（如React、Vue、Angular等）及构建工具（npm、yarn、pnpm），可简化前端项目从源码构建到生产环境部署的流程。

核心功能与特性

• 多工具支持：内置npm、yarn、pnpm等包管理工具，兼容主流前端构建流程
• 环境隔离：提供独立的前端构建环境，避免本地环境差异导致的构建问题
• 部署能力：集成轻量级Web服务器（如nginx），支持构建产物直接部署
• 灵活配置：支持通过环境变量自定义构建命令、输出路径及部署参数
• 跨框架兼容：适配React、Vue、Angular、Svelte等主流前端框架

使用场景

• 前端开发团队快速构建和测试项目
• CI/CD流程中集成前端自动化构建与部署
• 静态网站、单页应用（SPA）的容器化部署
• 需要统一构建环境的多团队协作场景

使用方法与配置说明

基本使用（docker run）

bash
# 构建前端项目（示例：React项目）
docker run -v $(pwd):/app -e BUILD_CMD="npm run build" frontend-image:latest build

# 部署构建产物（默认使用nginx部署）
docker run -d -p 80:80 -v $(pwd)/build:/usr/share/nginx/html frontend-image:latest deploy

docker-compose配置示例

yaml
version: '3'
services:
  frontend:
    image: frontend-image:latest
    volumes:
      - ./:/app
      - ./build:/usr/share/nginx/html
    environment:
      - NODE_ENV=production
      - BUILD_CMD="yarn build"
      - OUTPUT_PATH="/app/build"
    ports:
      - "80:80"
    command: deploy

环境变量说明

构建与部署流程

1. 将前端项目源码挂载到容器内/app目录
2. 通过BUILD_CMD指定构建命令（如npm run build、yarn build）
3. 构建完成后，产物将输出到OUTPUT_PATH指定路径
4. 执行deploy命令启动Web服务器，将产物部署到指定端口

注意事项

• 构建时需确保项目根目录包含package.json及必要的构建配置文件
• 对于大型项目，建议挂载本地node_modules目录以提高构建效率
• 生产环境部署时，建议使用NODE_ENV=production以优化构建产物
• 如需自定义nginx配置，可挂载配置文件到/etc/nginx/conf.d/default.conf