基于 Drone CI 实现前端自动化打包并集成 Spug 自动发布流程

前言：代码自动化部署目前使用的是Spug开源运维平台，通过docker直接部署该平台后，在前端自动化打包（npm run build）会遇见Node的版本问题，因为Spug容器使用的是Centos7，所以Node版本只支持V16，V18以上版本不支持。所以考虑使用使用Drone CI来完成前端自动化打包（npm run build）再触发Spug的Webhook来完成自动化代码发布。

一、部署 Drone CI（Docker 方式）

我们需要创建一个文件夹，用于初始Drone CI的启动文件。

1、准备 `.env` 配置文件

文件路径，例如使用 /www/dk_project/drone_ci/.env

# Gitea地址（容器访问得到即可）
DRONE_GITEA_SERVER=http://127.0.0.1:42000

# Gitea-OAuth2 应用程序参数
DRONE_GITEA_CLIENT_ID=xxx
DRONE_GITEA_CLIENT_SECRET=xxx

# Drone server 配置
DRONE_SERVER_HOST=127.0.0.1:12009
DRONE_SERVER_PROTO=http

# 第一个用户初始化设置（根据 Gitea 用户名）
DRONE_USER_CREATE=username:admin,admin:true

# Runner 需要这些变量
DRONE_RPC_PROTO=http
DRONE_RPC_HOST=drone-server
# Drone 用于认证 Server <-> Runner 的 secret，自定义即可，必须一致
DRONE_RPC_SECRET=123456

1.2、Gitea-OAuth2 应用程序参数

需要在Gitea 后台创建 OAuth2 应用

1.2.1、步骤

登录 Gitea 网站（管理员账号）
点击右上角头像 → 管理后台
左侧菜单选择集成 → 应用
填写信息：

字段	示例
应用名称	`Drone CI`
重定向 URI	`http://your-drone-server.com/login` 如：`http://127.0.0.1:12009/login`

点击 创建新应用

提交后会获得两个字段：

Client ID → 填入 DRONE_GITEA_CLIENT_ID

Client Secret → 填入 DRONE_GITEA_CLIENT_SECRET

2、编写 `docker-compose.yml`

文件路径，使用 /www/dk_project/drone_ci/docker-compose.yml

还需要再创建一个文件夹 /www/dk_project/dk_compose/drone/data作为数据映射文件

version: '3'

services:
  drone-server:
    image: drone/drone:2
    ports:
      - 12009:80
    volumes:
      - /www/dk_project/dk_compose/drone/data:/data
    env_file:
      - .env
    restart: always

  drone-runner:
    image: drone/drone-runner-docker:1
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    env_file:
      - .env
    restart: always

3、启动 Drone

docker-compose up -d

4、访问地址

http://127.0.0.1:12009

首次登录会跳转到 Gitea 登录页（使用你配置的 DRONE_USER_CREATE 中的用户）

点击CONTINUE后会进行Gitea授权

应用授权后填写你的信息即可

二、项目配置（前端项目为例）

1、创建 `.drone.yml` 文件

放到项目根目录，记得.drone.yml 文件需要发布到test和master分支。

kind: pipeline
type: docker
name: build-deploy

trigger:
  event:
    - push
    - custom
  branch:
    - master
    - test

steps:
  - name: install & build
    image: node:23.9.0
    volumes:
      - name: build-output
        path: /runner/builds
    commands:
      - corepack enable
      - corepack prepare pnpm@8.15.5 --activate
      - pnpm install
      - mkdir -p /runner/builds/${DRONE_REPO_NAME}/${DRONE_BRANCH}
      - |
        case "${DRONE_BRANCH}" in
          test)
            pnpm run build:test
            ;;
          master)
            pnpm run build:prod
            ;;
          *)
            echo "❌ 未配置此分支的构建规则: ${DRONE_BRANCH}"
            exit 1
            ;;
        esac
      - rm -rf /runner/builds/${DRONE_REPO_NAME}/${DRONE_BRANCH}/*
      - cp -r dist/* /runner/builds/${DRONE_REPO_NAME}/${DRONE_BRANCH}/

  - name: deploy to spug
    image: curlimages/curl
    when:
      status:
        - success
      branch:
        - test
        - master
    environment:
      SPUG_DEPLOY_URL:
        from_secret: spug_deploy_lingji_officel_web_url
      SPUG_DEPLOY_TOKEN:
        from_secret: spug_deploy_token
    commands:
      - |
        echo "🚀 部署到 Spug: 分支 ${DRONE_BRANCH}"
        curl -X POST "$SPUG_DEPLOY_URL?name=${DRONE_BRANCH}&token=$SPUG_DEPLOY_TOKEN" \
        -H "Content-Type: application/json" \
        -d '{
        "ref": "refs/heads/'"${DRONE_BRANCH}"'",
        "before": "'"${DRONE_COMMIT_BEFORE}"'",
        "after": "'"${DRONE_COMMIT_SHA}"'",
        "commits": [
          {
            "message": "发布'"${DRONE_BRANCH}：${DRONE_COMMIT_SHA}"'"
          }
        ]
        }'

  - name: notify feishu on success
    image: curlimages/curl
    when:
      status:
        - success
    environment:
      FEISHU_WEBHOOK:
        from_secret: feishu_webhook_url
    commands:
      - |
        curl -X POST "$FEISHU_WEBHOOK" \
        -H "Content-Type: application/json" \
        -d '{
          "msg_type": "text",
          "content": {
            "text": "✅ Drone-CI 执行成功 🎉\n项目: '${DRONE_REPO_NAME}'\n分支: '${DRONE_BRANCH}'\n提交: '${DRONE_COMMIT_SHA:0:8}'"
          }
        }'

  - name: notify feishu on failure
    image: curlimages/curl
    when:
      status:
        - failure
    environment:
      FEISHU_WEBHOOK:
        from_secret: feishu_webhook_url
    commands:
      - |
        curl -X POST "$FEISHU_WEBHOOK" \
        -H "Content-Type: application/json" \
        -d '{
          "msg_type": "text",
          "content": {
            "text": "❌ Drone-CI 执行失败 ❗️\n项目: '${DRONE_REPO_NAME}'\n分支: '${DRONE_BRANCH}'\n提交: '${DRONE_COMMIT_SHA:0:8}'"
          }
        }'

volumes:
  - name: build-output
    host:
      path: /www/dk_project/dk_compose/spug/data/repos/build/drone-runner/builds