背景

站在一个前端的视角下，一个的项目从开发到上线，通常会经历这么几个阶段：本地开发、与服务端联调、进行测试、部署生产环境。对于前端不会太关心项目如何部署，确实这本是运维同学的工作，但作为一个前端开发也不能一直在本地写页面来自娱自乐，因此，我觉得还是有必要去了解如何部署项目。

CI/CD

先介绍一下什么是CI/CD,CI指持续集成，表示应用代码进行构建、测试等,CD指持续交付或持续部署，表示开发人员将代码提交至git仓库，由运维人员部署到生产环境中。简而言之，就是应用的构建和部署

搭建Jenkins

接下来，我们开始一步一步的将本地项目部署到生产环境。我选择了比较主流的方式，使用jenkins实现部署。
先简单介绍一下前端应用的部署流程：

前端应用打包编译

打包成Docker镜像

运行Docker镜像

安装Jenkins

首先，我们需要先在服务器上安装Jenkins。使用Docker拉取了官方推荐的Jenkins镜像jenkinsci/blueocean，即：

docker pull jenkinsci/blueocean

运行Jenkins

通过Docker拉取完Jenkins后，来运行起来Jenkins:

docker run -d --name my-jenkins -p 8080:8080 --user root -v /var/run/docker.sock:/var/run/docker.sock jenkinsci/blueocean

其中，--name后的my-jenkins是我的docker容器名，这个可以随意的起;
后面的-v /var/run/docker.sock:/var/run/docker.sock，是因为Jenkins是通过Docker运行的一个容器，当我们构建前端镜像时，这时候会出现在Docker中运行Docker（即Docker-in-Docker），通过这种方式可以与顶层的Docker建立连接，这样我们在Jenkins容器中构建的Docer镜像就会被创建到顶层Docker中,就可以直接通过docker run运行该镜像；
如果大家不需要将前端应用的构建产物打包成Docker镜像，也可以直接通过docker run -p 8080:8080 jenkinsci/blueocean直接启动Jenkins

运行完成后我们输入：${你的服务器ip}:8080/,应该可以看到Jenkins已经启动：

配置Jenkins

1. 解锁Jenkins

首先我们进入到刚才启动的docker容器：

docker exec -it 28c3e9171965 /bin/bash

cat /var/jenkins_home/secrets/initialAdminPassword

这是可以看到这个Jenkins的需要的管理员密码：

输入这个密码后，点击继续就完成啦

2. 安装推荐的插件

一张截图就可以说明一切：

这个时候可以玩会手机，安静的等待完成就好了

安装完成以后，自己注册一个账号，后面登陆Jenkins需要用到，后面还有一个实例配置的页面，也可以直接点击完成。

现在我们就可以进入Jenkins进行一些部署相关的配置

3. 安装node

作为一个前端项目，打包需要有node环境，所以第一步，我们在Jenkins中安装node:

进入插件管理，然后搜索可选插件node

这样选好以后点击Install without restart，然后等待他安装完成

下一步进入工具配置

找到NodeJs,然后这样配置一下：

点击应用、保存就可以了

4. 验证node

接下来我们创建一个构建脚本：比如输出node版本，验证一下我们的node命令是否可用：

选择第一个，然后随便输入一个名字：

这时，会进入到一个配置页面：

直接配置好对应的内容，找到构建环境选择这个Node,然后选择执行shell

保存之后点击立即构建

最后：

我们可以看到，已经打印出了对应的node版本。到目前为止，已经完成了Node插件的安装和验证～

5. 安装SSH

在插件管理中搜索SSH，选择Publish Over SSH

使用Jenkins打包前端应用

到目前为止，Jenkins的安装和响应配置已经完成，接下来就开始使用Jenkins进行前端应用的打包部署。

创建前端项目

首先，我们先在gitHub上创建一个新的前端项目，这个项目只是做一个部署的展示，这里我使用vue脚手架快速创建了一个前端项目：

新建Jenkins应用

接下来我们在Jenkins平台中，新建一个应用用于构建刚才创建的前端项目：

选择构建自由风格的项目：

点击确定后,进入应用的配置页面，此时我们配置对应的git仓库：

SSH方式拉取gitHub代码

生成SSH key：进入当前Jenkins的Docker容器：docker exec -it ${容器id} bash, 执行命令ssh-keygen -t rsa，一直点击回车即可生成ssh
查看公钥执行命令cat ~/.ssh/id_rsa.pub，即可查看公钥，如图：

将公钥添加到Git项目中在git项目中找到settings下的Deploy keys, 然后点击Add Deoloy key:

将刚才生成的公钥设置进来：

此时，在git仓库中已经有了一个SSH。

在Jenkins中设置私钥首先我们查看私钥，在docker容器中使用命令cat ~/.ssh/id_rsa,即可查看生产的私钥：

然后在Jenkins平台中进入系统配置 -> 凭据管理

在凭据管理中我们可以添加凭据:

这里要注意选择SSH Username with private key，在下面Private Key中将刚才的私钥填入

在Jenkins应用中使用该凭证

我们进入之前在Jenkins平台创建的应用，点击配置 -> 源码管理，这里的git仓库使用ssh的链接，然后选择刚才添加的凭证

选择构建环境配置构建命令：

这里要注意github上的主分支已经是main，而Jenkins默认的指定分支依然为master

此时，Jenkins的基本配置已经完成，我们可以点击一下立即构建看下效果：

到这里我们的git应用就可以在Jenkins平台进行打包了

构建镜像

此时，我们需要将项目打包成docker镜像，那么就需要我们在项目中新增一个Dockerfile，代码如下：

FROM nginx
COPY dist/ /usr/share/nginx/html/

EXPOSE 80

之后我们在Jenkins中添加对应的shell脚本:

// 打包docker镜像
docker build -t fe-jenkins .
// 在8085端口运行docker镜像
docker run -itd -p 8085:80 --name fe-jenkins fe-jenkins

运行项目

添加了上面构建/运行镜像的命令后，我们再点击立即构建：

等待构建结果，我们可以看到构建已经成功。

验证

最终我们打开${ip}:8085链接（其中8085端口为刚才docker run设置的端口），查看页面效果：

到这里，我们已经将前端应用部署到了服务器上。

最后

上面我们介绍了如何从零开始：部署JenKins、在Jenkins平台管理项目仓库、项目打包、构建/运行Docker镜像，最终将一个前端的项目部署到我们的服务器上完整流程。当然这里也只是实现了最基础的功能，如果想做的更完善还需要配置nginx、部署后端应用等相关操作。由于这篇文章篇幅较长，所以会考虑将后续的功能放在之后的文章去完善。

感谢阅读 🙏

作为前端，我是这样从零实现CI/CD的

背景