以前总听说过CI/CD，那什么是CI/CD呢？平时开发过程中，使用到流水线，对项目进行构建，构建完成后，就能直接发布到测试环境，这个是如何实现的呢？
持续集成
什么是CI/CD
CI/CD是Continuous Integration and Continuous Delivery/Deployment的缩写，意思是持续集成和持续交付/部署。CI/CD是一种软件开发流程模型，旨在通过自动化和持续性的构建、测试、部署和交付过程，来提高软件开发和发布的效率和质量。CI/CD的目标是缩短软件开发和发布的周期，降低开发和发布的成本和风险，以满足快速变化和不断迭代的业务需求。
CI/CD主要包括三个环节：
本次，我们就需要自己实现一套 CI/CD 环境，实现前端页面快速集成、快速部署。
JENKINS环境配置
JENKINS基于Docker安装
详细步骤及介绍，还请查阅
JENKINS官方文档
以下摘录了，主要安装步骤：
docker network create jenkins
docker run --name jenkins-docker --rm --detach
--privileged --network jenkins --network-alias docker
--env DOCKER_TLS_CERTDIR=/certs
--volume jenkins-docker-certs:/certs/client
--volume jenkins-data:/var/jenkins_home
--publish 2376:2376
docker:dind --storage-driver overlay2
本地创建 Dockerfile 文件，文件内容如下
FROM jenkins/jenkins:2.414.1-jdk17
USER root
RUN apt-get update && apt-get install -y lsb-release
RUN curl -fsSLo /usr/share/keyrings/docker-archive-keyring.asc
https://download.docker.com/linux/debian/gpg
RUN echo "deb [arch=$(dpkg --print-architecture)
signed-by=/usr/share/keyrings/docker-archive-keyring.asc]
https://download.docker.com/linux/debian
$(lsb_release -cs) stable" > /etc/apt/sources.list.d/docker.list
RUN apt-get update && apt-get install -y docker-ce-cli
USER jenkins
RUN jenkins-plugin-cli --plugins "blueocean docker-workflow"
docker build -t myjenkins-blueocean:2.414.1-1 .
使用以下 docker run 命令在 Docker 中将自己的映像作为容器运行：myjenkins-blueocean:2.414.1-1
docker run --name jenkins-blueocean --restart=on-failure --detach
--network jenkins --env DOCKER_HOST=tcp://docker:2376
--env DOCKER_CERT_PATH=/certs/client --env DOCKER_TLS_VERIFY=1
--publish 8080:8080 --publish 50000:50000
--volume jenkins-data:/var/jenkins_home
--volume jenkins-docker-certs:/certs/client:ro
myjenkins-blueocean:2.414.1-1
JENKINS页面配置
点击8080进入Jenkins的页面，进行Jenkins的安装
安装过程中，遇到jenkins需要输入管理员密码，该密码在log日志里面，可以通过页面进行查看：
也可以通过命令行查看
sudo docker logs -f jenkins-blueocean
安装推荐的插件就可以了
这个时候，就只要耐心的等待
安装完成后，需要对用户信息，实例进行配置，这就完成了。
终于看到，我们的Jenkins的页面了
可以看出Docker安装Jenkins非常简单，减少了很多环境的配置工作。
关于，如何安装Docker环境，可以参照我的另外一篇文章如何通过Docker部署Vue项目？
流水线配置
由于，我们版本管理使用ssh方式，因此，需要先进行公私钥生成
ssh-keygen -t rsa
我们将公钥配置到gitLib中，私钥配置到jenkins中
在gitLib中，进行公钥配置
在jenkins中，进行私钥的配置
下面就是进行流水线的配置了
新建一个Item
使用freeStyle project
导入源码时，遇到了问题。
由于没有配置域名，需要设置主机IP。在docker的jenkins容器中，做如下配置
/etc/gitlab/gitlab.rb
在 gitlab.rb中，添加主机ip（自己电脑）
external_url 'http://172.31.136.104'
添加之后，继续报错
...
stderr: No ED25519 host key
...
需要修改安全策略，将Host Key Verification Strategy，设置为 No verification
在线打包配置
添加node支持，需要安装nodeJS。我这边是安装好的，还没有安装的，需要在可用插件去下载
接下来，需要在全局工具配置中，添加node的版本。下次使用的时候，会自动进行下载安装
添加构建脚本，这个和我们本地开发的保持一致就可以
最后，添加归档文件，就是build产生的文件
构建完成后，我们可以看到产物了
构建完成后，我们希望可以自动部署。下面看下如何进行自动部署吧
自动发布
自动化部署，主要是使用Publish Over SSH进行发布。首先，进行Publish Over SSH的安装
进行Publish Over SSH的配置。
前端服务器配置，详见
# 如何通过Docker部署Vue项目？但是，这里缺少ssh服务，因此，需要修改Dockerfile文件。完整的Dockerfile文件显示如下：
# 使用基础镜像
FROM centos:7.9.2009
# 安装SSH
RUN yum install -y openssh-server sudo
RUN sed -i 's/usepam yes/usepam no/g' /etc/ssh/sshd_config
RUN useradd admin
RUN echo "admin:admin" | chpasswd
RUN echo "admin all=(all) all" >> /etc/sudoers
RUN ssh-keygen -t dsa -f /etc/ssh/ssh_host_dsa_key
RUN ssh-keygen -t rsa -f /etc/ssh/ssh_host_rsa_key
RUN mkdir /var/run/sshd
# 安装nginx epel-release 为额外软件包的仓库
RUN yum install -y epel-release
RUN yum install -y nginx
# 配置nginx
COPY nginx.conf /etc/nginx/nginx.conf
RUN mkdir /app && chmod -R 777 /app
# 启动nginx服务 和 SSH服务
# 创建启动脚本
COPY start.sh /start.sh
RUN chmod +x /start.sh
# 在容器启动时运行启动脚本
CMD ["/start.sh"]
# 对外暴露 22 和 80
EXPOSE 22 80
运行下，我们来验证下。ssh连接，我这边设置的映射端口是1，密码是admin。成功连接！
➜ Demo ssh admin@xxx.31.136.104 -p 1
admin@xxx.31.136.104's password:
Environment:
LANG=zh_CN.UTF-8
LC_CTYPE=zh_CN.UTF-8
USER=admin
LOGNAME=admin
HOME=/home/admin
PATH=/usr/local/bin:/usr/bin
MAIL=/var/mail/admin
SHELL=/bin/bash
SSH_CLIENT=172.17.0.1 47998 22
SSH_CONNECTION=172.17.0.1 47998 172.17.0.3 22
SSH_TTY=/dev/pts/0
TERM=xterm-256color
[admin@c07141bd2b3b ~]$
80端口的情况，是可以访问的。内容还没有，所以现在显示的是500
现在，就可以在Jenkins进行配置了，要实现Jenkins的制品能够自动推送到前端服务器中。
打包流水的配置，编译后添加部署模块。其中，Verbose output in console一定要勾上，不然ssh日志不会展示，影响异常定位。
Source files：Jenkins打包后的文件，这里使用通配符，所有vue-project/dist/下的文件，包含vue-project/dist/
Remove prefix: 删除vue-project/dist/保留vue-project/dist/下的所有文件
Remote directory：目标服务器的目录，即上面配置的web服务器的目录（nginx配置的文件根目录）。
这里需要注意的是文件的权限。我们将/app/文件夹，使用chmod -R 777赋予所有用户对/app 目录的读写执行权限。
现在就构建成功了，前端页面可以正常显示。
好了，现在就可以看到，通过Jenkins编译，部署，实现页面显示。这种方式也是现在Devops非常重要的一环。针对前端开发的好处是，实现前端的自动化部署，不需要后端开发，手动部署了。非常棒~
