其实了解 CI 好久了，但是一直没有尝试，因为是未知领域，实际上没有那么复杂，但是因为看的教程不太对，所以白折腾了好久，现在记录一下踩坑流程
本文基于 MacOS 和腾讯云 CentOS 环境
什么是 CI
CI，即Continuous Integration（持续集成），当团队协作者提交代码或者合并分支之后，GitHub 会通过执行预先设定好的方法对项目进行构建打包和部署，开发者无需手动上线，可以节省开发者的时间和精力。
例如我有写博客的习惯，我的博客网站是基于hugo的，我每写一篇文章，都需要本地运行hugo或者hugo -minify重新打包网站，然后建立 SFTP 连接，点开服务器上对应文件夹，把本地文件上传上去，然后才能完成网站的更新。这仅仅是建立在我写博客的周期很长的基础上的，对于前端项目，每次上线时都要自己重新编译打包部署，无疑会浪费大量时间精力，所以学习一下 CI 还是很有必要的。
准备工作
使用过git的应该都已经完成过基本配置，即 SSH 认证了，本文不再赘述 SSH 密钥的生成方法。
首先需要了解，SSH 加密是非对称加密，即通过同时维护公钥（public key）和私钥（private key）实现加密。 私钥只能由一方安全保管，不能外泄，而公钥则可以发给任何请求它的人。 非对称加密使用这对密钥中的一个进行加密，而解密则需要另一个密钥，安全性非常高。
在 MacOS 下，SSH 密钥保存在/Users/username/.ssh文件夹中，其中id_rsa是私钥文件，id_rsa.pub是公钥文件（这个文件夹是隐藏文件夹，MacOS 下按下Command+Shift+.显示隐藏文件夹）
确保自己拥有这两个文件，如果没有则重新生成。
而为了保证 SSH 密钥的私密性和防止服务器公网 IP 以及用户名泄漏，所以我们需要将其写在 GitHub 仓库的Secret选项中。在仓库的设置中依次选择Security > Secret > Actions
然后点击右上角新建密钥，这里我们新建一个名为 SSH_KEY 的密钥，将id_rsa文件中的本地私钥复制到下方的 Value 框中，注意需要连着开头的 BEGIN 和结尾的 END 一同复制过来
保存后我们就可以在workflow的配置文件中使用${{ secrets.SSH_KEY }} 来获取到这个密钥了。
同理，将用户名和服务器 ip 地址分别存放在SSH_USERNAME和SSH_HOST中，防止隐私信息泄漏
而对于服务器而言，我们也需要进行相应配置
输入
1
|
vim ~/.ssh/authorized_keys
|
将id_rsa.pub文件中的公钥复制到这个文件中（不要遗漏最后的换行）
随后输入
1
|
vim /etc/ssh/sshd_config
|
进入服务器ssh配置
vim 操作，按i进入编辑模式，输入完成之后按ESC退出编辑模式，然后键入:wq保存并退出
修改其中的相应值，如果前面有#的把#删掉
1
2
3
4
5
|
PubkeyAuthentication yes
StrictHostKeyChecking no
PermitRootLogin yes # 如果不需要root权限登录则无需更改
UsePAM no
PasswordAuthentication no
|
随后重启 sshd 服务
完成服务器配置之后打开终端，输入ssh username@hostname检查，例如：
1
|
ssh root@111.222.333.444
|
如果成功登入了服务器，则说明配置成功了
新建 workflow
在仓库的Actions页选择set up a workflow yourself新建workflow
随后就会生成一个初始文件，名称没有限制，但必须是YAML格式即.yml文件。
右侧的市场提供了很多第三方的包，可以直接调用
这里直接给出我的配置文件，是基于 hugo 自动构建部署到腾讯云服务器的 ci
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
# 一个workflow，名为deploy to TencentCloud
name: deploy to TencentCloud
on: # 此CI/CD触发时的事件
push: # 在代码提交时自动触发
branches:
- master
# 一个 CI/CD 的工作流有许多 jobs 组成，比如最典型的 job 是 lint，test，build。
jobs:
build: # 构建job
runs-on: ubuntu-latest
# 跑workflow的服务器系统，只用于运行CI，与你的操作平台无关
steps: # job的一系列动作
# 切换分支获取源码
- name: Checkout
# step的名称，将会在 github action 的控制台中显示
# 选择一个action，可以理解为若干 steps.run，有利于代码复用
uses: actions/checkout@master
- name: Setup Hugo # 步骤名自取
uses: peaceiris/actions-hugo@v2
# hugo官方提供的action，用于在任务环境中获取hugo
with:
hugo-version: "latest" # 获取最新版本的hugo
# extended: true
- name: Hugo Build
run: hugo --minify # 使用hugo构建静态网页
# 部署到腾讯云服务器
- name: Deploy to Server # 第四步，rsync推送文件
uses: AEnterprise/rsync-deploy@v1.0
# 使用别人包装好的步骤镜像
env:
DEPLOY_KEY: ${{ secrets.SSH_KEY }}
# 引用配置，SSH私钥
ARGS: "-avz --delete"
# rsync参数，删除服务器目标目录下的原有文件
SERVER_PORT: "22" # SSH端口
FOLDER: "./public/*"
# 要推送的文件夹，路径相对于代码仓库的根目录
SERVER_IP: ${{ secrets.SSH_HOST }}
# 引用配置，服务器的host名（IP或者域名domain.com）
USERNAME: ${{ secrets.SSH_USERNAME }}
# 引用配置，服务器登录名
SERVER_DESTINATION: "/usr/share/nginx/html/blog/"
# 部署到目标文件夹
|
可以看出，针对hugo构建的就是这一步
1
2
3
4
5
6
7
8
|
- name: Setup Hugo # 步骤名自取
uses: peaceiris/actions-hugo@v2
# hugo官方提供的action，用于在任务环境中获取hugo
with:
hugo-version: "latest" # 获取最新版本的hugo
# extended: true
- name: Hugo Build
run: hugo --minify # 使用hugo构建静态网页
|
将其替换为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
# 下载 git submodule
- uses: srt32/git-actions@v0.0.3
with:
args: git submodule update --init --recursive
# 使用 node:10
- name: use Node.js 10
uses: actions/setup-node@v1
with:
node-version: 10
# npm install
- name: npm install and build
run: |
npm install
npm run build
env:
CI: true
|
就可以使用 node 环境构建前后端项目了
检查运行情况
配置完毕之后，我们提交代码之后，就会自动运行 CI 了。
在提交记录的左边会显示 ci 状态，如果一切正常，就会显示绿勾，正在运行会显示黄点，运行失败则显示红叉。
点击这个绿勾则可以进入日志，如果有报错我们也可以在这里查看报错，解决问题
从此再也不用手动部署啦！
