bilinguismotalentum/frontend

前端应用Docker镜像文档

镜像概述

本镜像专为前端应用设计，提供从开发、构建到部署的全生命周期支持。通过容器化技术标准化前端开发环境，集成主流构建工具与运行时，解决"环境不一致"问题，同时支持快速集成到CI/CD流程，实现前端应用的高效开发与可靠部署。

核心功能与特性

环境标准化

• 内置Node.js LTS版本及npm/yarn/pnpm包管理器，确保依赖安装一致性
• 预配置常用构建工具（webpack、vite、rollup）及编译器（Babel、TypeScript）
• 统一环境变量与路径规范，减少跨环境适配成本

多框架支持

• 兼容主流前端框架：
  • React（create-react-app）
  • Vue.js（Vue CLI、Vite）
  • Angular（Angular CLI）
  • Svelte、Preact等轻量级框架

双模式运行

• 开发模式：集成热重载（HMR）功能，支持代码实时更新与调试
• 生产模式：基于Nginx/Alpine构建轻量级运行时，提供高性能静态资源服务

构建优化

• 内置构建缓存机制，加速依赖安装与项目构建
• 支持多阶段构建，分离开发环境与生产产物
• 集成代码压缩、Tree-Shaking等优化工具

使用场景

本地开发环境

• 快速搭建一致的前端开发环境，避免本地环境配置冲突
• 多项目并行开发时，隔离不同项目的依赖环境

CI/CD流程集成

• 作为CI流水线的构建环境，自动化执行代码检查、测试与构建
• 生成标准化构建产物，直接用于后续部署流程

生产环境部署

• 通过Nginx提供静态资源服务，支持Gzip压缩、HTTP/2及SSL配置
• 可配合CDN实现静态资源加速，提升访问性能

使用方法与配置说明

基础镜像信息

• 开发环境基础镜像：node:<lts>-slim
• 生产环境基础镜像：nginx:alpine
• 支持架构：amd64、arm64

环境变量配置

卷挂载说明

命令示例

1. 开发模式（本地开发）

bash
docker run -it --rm \
  -v $(pwd):/app \                   # 挂载本地代码
  -v frontend_node_modules:/app/node_modules \  # 持久化依赖
  -p 3000:3000 \                     # 端口映射
  -e NODE_ENV=development \          # 开发环境
  -e NPM_REGISTRY=https://registry.npmmirror.com \  # 使用国内镜像源
  frontend-image:latest \
  sh -c "npm install && npm run dev"

2. 构建模式（生成生产产物）

bash
docker run --rm \
  -v $(pwd):/app \
  -v frontend_node_modules:/app/node_modules \
  -v $(pwd)/dist:/app/dist \         # 挂载构建产物到宿主机
  -e NODE_ENV=production \
  frontend-image:latest \
  npm run build                      # 执行构建命令

3. 生产模式（Nginx部署）

bash
docker run -d \
  --name frontend-prod \
  -p 80:80 \
  -p 443:443 \
  -v $(pwd)/dist:/usr/share/nginx/html \  # 挂载构建产物
  -v $(pwd)/nginx.conf:/etc/nginx/conf.d/default.conf \  # 自定义Nginx配置
  -v $(pwd)/ssl:/etc/nginx/ssl \        # SSL证书
  frontend-image:prod

Docker Compose配置示例

开发环境配置

yaml
version: '3.8'
services:
  frontend-dev:
    image: frontend-image:latest
    volumes:
      - ./:/app
      - node_modules:/app/node_modules
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development
      - NPM_REGISTRY=https://registry.npmmirror.com
      - PORT=3000
    command: sh -c "npm install && npm start"
    restart: unless-stopped

volumes:
  node_modules:  # 独立卷存储依赖，避免重复安装

生产环境配置

yaml
version: '3.8'
services:
  frontend-prod:
    image: frontend-image:prod
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./dist:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
      - ./ssl:/etc/nginx/ssl
    environment:
      - NGINX_HTTP2=on
      - NGINX_GZIP=on
    restart: always

自定义Nginx配置示例

nginx
# nginx.conf
server {
    listen 80;
    listen 443 ssl http2;
    server_name example.com;

    # SSL配置
    ssl_certificate /etc/nginx/ssl/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    
    # 静态资源配置
    root /usr/share/nginx/html;
    index index.html;
    
    # 前端路由支持
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 缓存策略
    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }
    
    # Gzip压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}