docker-frontend-build 镜像文档

镜像概述

docker-frontend-build 是一个专为前端项目构建设计的Docker镜像，旨在提供标准化、一致的前端构建环境。该镜像集成Node.js运行时及常用前端构建工具（如npm、yarn、Webpack、Vite等），解决因开发环境差异导致的"在我电脑上能运行"问题，适用于各类前端项目（React、Vue、Angular等）的编译、打包流程。

核心功能与特性

环境一致性

• 内置稳定版本的Node.js（支持多版本标签选择，如latest、node18、node20）
• 预安装npm、yarn包管理器，无需额外配置
• 包含常见前端构建依赖（如python、make等），避免构建过程中依赖缺失

构建工具集成

• 支持主流前端构建工具：Webpack、Vite、Rollup、Parcel
• 内置TypeScript编译环境，支持TS项目构建
• 包含ESLint、Prettier等代码质量工具，可集成到构建流程

灵活性与可定制性

• 支持通过环境变量自定义构建命令
• 可挂载项目目录实现本地代码实时构建
• 提供轻量级镜像版本（-slim标签），减少镜像体积

使用场景

1. CI/CD流程集成：在Jenkins、GitLab CI、GitHub Actions等CI/CD平台中作为构建步骤，确保构建环境一致
2. 本地开发构建：开发者无需在本地安装Node.js及依赖，直接通过容器化方式构建项目
3. 多项目统一构建：企业内部多前端项目共享同一构建环境，降低维护成本
4. 前端库打包发布：用于前端组件库、工具库的编译打包及版本发布流程

使用方法

基本使用（本地构建）

通过docker run命令启动容器，挂载本地项目目录并执行构建命令：

docker run -it --rm \
  -v $(pwd):/app \
  -w /app \
  docker-frontend-build:latest \
  npm run build

指定Node.js版本

通过镜像标签选择Node.js版本（如使用Node.js 20）：

docker run -it --rm \
  -v $(pwd):/app \
  -w /app \
  docker-frontend-build:node20 \
  yarn build

自定义构建命令

通过环境变量BUILD_CMD指定构建命令：

docker run -it --rm \
  -v $(pwd):/app \
  -w /app \
  -e BUILD_CMD="vite build --mode production" \
  docker-frontend-build:latest

在CI/CD中使用（GitLab CI示例）

在.gitlab-ci.yml中配置构建步骤：

build-frontend:
  stage: build
  image: docker-frontend-build:node18
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/

docker-compose配置示例

创建docker-compose.yml文件：

version: '3'
services:
  frontend-build:
    image: docker-frontend-build:latest
    volumes:
      - ./:/app
    working_dir: /app
    environment:
      - NODE_ENV=production
      - BUILD_CMD="npm run build:prod"
    command: sh -c "$BUILD_CMD"

执行构建：

docker-compose run frontend-build

环境变量说明

镜像标签说明

注意事项

• 本地构建时，挂载目录权限问题：如遇权限错误，可添加-u $(id -u):$(id -g)参数指定用户
• 构建缓存：可通过挂载node_modules目录或使用Docker BuildKit缓存提升构建速度
• 大型项目构建：建议使用--memory参数限制容器内存使用，避免资源耗尽