# 给博客接入自动化打包并部署

# 为什么需要CI/CD工作流呢？

所谓CI/CD，即持续集成/持续部署
传统的前端部署往往都要经历：本地代码更新 => 本地打包项目 => 清空服务器相应目录 => 上传项目包至相应目录几个阶段，这些都是机械重复的步骤
尽管可以通过shell脚本去执行，但每次发版都需要手动去发版，而且人工操作有时候往往更容易出错，时间和人力成本都相应浪费了不少
见过线上代码和代码仓库不同步，有时候还会影响别人判断，影响迭代和团队协作
基于以上，我们更确信CI/CD的不可缺少

# 持续集成平台

drone (opens new window)是一个现代化的持续集成平台，使用强大的云原生管道引擎自动化构建、测试和发布工作流程，
它可以使用简单的YAML配置文件来定义和执行Docker容器中的Pipelines，与流行的源代码管理系统无缝集成

那么我们需要什么呢？

申请一个OAuth Application，为了授权 Drone Server 读取你的代码仓库信息
确保服务器安装了docker，我们需要基于docker拉去镜像快速搭建服务
创建一个共享密钥来验证跑步者和您的中央无人机服务器之间的通信。
启动一个drone-server（中央Drone服务器）和Drone runner （接收来自中央Drone服务器的指令以执行构建管道）
在代码仓库创建一个应用，每次项目变更时会由webhook去通知drone执行构建
接入代码仓库后会自动帮我们同步项目

依照官网提供的文档，结合自身情况选择与代码仓库对应的流程，搭建好服务后在项目中创建drone.yml文件，用以告诉drone进行一些什么操作
这里我用的是结合gitea的部分(当然用docker-compose直接起更舒服)，共享密钥使用 openssl 生成

共享密钥(此处省略中间部分):cc212*******************08f1542b56

docker run \
  --volume=/var/lib/drone:/data \
  --env=DRONE_GITEA_SERVER=http://gitea.zhoukingzz.com:9300 \
  --env=DRONE_GITEA_CLIENT_ID=86f170ad-ff69-4640-8fcd-9ff420ffddda \
  --env=DRONE_GITEA_CLIENT_SECRET=oIWA9rFBApWnWasdetgzKA8xtTEmSoIJB58oDNmfjoN2 \
  --env=DRONE_RPC_SECRET=cc212*******************08f1542b56 \
  --env=DRONE_SERVER_HOST=http://drone.zhoukingzz.com:9300 \
  --env=DRONE_SERVER_PROTO=http \
  --publish=9300:80 \
  --restart=always \
  --detach=true \
  --name=gitea-drone \
  drone/drone:2

docker run --detach \
  --volume=/var/run/docker.sock:/var/run/docker.sock \
  --env=DRONE_RPC_PROTO=http \
  --env=DRONE_RPC_HOST=drone.zhoukingzz.com:9300 \
  --env=DRONE_RPC_SECRET=cc212*******************08f1542b56 \
  --env=DRONE_RUNNER_CAPACITY=2 \
  --env=DRONE_RUNNER_NAME=gitea-drone-runner \
  --publish=9930:3000 \
  --restart=always \
  --name=runner \
  drone/drone-runner-docker:1

以下是简单的yaml文件，由于使用的都是drone官方提供的镜像，细节上还是存在一定不优雅
由于服务器配置是敏感信息，我们需要用到Secret来存储

kind: pipeline
type: docker
name: default

steps:
- name: install & build
  image: plugins/npm
  pull: always
  commands:
    - pwd
    - ls -la
    - npm i
    - npm run build
    - ls -la

- name: scp
  image: appleboy/drone-scp
  pull: always
  settings:
    debug: true
    source:
      - dist/
    host:
      from_secret: DRONE_HOST
    username: 
      from_secret: DRONE_NAME
    port: 
      from_secret: DRONE_PORT
    password:
      from_secret: DRONE_PSW
    target:
      from_secret: DRONE_DICT
    when:
      branch:
        include:
          - main
      event:
        - push
        - merge

- name: commands
  image: appleboy/drone-ssh
  pull: always
  settings:
    host:
      from_secret: DRONE_HOST
    username: 
      from_secret: DRONE_NAME
    port: 
      from_secret: DRONE_PORT
    password:
      from_secret: DRONE_PSW
    script:
      - nginx -s reload
      
trigger:
  branch:
    include:
      - main
  event:
    include:
      - push

最终可以在drone平台看到打包部署进度
而且可以看到运行环境给出的反馈

← 关于 http 协议你知道多少 js 中实现继承的 6 种方式 →