工程化
38. Docker Preview 部署

前端如何对分支环境进行部署

::: tip Issue 欢迎在 Gtihub Issue 中回答或反馈问题: Issue 762 (opens in a new tab) :::

一种基于容器及 docker-compose 或者 k8s 的思路

  1. 借用现有的 CICD 服务,如 github actions 或者 gitlab CI 获取当前分支信息
  2. 借用 Docker 快速部署前端或者后端,根据分支信息启动不同的服务 (Service)根据 Docker 启动服务并配置响应的标签 (Label)
  3. 根据容器的标签与当前 Git 分支对前端后端设置不同的域名

以下是一个 Preview 的示例,其中服务名 cra-preview-${COMMIT_REF_NAME} 基于分支名称进行构建。

version: "3"
services:
  cra-preview-${COMMIT_REF_NAME}:
    build:
      context: .
      dockerfile: router.Dockerfile
    labels:
      # 配置域名: Preview
      - "traefik.http.routers.cra-preview-${COMMIT_REF_NAME}.rule=Host(`${COMMIT_REF_NAME}.cra.shanyue.tech`)"
      - traefik.http.routers.cra-preview-${COMMIT_REF_NAME}.tls=true
      - traefik.http.routers.cra-preview-${COMMIT_REF_NAME}.tls.certresolver=le

在进行构建时,再通过 envsub 工具进行环境变量的替换

cat preview.docker-compose.yaml | envsubst > docker-compose.yaml