前端Docker部署

原文地址

前端Docker部署 | GitHub

1. 背景

在传统前端部署中，我们常常遇到以下问题：

环境不一致导致“本地能跑，生产报错”
手动上传构建产物效率低，容易出错
回滚困难，版本不可追踪

为了解决这些问题，我们采用了 Docker 容器化部署 + 火山云容器服务 的方案，将前端项目打包成镜像，并通过镜像标签管理不同环境（测试/正式），实现快速、一致、可回滚的部署。

2. 技术栈

Docker：前端镜像构建和容器化运行
火山云 CR（容器镜像仓库）：存储镜像，支持 dev / latest 标签
火山云容器服务：容器运行环境，可手动或自动部署镜像
pnpm / Node.js / nginx：前端构建和服务

3. 镜像构建流程

3.1 Dockerfile 设计

采用 多阶段构建：

Builder 阶段：
- 使用 Node 镜像构建前端代码
- 安装依赖并执行 pnpm run build
- 输出静态文件
Production 阶段：
- 使用 nginx 镜像作为基础运行环境
- 拷贝构建产物到 nginx 的 html 目录
- 配置 nginx 模板并注入动态环境变量 API_HOST
- 镜像打标（Label）包含：
  - maintainer="Zhang Ye <zhangye@company.com>"
  - build.tag、build.version、build.time

3.2 构建脚本

使用 build-local-docker-image.sh：

根据传入参数（dev / latest）设置 API_HOST 和镜像标签
自动获取 Git commit 和构建时间打入镜像元数据
执行 docker build 并推送到火山云 CR

bash

# build-local-docker-image.sh
TAG=$1
REMOTE_IMAGE="$REGISTRY/$APP_NAME:$TAG"

# 根据环境设置 API_HOST
if [ "$TAG" == "dev" ]; then
    API_HOST="bs-server-dev"
else
    API_HOST="bs-server"
fi

# 版本信息
BUILD_VERSION=$(git rev-parse --short HEAD 2>/dev/null || echo "local")
BUILD_TIME=$(date -u +"%Y-%m-%dT%H:%M:%SZ")

 docker build ../../ -f Dockerfile \
        --build-arg API_HOST=${API_HOST} \
        --build-arg BUILD_TAG=${TAG} \
        --build-arg BUILD_VERSION=${BUILD_VERSION} \
        --build-arg BUILD_TIME=${BUILD_TIME} \
        -t ${IMAGE_NAME} || { echo "❌ build_image failed"; exit 1; }

示例命令：

json

{
    "scripts:" {
        "build:docker:prod": "./scripts/deploy/build-local-docker-image.sh latest",
        "build:docker:test": "./scripts/deploy/build-local-docker-image.sh dev",
    }
}

4. 部署流程

4.1 手动部署

在火山云容器服务中：

选择目标服务
点击重新部署

自动拉取最新镜像（例如 bs_web:dev）
停止旧容器
启动新容器
健康检查通过后，流量切换到新容器

4.2 背后机制

重新部署等同于

bash

docker pull imotion-cn-beijing.cr.volces.com/ci-infra/bs_web:dev
docker run -d -p 8010:8080 bs_web:dev

整个过程由火山云自动完成。

4.3 自动化部署（可选）

可通过 CI/CD 或 API 实现：

镜像推送完成 → 自动调用火山云容器服务接口 → 滚动更新容器
无需手动点击，真正实现持续交付（CD）

5. 部署优势

优势	说明
环境一致	镜像包含 Node、Nginx、构建产物，开发/测试/生产环境完全一致
快速部署	拉取镜像即可运行，秒级上线
可回滚	镜像版本可控，切换标签即可回滚
自动化	CI/CD 流水线可自动构建推送和部署
版本追踪	镜像 Label 打标，包括构建时间和 Git commit

6. 可优化方向

为每个镜像增加环境标识（Label 或 API_HOST）
在 CI/CD 流水线中自动触发重新部署
前端代码读取构建时注入的环境变量，动态展示环境信息
支持多环境镜像标签策略（dev / staging / prod）

前端Docker部署 ​

1. 背景 ​

2. 技术栈 ​

3. 镜像构建流程 ​

3.1 Dockerfile 设计 ​

3.2 构建脚本 ​

4. 部署流程 ​

4.1 手动部署 ​

4.2 背后机制 ​

4.3 自动化部署（可选） ​

5. 部署优势 ​

6. 可优化方向 ​