导读

本文将介绍如何搭建cicd平台，且支持以下功能

不同构建环境并存的打包（eg: 同时支持多个node版本）
构建时决定不同配置环境的打包（eg: test环境&&prod环境）
发布时决定每个不同租户的个性化配置（eg: 常见sass项目私有化部署，不同的租户代表不同的公司，每个公司可能有自己的个性化配置，像logo，api地址，oss地址等，这些都可以在发布阶段来动态注入）

背景

笔者上家公司是个小公司，前端的发布是本地构建，然后将构建好的包发给运维再丢到服务器上面，操作步骤非常繁琐，于是便搭建了支持多构建环境打包的cicd平台。

选型

关于为什么选用spug作为cicd平台？

因为它有一套完整的发布工作流（工作流其实非常重要，它规范了我们每个角色职责，减少因人为操作的出错，也能减少运维的工作量）它能创建不同的角色，为角色分配不同的功能，它还有告警，发版审核，权限控制，可视化操作界面等等功能。对很多小公司来说，投入产出比是非常重要的考量，最终选择了这个可用，功能齐全的成品来作为我们开发的cicd平台，而没有选择Jinkens。

具体详情可参见官网 www.spug.cc/docs/about-…

DooD

spug作为cicd平台很强大，它能提供平台帮助我们构建项目，但是大家的构建环境都不一样，有的可能依赖node12,有的依赖node16。有的java8，有的java18。

我们在一个环境进行所有项目的打包，是很难同时存在以上多种环境。而环境隔离最好的工具就是docker，但是我们的spug是用docker搭建的容器，在容器中使用docker，那么就得引出我们的DooD概念

DooD（Docker outside of Docker）：运行在Docker容器外部的Docker，即在容器内部操作外部的Docker服务端。

详情可见blog.csdn.net/qq_42482078…

有了DooD后，我们就能够放心的构建而不用担心会对其他项目的构建造成影响了。在接下来的步骤中，笔者也会特别标注DooD相关改造

搭建步骤

笔者演示环境 CentOS7 docker23

在服务器的空文件夹spug创建docker-compose.yml vi docker-compose.yml

version: "3.3"
services:
  db:
    image: mariadb:10.8.2
    container_name: spug-db
    restart: always
    command: --port 3306 --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - /data/spug/mysql:/var/lib/mysql
    environment:
      - MYSQL_DATABASE=spug
      - MYSQL_USER=spug
      - MYSQL_PASSWORD=spug.cc
      - MYSQL_ROOT_PASSWORD=spug.cc
  spug:
    image: openspug/spug-service
    container_name: spug
    privileged: true
    restart: always
    volumes:
      - /data/spug/service:/data/spug
      - /data/spug/repos:/data/repos
      # DooD: 需要将宿主机 的docker.sock 挂载进容器
      - /var/run/docker.sock:/var/run/docker.sock
    ports:
      # 如果80端口被占用可替换为其他端口，例如: - "8081:80"
      - "80:80"
    environment:
      - MYSQL_DATABASE=spug
      - MYSQL_USER=spug
      - MYSQL_PASSWORD=spug.cc
      - MYSQL_HOST=db
      - MYSQL_PORT=3306
    depends_on:
      - db

2.启动容器 docker compose up -d

3.创建管理员账号docker exec spug init_spug 账号密码 账号和密码替代为你自己的

4.在浏览器打开我们的可视化页面 http://localhost:80 ，用上面创建好的账号密码就能登录了

5.DooD: 为了使我们的spug容器能够使用docker, 我们还需为其安装docker。首先进入spug容器 docker exec -it spug bash

然后安装docker相关依赖 sudo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

其它系统的安装可参考docs.docker.com/engine/inst…

6.下面我们用nginx镜像验证是否成功

拉取镜像：docker pull nginx

运行镜像：docker run --name nginx-container -p 8080:80 -d nginx

查看运行结果：验证成功

主机配置

平台搭建好后，我们需要进行主机配置。

首先什么是主机？

主机可以理解为服务器

主机配置就是给spug我们服务器的账号密码，让它有权限能够在服务器上进行拉取代码，操作打包，构建产物存放等

我们来到主机管理页面，配置一台主机

点击保存后会输入一次密码，输入完后就会生成配置信息，我们在右上角web终端可以直接操作远程服务器

创建应用

每一个git仓库可以理解为一个应用，每个应用下可以配置多个环境，测试环境，生产环境等，我们可以为不同环境配置不同变量

1.首先我们新建一个应用

2.然后来到环境配置，新建测试和生产环境

3.回到应用设置，给我们的应用配置环境变量

4.环境变量类似于我们vite项目的配置文件env.test， env.prod，但是它更强大，我们不仅可以应用于我们构建时，也能应用到发布时（可以想象，我们一套代码要部署多个私有化环境，传统方案是设置多个env.xxx, 然后打包多次。当我们能用上发布时变量后，我们只需要打包一次，变量由发布环境决定，大大加快速度）

5.然后我们来到发布配置，选择新建一个发布

6.然后我们选择常规发布

常规发布由 Spug 负责应用代码的打包、传输和更新，但提供了各个阶段可自定义的钩子拉取代码，提供钩子在spug容器中进行命令操作，传输文件，。

配置项

发布环境 为哪个环境创建的发布配置，例如：测试环境 / 生产环境等。
Git仓库地址 该应用的 Git 仓库地址（请确保部署运维平台的服务器有权限通过给定的地址克隆仓库）。
发布审核 开启后创建的发布申请单需要审核后才可以进行发布。
目标主机部署路径 应用部署的路径，例如：静态网站部署在目标服务器的 /var/www/html。
目标主机仓库路径 用于存储应用的历史版本，可自定义任意目录，例如：/data/spug/repos。
保留历史版本数量 即如上边的例子中 /data/spug/repos 保留的历史版本数量，超过后早起的版本会自动删除，以节约存储空间。
发布目标主机 可以选择一个或多个主机进行发布。
文件过滤 可选 仅包含 或 排除 指定的文件，会从克隆的 Git 仓库的源代码中根据指定的规则过滤出符合条件的文件进行发布。
自定义全局变量 可在后边的钩子命令内使用，Spug 本身也包含一些内置全局变量。
代码迁出前执行 在部署 Spug 的服务器上运行，可以执行任意自定义命令。
代码迁出后执行 在部署 Spug 的服务器上运行，当前目录为检出后待发布的源代码目录，可执行任意自定义命令。
应用发布前执行 在发布的目标主机上运行，当前目录为目标主机上待发布的源代码目录，可执行任意自定义命令。
应用发布后执行 在发布的目标主机上运行，当前目录为已发布的应用目录，可执行任意自定义命令。

自定义发布， Spug 仅负责按顺序依次执行记录的动作。

接下来我们进行具体的配置，首先选择发布环境，部署的目标主机，配置git地址和权限等等

这里比较简单，都是选择和配置，这里笔者只演示主流程了，审核，消息通知就先不配置

继续下一步

文件过滤规则 是指最终会被传输到服务器的目录，因为前端一般打包目录默认是dist，所以这里也配置dist

代码检查后执行

在这里我们可以注入我们配置的环境变量到.env文件中，做到区分test和prod环境。

然后我们将使用docker打包构建，这里我们仅提供步骤。每个项目需要自己编写Dockfile, 在执行docker镜像构建时会读取项目的Dockfile来决定如何打包构建

步骤具体的代码如下

echo "===============代码检出后执行==================="

echo "注入环境变量到我们项目.env文件"
# env | grep _SPUG_ | sed 's/^_SPUG_VUE_DEMO_//g' 
env | grep _SPUG_ | sed 's/^_SPUG_VUE_DEMO_//g' > .env

echo "开始用镜像打包项目"
docker build -t $SPUG_APP_KEY .

echo "复制镜像打包产物到当前dist目录"
container_id=$(docker create $SPUG_APP_KEY)
echo $container_id
docker cp -a $container_id:/app/dist ./
docker rm -f "$container_id"

echo "=================打包成功======================="

配置完后我们接着下一步配置，这里比较简单，只需要配置就行。如果需要做到发布时决定的话，可以在应用发布后将我们的变量注入到window上

具体项目

配置完后我们再来看看我们的具体项目，这个项目其实在配置前先创建了，只是单独放一个章节方便观看。

此项目由下面命令快速创建 npm create vue@latest

其中主要包含.env文件（vite构建时会读取其中配置的变量）

然后包含Dockerfile

  # 设置node版本
  from node:16

  # 设置工作目录
  WORKDIR /app

  # 先复制 package.json 和 package-lock.json 到工作目录，
  # 此操作可以利用docker镜像缓存，当依赖没有变化时，npm i 直接使用缓存
  COPY package*.json ./

  # 安装依赖
  RUN npm install

  # 在复制其余文件到工作目录
  COPY . .

  # 执行打包
  RUN npm run build

  # 清除镜像中node_modules目录，减小镜像体积
  RUN rm -rf node_modules