前端自定义实现CI/CD
初识Docker
在我们开发过程中肯定存在这么一个场景，我们开发完一套程序，在自己本机运行正常；
测试阶段，部署到测试环境发现跑不起来，解决完之后；
上线阶段，发现线上环境跑不起来~
那要怎么解决呢？
虚拟机
初期，我们使用虚拟机技术，将可运行的环境的进行复制粘贴
但是，虚拟机由于需要重新部署一个底层操作系统，而一个操作系统动则几G到几十G，占用内存，且启动也相对缓慢费时的
那么，有没有一种技术可以鱼与熊掌兼得，既能隔离环境，又方便部署呢？
容器技术
容器一词的英文是container，其实container还有集装箱的意思，集装箱绝对是商业史上了不起的一项发明，大大降低了海洋贸易运输成本。让我们来看看集装箱的好处：
- 集装箱之间相互隔离
- 长期反复使用
- 快速装载和卸载
- 规格标准，在港口和船上都可以摆放
容器技术应运而生，与虚拟机有所不同
- 通过操作系统实现隔离不同，容器技术只隔离应用程序的运行时环境 （指运行时程序运行依赖的各种库以及配置），但容器之间可以共享同一个操作系统
- 占用资源更少，同样规格硬件上可以部署更多容器
- 启停速度更快，几乎瞬间启动
而Docker就是容器技术的集大成者
Docker中有这样几个概念：
- Dockerfile
- Image
- Container
类比一下，简单的把image理解为可执行程序，container就是运行起来的进程。
那么写程序需要源代码，那么"写"image就需要dockerfile，dockerfile就是image的源代码，docker就是"编译器"
这里我们使用Docker来模拟多台机器之前的写作，实现建议的CI/CD流程
Docker安装&使用
安装Docker
css
brew install --cask docker安装可视化界面
bash
# 从docker-hub中查找portainer镜像
docker search portainer
# 找到并安装
docker pull portainer/portainer
# 启动镜像
docker run -d -p 9000:9000 -name portainer -restart always -v /var/run/docker/sock:/var/run/docker.sock -v portainer_db:/data portainer/portainer或者通过Docker Dashboard启动即可
访问Portainer
localhost:9000
现在我们借助Docker来搭建一套CI/CD
CI之Jenkins
部署Jenkins
选择Jenkins镜像进行部署
默认情况下本机映射端口会在启动时自动分配，由于是自动分配，每次重启会变，这里为了演示方便，写死为60001
可以看到已经部署成功，秒启动
访问一下
找到初始密码
傻瓜式安装即可
可能需要多次重试安装才能完成所有插件的成功
也可以尝试将插件源改成国内的源
如清华源：https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json
创建管理员账号
进入主页
最好重启一下，让前面安装的插件生效
构建CI任务
配置git
生成ssh
进入jenkins控制台
生成ssh钥匙对
配置对应的公钥到gitlab
配置CI任务
配置源码拉取
配置ssh秘钥
配置构建脚本
bash
#!/bin/bash
#下载工作区npm包
npm install
#删除dist目录下的所有文件,dist目录即为当前jenkins工作区打包后的文件。
rm -rf ./dist/*
#执行打包命令
npm run build
#打包
zip -r dist.zip dist保存后触发手动触发一下构建
可以发现，报错了，查看下控制台日志
可以发现，缺少node环境和zip工具
配置构建环境
安装node环境
配置CI过程中注入node环境
安装zip工具
打开控制台
python
apt update && apt install zip触发构建
可以看到，已经构建成功
但是此时构建的结果是没有保留下来的
归档成品
重新构建，可以看到构建后的归档成品
至此，我们初步完成了构建流程
进一步，我们配置gitlab推送触发自动构建的过程
配置推送事件触发自动构建
生成token
在gitlab侧添加钩子
其中回调地址从上面可以看到为http://0.0.0.0:60001/project/Vue3，实际配置需要将IP替换为实际IP地址
点击测试一下
再进一步，我们把Jenkins的构建状态同步到gitlab
构建状态同步gitlab
配置Gitlab API权限
安装GitLab API插件
配置gitlab
生成api token令牌
jenkins配置gitlab
配置token
点击测试一下是否API是否可以调通
添加构建后操作------同步构建状态
重新构建一下，构建完成后可以看到gitlab项目有对应的流水线标识
至此，已经完成了CI的搭建
CD之WEB服务
安装SSH服务
web服务器我们直接采用Nginx镜像搭建，
为了开放ssh服务，我们这里开放22端口
接着，我们进入控制台，安装ssh服务
sql
apt update
apt install openssh-server安装完成后，我们需要开放ssh服务root登录权限
bash
# 需要安装vim以便修改配置
apt install vim
# 编辑ssh配置文件，开发root登录权限
vim etc/ssh/sshd_config
# 在文件末尾添加
# PermitRootLogin yes
重启ssh服务，生效配置
service ssh restart修改ssh登录密码
passwd测试SSH服务
回到jenkins控制台，测试连接下ssh服务
需要注意，docker启动的容器之间相互调用可以直接通过docker开放的ip
因此在jenkins中调用则通过172.17.0.2连接web-nginx
可以看到，连接没有问题
发送归档包到web服务器
安装插件Publish Over SSH
配置ssh连接配置
配置完可以点击右下角测试一下是否连接成功
增加构建后操作-发送&解压归档包
注意，这里用到了unzip，因此在Nginx服务器需要通过控制台安装下unzip工具
可以看到nginx服务目录下已经接收到了文件
但是我们直接访问nginx地址，发现页面不对，这是为什么？
因为默认我们实际的入口文件还要再深入一级目录，到/usr/share/nginx/html/dist
这里我们简单修改下nginx配置文件
修改nginx配置
arduino
vim etc/nginx/conf.d/default.conf修改根路径
重启nginx服务，生效配置
nginx -s reload至此，我们完成了web服务的配置
负载均衡
为了进一步模拟多机器部署情况，我们按照上面的方式多部署一台web服务
接着我们部署一台nginx服务负责转发服务
修改配置文件转发
arduino
vim etc/nginx/conf.d/default.conf
重启nginx服务，生效配置
nginx -s reload最后我们访问nginx服务0.0.0.0:9000，就会自动帮我们转发到已经配置好的两台web服务器上
Refrences：