CI（Continuous Integration）持续集成和CD（Continuous Delivery）持续交付，CD还有一种称谓：持续部署。

它的理念：让开发人员更加专注于业务代码的开发，通过自动化流程完成代码单元测试、集成测试、合并、打包、部署等流程。

合理全面的CI/CD，自动化研发流程，提高研发效率，增加系统稳定性

我了解的关于前端CICD流程方案有3种

pm2 它不仅可以执行本地命令，还可以连接服务器、执行命令、监控项目等
Github Actions
Travis CI

CICD流程的搭建需要先了解linux shell脚本、npm、机票、ssh免密登陆相关知识。

其实Github Actions配置很简单，关键配置前的准备工作

服务器要实现准备好node环境git环境
本地生成公私钥并开启ssh代理
github配置公钥，这样可以免密拉取代码
服务器也要生成公私钥，并在github 配置公钥，这样在服务器上可以执行git相关命令时免密操作。在讲解Github ActionsCICD方案

本文将依次讲解上述内容，然后再带你配置Github Actions，打通CICD流程

服务器准备工作

由于我选择的腾讯云ubuntu系统默认已经安装了git环境，我就不折腾了。

但是node版本太旧了，我决定使用nvm安装到16版本

通过nvm安装node

nvm 的安装官方文档
第一步让我下载脚本并执行即完成安装curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
第二步配置环境变量

vi ~/.bashrc 增加以下内容

bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

使配置生效souce .bashrc
然后执行 nvm install 16 && nvm use 16

考虑我的服务器配置很低（硬盘空间少），且后面再服务器打包，我采用pnpm包管理器安装很简单，一个命令搞定npm install -g pnpm

但是没有那么顺利 curl 下载文件需要机票, 我想到了 clash这个代理工具和 speed17.com这个机场

科学上网

第一步先要下载clash这个代理工具，按照这篇教程在github找到对应的版本通过wget命令下载

bash
wget -O clash.gz https://github.com/Dreamacro/clash/releases/download/v1.18.0/clash-linux-amd64-v1.18.0.gz

下载这个文件同样需要机票😂 ，我是在本地电脑下载，然后通过scp命令上传到服务器

第二步下载clash的配置文件，也就是机票，我以前买过了，按照放心云的教程点击linux文档，我下载了clash.yaml, 与之前的clash放在同一个目录，

然后执行 ./clash -f clash.yaml & 后台启动服务

如果想关闭可以通过 lsof -i查询到进程id，然后kill -9杀死集成，它的默认端口是7890

第三步是命令行开启代理 export ALL_PROXY=socks5://127.0.0.1:7890
可以通过curl -vv https://www.google.com 验证机票是否有效

注意该export命令只在当前窗口有效，如果你要永久有效可以写入.bashrc文件

机票有了，第一步的nvm安装才能顺利进行。

补充: clash官方文档

ssh免密登陆

关于免密登陆参考我的这篇文章，这里就不重复写了

我这里已经配置好了

本地拉去代码服务器拉去代码都正常

补充个小知识点，由于我骚操作修改了home目录权限，导致ssh免密登陆失效，参考 ssh免密登陆失败原因解决了

这里先说一下我的思路，先梳理总总总结 GithubActions 最常用和基本功能，然后写一个相对完善的CICD案例。

GithubActions功能简介

持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub 把这些操作就称为 actions。
这些操作在不同项目很类似，GitHub 注意到了这一点，让actions之间可以相互集成
- 官方市场 awesome actions 的仓库
- actions基本使用
- actions/setup-node@74bc508 # 指向一个 commit
- actions/setup-node@v1.0 # 指向一个标签
- actions/setup-node@master # 指向一个分支
基本概念
- workflow （工作流程）：持续集成一次运行的过程，就是一个 workflow
- job （任务）：一个 workflow 由一个或多个 jobs 构成，含义是一次持续集成的运行，可以完成多个任务。
- step（步骤）：每个 job 由多个 step 构成，一步步完成。
- action （动作）：每个 step 可以依次执行一个或多个命令（action）

来看一个案例

yml
name: test # 任务名称， 不写取配置文件名称

# on什么时候触发
# 当往main分支push代码的时候触发。
# paths表示限定为哪里内容改动触发，里面是glob语法
on:
    push:
        branches:
            - main
        paths:
            - '.github/workflows/**'
            - '__test__/**'
            - 'src/**'


jobs: # 定义任务
    test: # 定义名为test的任务
        runs-on: ubuntu-latest # 改任务的运行环境
        steps: # 任务包含一组action，以"-"开头的就是一个任务
            - name: Use Node.js # 任务名称
              uses: actions/setup-node@v1 # 继承别人写好的action
              with: # 使用该action所需参数
                  node-version: 14
            - name: lint and test
              # run 定义要执行的脚本
              run: |
                  npm i
                  npm run lint
                  npm run test:remote

workflow 文件
GitHub Actions 的配置文件叫做 workflow 文件，存放在代码仓库的.github/workflows目录。
workflow 文件采用 YAML 格式
关于YAML 格式相比JSON格式来说更简洁（使用锁进表示层级）和强大（可以设置锚点、引入、拍平数据、组合效果），更多关于yaml参考这里

workflow的常用配置字段

on 触发的条件，通常是某些条件如push、pull_request 也支持外部事件和定时任务，更多参考官方文档
on.<push|pull_request>.<tags|branches> 限定事件触发的条件，是分支或标签
jobs.<job_id> 定义事件默认并行可通过needs表示依赖关系，如实现串行来看一个jobs串行示例

yml
jobs:
  job1:
  job2:
    needs: job1
  job3:
    needs: [job1, job2]

jobs.<job_id>.runs-on 限定运行环境
jobs.<job_id>.steps 定义jobs的运行步骤,来看个示例

yml
jobs:
  my-job: 
    name: My Job # 事件名称
    runs-on: ubuntu-latest # 限定运行环境
    steps: # 运行步骤 有 name env run 三个字段
    - name: Print a greeting # 步骤名称，打印使用
      env: # 定义变量
        MY_VAR: Hi there! My name is
        FIRST_NAME: Mona
        MIDDLE_NAME: The
        LAST_NAME: Octocat
      run: | # 运行脚本   |表示多行文本
        echo $MY_VAR $FIRST_NAME $MIDDLE_NAME $LAST_NAME.

考虑到服务器IP、账号、密码相关私密信息，github提供配置界面，配置以后不显示value，只能覆盖或删除。如下图我的配置

workflow文件的模版可以在github上生成

你可以把我这段内容放进去，文件名随意，我取名ci.yml

ci.yml

yml
name: test ssh command
on:
  push:
    branches:
      - main
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: executing remote ssh commands using password
        uses: appleboy/ssh-action@v1.0.0
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          port: ${{ secrets.PORT }}
          script: cd /home/ubuntu/github && echo hello >> b.txt

上述代码就登录了一下我的服务器，往b.txt文件（没有会创建）追加写入hello字符串。
appleboy/ssh-action是别人写好的一个action 通过ssh连接服务器的。

当你push到main分支时候已经触发workflow任务执行，我的执行结果如下

现在我去登录一下我的服务器看看

scipt脚本是可以定制的，如执行git pull、pnpm install、npm run build、发布、发送邮件通知等等，至此恭喜你已完成Github Actions的入门

完整案例

我这边准备了一个小项目 CICD-demo

点击这里可以看一下我实现的效果

我的workflow配置如下

ci.yml

yml
name: test ssh command
on:
  push:
    branches:
      - main
    paths:
      - '.github/workflows/**'
      - 'tests/**'
      - 'src/**'
      - 'config/**'
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: executing remote ssh commands using password
        uses: appleboy/ssh-action@v1.0.0
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          port: ${{ secrets.PORT }}
          script: |
            cd /home/ubuntu/github/CICD-demo &&
            git pull &&
            pnpm i &&
            npm run build &&
            cp -r ./dist/*  /home/ubuntu/myDockerFiles/nginx/html/static/CICD-demo

补充：关于demo中功能请看我的另一片文章前端代码规范