为什么要学CI CD
-
解放重复劳动力，由机器为我们执行重复工作
-
虽然大部分与服务器打交道的事情（项目部署）由更专业的运维来做，但是当你在开发环境的应用部署后由于某某问题没有生效更新（明明我TM啥也没动，怎么到我推送就不行了），假如你对项目部署以及CICD丝毫不了解，你是不是很无助，只能让运维来帮你排查问题？当你了解基础的配置知识后，你可以自己通过配置试着找问题，例如：代码推送后，CICD 服务是否收到？是否进行了构建打包？是否打包成功后进行了部署？输出的静态资源哈希与页面的静态资源哈希是否一致？通过一步一步排查，那么如果是前端代码配置或者服务网络等问题，这个时候一般是前端项目问题的话基本都定位到了，就算这里不是你的前端项目问题，排查依旧无果，你也可以将你自己已经排查的步骤总结给运维，运维通过你提供的信息也可以大大减少他的排查时间，他也不会在潜意识觉得是不是你在瞎JB乱搞前端打包配置出的问题，所以，身为一个前端，墙裂建议掌握基础的CICD。
开发环境
mac：m1 pro（arm64）
- 通过docker 部署gitlab + jenkins作为一台服务器
- 通过VMware 安装centos7，作为第二台服务器，安装nignx 进行静态资源部署
最终效果
jenkins 监听gitlab的前端应用仓库推送，构建并将静态资源推送至nginx服务器
准备工作
gitlab jenkins （docker部署）
gitlab
步骤
1. 注册用户（我这边gitlab用户名为root），生成一个前端应用仓库，放置前端应用。
2. 配置ssh（如果使用账号密码登录可跳过）
ssh配置
1. 将jenkins服务器上的公钥粘贴，生成token
2. 将jenkins服务器的私钥配置过来
jenkins
步骤
1. 注册用户
2. 服务器生成公钥私钥
3. 插件安装
4. 将gitlab 用户账号（1. 账号密码，2. ssh）配置到凭证中（用于监听仓库推送拉取代码）
公钥私钥生成
执行命令：ssh-keygen -m PEM -t rsa -b 4096
生成后进入~/.ssh目录查看是否新增私钥公钥文件
插件安装（可能有遗漏，自行补装）
1. 安装git插件
2. 安装gitlab 插件
3. 安装nodeJS环境插件(用于构建时shell 中使用node环境)
4. 安装Generic WebHook Trigger插件 (gitlab webhook)
5. 安装Publish over SSH（配置nginx服务器账号信息以及静态资源打包目录，用于将打包好的静态资源发送至nginx服务器）
nodeJS安装
安装nodeJS后前往工具配置中配置node版本
Publish over SSH 配置
配置字段
1. path to key：存放jenkins服务器的私钥路径
2. name：服务名，根据自己的服务自定义写
3. hostname：需要登录的远程服务器ip（这里为nginx服务器）
4. username：登录的账号（这里为nginx服务器用户名）
5. Use password authentication：如果是账号密码登录的形式，则需要勾选并且填写账号密码（ssh不需要勾选）
步骤
1. 账号密码登录（nginx服务器的管理员账号密码），无需生成公钥私钥，配置比ssh简单
2. ssh:
1. 将公钥发送到nginx服务器用户的.ssh目录下，文件命名为authorized_keys。可直接使用命令以下命令将公钥复制过去：ssh-copy-id 用户名@ip，并且输入根据提示远程服务器密码，远程服务器用户的.ssh目录将会接受到jenkins服务器发送的公钥文件
2. 私钥配置
3. 测试连接是否成功
账号密码登录配置
1. jenkins ssh key 配置都留空
2. ssh servers配置，点开高级，勾选Use password authentication，输入服务器密码
3. 点击test configuration 测试是否连接成功
ssh配置
1. passphrase 如果生成密钥时没有加密，则留空
2. 配置path to key
3. ssh servers配置
4. 点击test configuration 测试是否连接成功
DEMO
步骤
1. gitlab 创建一个前端仓库
2. nginx 服务器配置静态资源
3. jenkins 创建项目，配置gitlab 代码仓库地址，接收到gitlab到hook后构建推送dist静态资源目录至nignx服务器
gitlab 生成项目
1. 使用vue-cli生成一个demo项目
webhooks 配置
1. 生成webhooks token（务必保存，仅会出现一次，配置webhooks时需要）
2. 将token 配置到代码仓库中
网址：http://jenkins的ip/generic-webhook-trigger/invoke?token=gitlab生成的token
3. 如果gitlab 服务器部署在本地，需要允许本地网络请求
nginx 配置
监听9090端口，返回usr/vue-demo/dist/index.html
jenkins 创建项目
1. 这里我使用了自由风格项目
2. 源码管理配置，由于刚才在准备工作已经配置好了gitlab用户，这里我选择ssh方式。勾选git，前往gitlab 克隆项目中复制ssh 连接填入。选中ssh配置的root用户，并且监听main分支。
3. 构建触发器配置，勾选Generic Webhook Trigger插件，在token中填写刚才在gitlab 的访问令牌中的token。
4. 构建环境配置，选择上面配置好的nodeJS
5. 构建shell配置，安装依赖并且打包静态资源，生成dist目录
6. 构建后操作配置，借助publish over ssh插件，选择刚才配置的服务名，Source Files 匹配dist目录下所有文件，复制到nginx 服务器usr/vue-demo目录下，到此为止便完成了CI CD全部流程
测试
1. 提交代码
2. jenkins 触发构建
3. nginx 服务器更新
