在软件工程中，CI/CD通常指的是持续集成和持续交付或持续部署的组合实践。CI/CD 通过在应用程序的构建、测试和部署中实施自动化，在开发和运营团队之间架起了桥梁。当我们有了 CI/CD 的系统之后，我们就只需要编写代码，剩下的步骤都交给 CI/CD 系统来处理，这极大地解放了我们的双手，提升了开发效率。Jenkins 是一款以插件化的方式实现 CI/CD 的软件，提供超过1000 个插件来支持构建、部署、自动化的需求。对于大厂来说都有自己比较成熟的 CI/CD 自动化方案，对于独立开发者来说，我们可以借助现有的比较成熟的开源工具做一套自己的自动化流水线。本文将基于jenkins结合笔者本人的前端项目来讲解前端自动化构建到自动化部署的整套流程。
1.linux下ubuntu环境安装Jenkins
安装java环境: sudo apt-get install openjdk-8-jdk
将存储库密钥添加到系统: wget -q -O - https://pkg.jenkins.io/debian/jenkins-ci.org.key | sudo apt-key add -
将Debian包存储库地址附加到服务器的sources.list中: echo deb http://pkg.jenkins.io/debian-stable binary/ | sudo tee /etc/apt/sources.list.d/jenkins.list
运行update ，以便apt-get将使用新的存储库（此处可能需要试很多次才能 update 成功）: sudo apt-get -y update
安装Jenkins及其依赖项： sudo apt-get install jenkins
2.Jenkins的启动和相关配置
Jekkins启动命令： sudo systemctl start jenkins
使用status命令来验证它是否成功启动：sudo systemctl status jenkins
如上图所示，说明jenkins已经运行成功，jenkins的默认运行端口时8080，所以我们还需要开墙：
sudo ufw allow 8080
检查UFW的状态可以看到新的规则：
sudo ufw status
开墙之后，外网可以随意访问，因此可以通过自己的电脑端访问jenkins 服务：http:// ip_address :8080。访问该地址我们可以看见 “解锁Jenkins” 屏幕，并且页面显示了初始密码的位置，只需要在终端窗口中按照初始密码的位置打开，并将其粘贴到 “管理员密码” 输入框中。
点击继续，下一个屏幕提供安装建议的插件或选择特定插件的选项，我们将点击“安装建议的插件”选项，将立即开始安装过程。安装完成后，系统提示设置第一个管理用户，我们在此自己设置管理员账户，完成后即可进入到Jenkins首页界面。
jenkins默认开启端口是8080，有时候由于端口占用需要修改如下：
- 检查 /etc/init.d/jenkins 脚本，修改 do_start 函数的 check_tcp_port 命令，端口号从 8080 换成 8082：
- 修改 /etc/default/jenkins 文件，将端口 8080 改成 8082
- 查看端口情况：sudo netstat -plntu
- 重启Jenkins： sudo systemctl restart jenkins
3.创建Jenkins任务并实现git工具的hooks功能
第一次登录Jenkins工作台后点击创建一个新任务 ——> 选择自由风格的软件项目，并起一个名字(此处笔者取名testjenkins) —> 至此基础准备工作已经完成，接下来需要配置相关功能。
在向github/码云等远程仓库push我们的代码时，需要触发jenkins知道我们提交了代码，这是代码自动构建和自动部署流程能够进行的前提条件，这个过程实现原理：在远程git仓库上配置一个Jenkins服务器的接口地址，当本地向远端仓库发起push时，远端仓库会向配置的Jenkins服务器的接口地址发起一个带参数的请求，Jenkins服务器就会接收并拉取到提交的代码。整个流程的配置步骤如下：
- 打开新创建的任务，选择配置 - 源码管理，选择Git, 在repositry URL添加远程仓库地址(基于国内github请求的网络问题，此处选择国内码云Gitee地址)，在 credentials里添加Gitee 的用户和密码，在选择指定分支默认master。
2. jenkins接受和同步git的源代码，需要安装 Generic Webhook Trigger Plugin 插件，插件安装流程：jenkins首页点击Manage Jenkins ——> 在'管理Jenkins'页面点击Manage Jenkins ——> 搜索Generic Webhook Trigger Plugin并安装。
3.上一步中安装的触发器插件功能很强大，可以根据不同的触发参数触发不同的构建操作。如下图中勾选 Generic Webhook Trigger即可。
4.仓库配置钩子 —— 此处以码云为例（github的配置基本一致），进入码云项目主页后，点击管理-webhooks-添加，可以看到下图中的表单，URL地址填写的格式为：http://:@<Jenkins IP地址>:端口/generic-webhook-trigger/invoke。这里的 User ID 和 API Token是可以从jenkins 中取到的：Manage Jenkins ——> Manage Users ——> 用户列表的下拉符号选择设置 ——> User ID就是jenkins账号，刷新token可以取到 API Token。 webhook的密码填写自己最开始创建jenkins用户时候的密码。勾选push事件会在提交代码完成之后触发钩子推送代码到 jenkins 部署。
5. 测试钩子 —— 上面的配置完成之后可以点击测试按钮，有正常的请求和返回，就表示配置成功。也可以试下本地提交代码，提交代码后，jenkins也会开始一个任务,目前我们没有配置任务开始后让它做什么，所以默认它只会在你提交新代码后，将新代码拉取到jenkins服务器上。
4.实现自动化构建流程
上述流程中 git push 操作触发钩子后，Jenkins就要开始工作了，自动化的构建任务可以有很多种，比如说安装升级依赖包，单元测试，e2e测试，压缩静态资源，批量重命名等等，无论是npm script还是webpack，gulp之类的工作流，你之前在本地能做的，在这里同样可以做到。我们这里只演示几个基本常用的工作流程，安装依赖包->打包。这个自动化构建的配置流程如下：
- 先要在jenkins里面配置node的环境，可以通过配置环境变量的方式引入node，也可以通过安装插件的方式，这里使用了插件的方式，安装一下nvm wrapper这个插件（安装插件的过程可以参照上面的3.2 步骤）。
- 在jenkins任务的'构建环境'勾选 'Run the build in an NVM managed environment',同事选择node版本。
3. 点击'构建'，选择 ‘执行 shell’, 在输入框输入脚本命令，多个命令使用&&分开。
4. 本地修改一下代码push测试一下（也可以点击立即构建测试），点击本次触发的那个任务，选择控制台输出，将会看到Jenkins在云端执行的过程。如果构建成功就可以看到构建打包后的产物。左边区域可以看到当前构建流程是否成功或者失败。
5.实现自动化部署流程
- 首先在Jenkins上装一个插件Publish Over SSH，我们将通过这个工具实现服务器部署功能。在部署代码之前我们需要在自己的服务器上新建一个文件夹用来接受Jenkins 传过来的代码，如下图我在服务建了一个文件夹 testjenkins。
2. Jenkins想要访问服务器并且部署代码必须登录服务器才可以（就像我们自己手动部署一样都需要验证服务登录），这里有两种登录验证方式：一种是ssh验证，一种是密码验证。在jenkins首页点击 Manage Jenkins ——> Configure System ——> 滚动到Publish over SSH。如下图所示是我们需要填写的登陆信息：passphrase填写自己服务器的登录密码（此处已经隐藏）；SSH Servers name 填写标志的名称，而可以随意填写；SSH Servers Hostname 填写自己服务的外网IP 地址；SSH Servers Username 填写服务器的登录用户名； SSH Servers Remote Directory 填写自己在服务器创建的接受代码的文件目录的路径。配置完成之后点击一下点击Test Configuration测试一下是否可以连接上，如果成功会返回success，失败会返回报错信息，根据报错信息改正即可。
3. 进入我们创建的任务，点击构建，增加几行代码，意思是将打包编译的文件压缩，因为我们要远程传输服务器。
4. 增加构建后操作步骤，选择Send files or execute commands over SSH，即当前的配置是在代码文件传输到服务器之后的操作：Source files ：填写你要传输的文件路径；Remove prefix ：要去掉的前缀；Remote directory ：写你要部署在远程服务器的那个目录地址下（不写就是SSH Servers配置里默认远程目录）；Exec command ：传输完了要执行的命令，这里执行了解压缩和解压缩完成后删除压缩包2个命令。
5. 至此整个自动化部署流程已经完成，我们去服务其上看看是否有拿到jenkins 推过来的代码。后学nginx的配置流程此处不再赘述。
