【每日一题NO.79】说下 CI/CD 搭建的流程-技术圈

CI/CD

CI 代表着持续集成，CD 代表着持续交付和持续部署。简单来说，就是在本地更改代码---git push 推送到代码托管---自动安装依赖，打包测试部署等(开发环境一般自动，生产环境一般需要手动点击按钮上线)

自动化流程的必要性

可以避免很多问题，少解决很多冲突，假设前端团队有 6 个人，每个人电脑的系统、node 版本、npm 版本都有可能不一样，就算是规定统一了，每个人拉取代码源仓库 build 出来的产物也可能不一样，这样会产生几个问题：

耗时：每个人都需要去构建
易冲突：当 git 做 pull、merge、push 等的时候一不小心就会产生各种不必要的冲突要去解决，非常的耗时和不愉快
缓存失效：构建出来的静态文件的 hash 不好控制，容易在客户端失去缓存，即使在 webpack 中设置了 contenthash 等等优化

大体的搭建过程

1. 准备一个项目，推到远程仓库

可以是 GitHub、gitlab、码云等，这里以 GitHub+Jenkins 为例

2. 准备一个能外网访问的服务器

公司服务器、自己买的 ECS 服务器，要是非用你自己的电脑当服务器也可以，保证外网可以访问即可，比如使用 ngrok。

3. 服务器安装 Jenkins

4. Jenkins 的初始化

①jenkins 的默认端口是 8080,启动成功后在浏览器打开。
②进入后会让我们输管理员密码，打开网页上提示路径下的文件，复制密码粘贴输入即可。
③然后会让安装需要的插件，此处选默认即可，等待安装完成。
④创建一个管理员账户。
⑤创建一个新任务，选择自由风格软件项目
⑥安装 Generic Webhook Trigger Plugin 插件，后面 git 钩子要用到

5. 实现 git 钩子

首先要实现一个git钩子功能，就是向GitHub、码云等远程仓库push代码时，Jenkins能知道我们提交代码，这是自动构建自动部署的前提；钩子的实现原理是在远端仓库上配置一个Jenkins服务器的接口地址，当本地向远端仓库发起push时，远端仓库会向配置的Jenkins服务器的接口地址发起一个带参数的请求，Jenkins收到后开始工作。
Jenkins中打开刚创建的任务，选择配置，添加远程仓库地址，配置登录名和密码及其他
添加触发器，勾选上面安装的Generic Webhook Trigger Plugin，设置一个token
仓库配置钩子 GitHub 的 webhook 的url设置，http://服务器IP:8080/generic-webhook-trigger/invoke?token=sunny；创建完成，可以看到Jenkins的项目左侧栏构建执行状态里将会出现一个任务；工作目录里拉取远程仓库的代码；另外，也可以试一下本地提交代码，提交代码之后，Jenkins也会开始一个任务，目前没有配置任务开始后让它做什么，所以默认它只会在你提交新代码后，将新代码拉取到Jenkins服务器上，到此为止，git钩子配置完成

6. 实现自动化构建

自动化的构建任务可以有很多种，比如说安装升级依赖包、单元测试、e2e测试、压缩静态资源，批量重命名等等，无论是npm script 还是webpack，gulp之类的工作流，之前在本地能做的，在这里同样可以做。
作为演示，这里只演示三个基本常用的工作流程，安装依赖包--单元测试--打包，也就是下面这三个命令：npm install，npm run test，npm run build
想在Jenkins里面执行npm命令，先要在Jenkins里面配置node环境，可以通过配置环境变量的方式引入node，也可以通过安装插件的方式，这里使用插件的方式，安装下nvm wrapper这个插件。打开刚刚的Jenkins任务，点击配置里面的构建环境，勾选这个插件，并指定一个node版本。
点击构建，把要执行的命令输入进去，多个命令使用&&分开，保存
此时本地修改以下代码push测试一下(也可以点击立即构建测试)，点击本次触发的那个任务，选择控制台输出，将会看到Jenkins在云端指定的过程
命令行最后一行是Finished状态的，如果是success则证明执行的任务都顺利进行，如果是failure则证明中间有重大错误导致任务失败，如果是unstable代表虽然有些小问题但是不妨碍任务，failure和unstable状态下的可以去命令行看下错误输出，看看哪里出现了问题
如果上一步是success，点击项目的工作空间，将会发现多了dist和node_modules两个文件夹。
至此，我们搭建了一个简易版构建工作流程，构建完成了，接下来需要自动化部署

7. 实现自动化部署

首先，先在Jenkins上装一个Publish Over SSH，我们通过这个工具实现服务器部署功能
在要部署代码的服务器上创建一个文件夹用于接收Jenkins传过来的代码，我在服务器上建了一个 testing文件夹。
Jenkins想要往服务器上部署代码必须登录服务器才可以，这里有两种登录方式，一种是ssh验证，一种是密码验证，就像自己登录自己的服务器：可以使用ssh免密码登录也可以每次输入密码登录；系统管理-系统设置里面找到Publish over SSH 这一项。
配置完成之后，点击Test Configuration 测试一下是否可以链接上，如果成功返回success，失败会返回报错信息，根据报错信息改正即可
进入我们创建的任务，点击构建，增加2行代码，代表着将dist里面的东西打包一个文件，因为我们要传输。
点击构建后操作，增加构建后操作步骤，选择send build artificial over SSH。
现在当我们把本地项目修改一下，为Jenkins后发出一个git push，过一会就会发现我们的服务器上已经部署好最新的代码。
至此，自动化部署已经完成，但是如果过程中有异常怎么办，或是我们想知道每次Jenkins运行的日志及运行结果，我们可以通过配置邮件服务来让Jenkins每次完成任务之后通知相关人员。

8. 可以添加邮件提醒

这里我们不用E-mail Notification，因为它的邮件服务功能太少，无法自定义邮件内容及自定义触发钩子，而且只能在异常情况下才能发邮件。我们使用Editable Email Notification 这个。
打开系统管理--系统配置--Extended Email Notification，不是管理系统--系统配置--邮件通知，千万不要配置错误，否则不起作用。配置一下用来发邮件的邮箱。
要是用别的厂家的邮箱服务就查下别的邮箱厂家smtp怎么配，用qq邮箱的除了user Name和password，其他的一样。另外password写的不是qq邮箱的密码，而是开启smtp服务后发短信获取的密码。
打开创建的那个任务，增加构建后操作步骤，选择Editable Email Notification，Project Recipient List 那里写你要发给谁邮件，可以多个邮箱可以用分号隔开
然后点击Advanced Setting-Triggers-Add Trigger，选择 always，意思是无论什么情况下任务执行完成就发邮件，也可以选择其他模式，比如任务执行异常才发邮件
现在当我们在本地修改代码后发出一个git push，Jenkins自动构建部署完成之后就会发一封邮件，邮件附件会有本次任务的日志
至此，我们的邮件提醒功能也配置完成了

所有《每日一题》的知识大纲索引脑图整理在此：https://www.yuque.com/dfe_evernote/interview/everyday
你也可以点击文末的 “阅读原文” 快速跳转

END

愿你历尽千帆，归来仍是少年。