这是第 175 篇不掺水的原创，想获取更多原创好文，请搜索公众号关注我们吧~ 本文首发于政采云前端博客：0基础实现项目自动化部署
前言
作为一个前端你还在手动 npm run build 吗？还在手动将 dist 文件夹放到服务器上吗？Oh！这样的方法太 Low 了，你在手动打包部署的时候，我们已经通过自动化部署完成了繁琐的手动操作。心动吗？赶紧上车吧！
GitlabCI 和 Jenkins
目前主流的自动化部署方案有 Jenkins 和 GitlabCI。相比于 Jenkins，GitlabCI 的优势在于更加轻量级、配置更简单、方便测试和集成。
而 Jenkins 的优势在于耦合度低、插件丰富，更有 GitlabCI 不存在的功能，比如看编译状况统计等。
今天我们就来说说 Jenkins 自动化部署。在此之前，我们先了解下运行它的容器化应用 K8S。
K8S 简介
KubeSphere 是在目前主流容器调度平台 Kubernetes (k8s) 之上构建的企业级分布式多租户容器平台，提供简单易用的操作界面以及向导式操作方式。在降低用户使用容器调度平台学习成本的同时，极大减轻开发、测试、运维日常工作的复杂度，旨在解决 Kubernetes 本身存在的存储、网络、安全和易用性等痛点。除此之外，平台已经整合并优化了多个适用于容器场景的功能模块，以完整的解决方案帮助企业轻松应对敏捷开发与自动化运维、微服务治理、多租户管理、工作负载和集群管理、服务与网络管理、应用编排与管理、镜像仓库管和存储管理等业务场景。
今天我们运用其自动化运维能力来搭建一个自动化构建部署平台。
实现步骤
第一步： 创建一个项目并发布到 GitHub 上。 第二步： Docker 中启动一个 Tomcat，将部署空间映射到桌面。 第三步：在 Docker 中创建一个 Jenkins 并对其做配置。 注意：此处 Jenkins 的打包构建地址与 Tomcat 部署空间的地址一致。 第四步：设置 Jenkins 触发器并在 Github 中配置 WebHooks。 第五步：配置 Jenkins 需要执行的 shell 脚本。 第六步：将代码提交到 GitHub 。 第七步：查看网页更新。
1、创建一个项目并发布到 GitHub 上
创建一个空的仓库（这里我们使用码云，因为 GitHub 为外网，在文件传输与访问上相对较慢）。
将仓库 clone 到本地。
在本地新建一个项目（这里我们新建一个 Vue 项目）。
将本地的项目 push 到远端仓库。
2、Docker 中启动一个 Tomcat，将部署空间映射到桌面
在使用 Docker 之前，我们首先需要明白一些基本知识。
什么是 Docker ？
1、要知道两个东西 镜像 和 容器。 类比 let weihao = new Person() 。 类 就好比 镜像。 实例 就好比 容器。
2、记住几个常用命令即可：
- docker search [镜像名称] 搜索镜像
- docker images 查看本地镜像
- docker pull [镜像名] 远程仓库拉镜像
- docker run [镜像名] 使用镜像生成容器
- docker start [容器名] 启动容器
- ctrl + P + Q 退出容器
- docker exec -it 容器 ID /bin/bash: 进入容器
当然你也可以通过 docker --help 查询相应命令。
启动一个 Tomcat
使用命令
docker search tomcat
查询到镜像
下载镜像
docker pull images
使用 Docker 启动 Tomcat，并将 8080 端口映射到本地 8888 端口。
运行起来后我们就可以通过 localhost:8888 访问到本地的 Tomcat 了。
尝试使用文件夹 /Users/temp 映射到 Tomcat 下的 webapps 映射到本地
执行命令
docker run -it -p 8888:8080 -v /Users/temp:/usr/local/tomcat/webapps/my-project --name tomcat tomcat
在本地新建测试 HTML 文件，并放入之前指定映射的本地地址。
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有趣的老凌</title>
</head>
<body>
<div>相信美好每一天</div>
</body>
</html>
访问以下路径就能生效
3、在 Docker 中创建一个 Jenkins 并对其做配置
简单介绍一下 Jenkins
Jenkins 是一款开源 CI&CD 软件，用于自动化各种任务，包括构建、测试和部署软件的流程化管理软件是一款插件式的管理软件，方便功能扩展，目前有几百个插件可以使用，覆盖了版本管控、构建工具、代码质量、构建通知、集成外部系统、UI 定制等。
使用 Docker 启动一个 Jenkins
执行命令将本地文件夹 /Users/temp 映射到 Jenkins，并将其运行
docker run -it -p 9999:8080 -p 50000:50000 -v /Users/temp:/var/tomcatspace --name jenkins1 jenkins/jenkins
访问本地 9999 端口我们就可以看到刚刚启动的 Jenkins。
注：关于管理员密码你可以在控制台获取，也可以在 initialAdminPassword 文件夹中找到它
选择推荐安装的插件就可以进入安装页面了
配置 Jenkins
新建 Item
基本配置信息，这边我们选择 Freestyle project（自由风格项目）
配置基本信息，这边我们选择 丢弃旧的构建。 为什么要丢弃旧的构建？
添加凭据
注：此处的凭据是 Git 的登录账号和密码。
设置仓库地址
Q：为什么无法链接仓库？ A：如果你是内网的 Git，需要保证 Jenkins 能访问到 Git。如果你是外网的 Git，需要保证 Git 仓库是 public (开源) 的。
4、设置 Jenkins 触发器并在 Github 中配置 WebHooks
设置触发器
你可以通过以下方式触发
http://localhost:9999/job/weihao-project/build?token=goujian
在 Github 中配置 WebHooks
当然现 localhost 不能被外网访问到，本地环境无法添加。这里我们使用 PostMan 或本地浏览器访问来手动触发 触发器。
选择构建环境
5、配置 Jenkins 需要执行的 shell 脚本
在 Jenkins 配置中新增构建步骤
这边我们选择 执行 shell
cd /var/jenkins_home/workspace/weihao-project/
node -v
npm -v
echo '开始安装依赖'
npm config set registry http://registry.npm.taobao.org/
npm config get registry
npm i
echo '依赖安装完毕'
echo '开始打包'
npm run build
echo '打包完毕'
echo '准备部署'
cp -r /var/jenkins_home/workspace/weihao-project/dist/* /var/tomcatspace
配置完成后当我们访问触发器时，就会触发打包了。
因为上文的触发器只能在内网访问，所以我们只能在内网调试。
但在真实环境使用中实现成功后将是如下流程：
- 开发人员提交代码
- GitHub 访问触发器
- Jenkins 执行 shell
- 部署 Tomcat/Nginx
- 查看网页更新
如此我们便搭建了一个完整的自动化部署项目。
项目地址
项目地址：自动化部署项目
参考文档
推荐阅读
开源作品
- 政采云前端小报
开源地址 www.zoo.team/openweekly/ (小报官网首页有微信交流群)
- 商品选择 sku 插件
招贤纳士
政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云研发部，Base 在风景如画的杭州。团队现有 80 余个前端小伙伴，平均年龄 27 岁，近 4 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推动并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。
如果你想改变一直被事折腾，希望开始能折腾事；如果你想改变一直被告诫需要多些想法，却无从破局；如果你想改变你有能力去做成那个结果，却不需要你；如果你想改变你想做成的事需要一个团队去支撑，但没你带人的位置；如果你想改变既定的节奏，将会是“5 年工作时间 3 年工作经验”；如果你想改变本来悟性不错，但总是有那一层窗户纸的模糊… 如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程，亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我觉得我们该聊聊。任何时间，等着你写点什么，发给 ZooTeam@cai-inc.com
