0基础实现项目自动化部署

👆 这是第 175 篇不掺水的原创，想要了解更多，请戳下方卡片关注我们吧～

0基础实现项目自动化部署

前言

作为一个前端你还在手动 npm run build 吗？还在手动将 dist 文件夹放到服务器上吗？Oh！这样的方法太 Low 了，你在手动打包部署的时候，我们已经通过自动化部署完成了繁琐的手动操作。心动吗？赶紧上车吧！

GitlabCI 和 Jenkins

目前主流的自动化部署方案有 Jenkins 和 GitlabCI。相比于 Jenkins，GitlabCI 的优势在于更加轻量级、配置更简单、方便测试和集成。

而 Jenkins 的优势在于耦合度低、插件丰富，更有 GitlabCI 不存在的功能，比如看编译状况统计等。

今天我们就来说说 Jenkins 自动化部署。在此之前，我们先了解下运行它的容器化应用 K8S。

K8S 简介

KubeSphere(https://v3-2.docs.kubesphere.io/zh/docs/introduction/what-is-kubesphere/) 是在目前主流容器调度平台 Kubernetes (k8s)(https://baike.baidu.com/item/kubernetes/22864162?fr=aladdin) 之上构建的企业级分布式多租户容器平台，提供简单易用的操作界面以及向导式操作方式。在降低用户使用容器调度平台学习成本的同时，极大减轻开发、测试、运维日常工作的复杂度，旨在解决 Kubernetes 本身存在的存储、网络、安全和易用性等痛点。除此之外，平台已经整合并优化了多个适用于容器场景的功能模块，以完整的解决方案帮助企业轻松应对敏捷开发与自动化运维、微服务治理、多租户管理、工作负载和集群管理、服务与网络管理、应用编排与管理、镜像仓库管和存储管理等业务场景。

今天我们运用其自动化运维能力来搭建一个自动化构建部署平台。

实现步骤

第一步：创建一个项目并发布到 GitHub 上。第二步：Docker 中启动一个 Tomcat，将部署空间映射到桌面。第三步：在 Docker 中创建一个 Jenkins 并对其做配置。注意：此处 Jenkins 的打包构建地址与 Tomcat 部署空间的地址一致。第四步：设置 Jenkins 触发器并在 Github 中配置 WebHooks。第五步：配置 Jenkins 需要执行的 shell 脚本。第六步：将代码提交到 GitHub 。第七步：查看网页更新。

1、创建一个项目并发布到 GitHub 上

创建一个空的仓库（这里我们使用码云(https://gitee.com/)，因为 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>

访问以下路径就能生效

“
http://localhost:8888/my-project/test.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(https://zinyan.com/?p=465)（自由风格项目）

配置基本信息，这边我们选择 丢弃旧的构建。为什么要丢弃旧的构建？(https://blog.csdn.net/xl_name/article/details/79626238)

添加凭据

注：此处的凭据是 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

查看网页更新

如此我们便搭建了一个完整的自动化部署项目。

项目地址

项目地址：自动化部署项目(https://gitee.com/mslimyjj/weihao_project)

参考文档

《快来看看如何手动搭建自动化部署系统》(https://www.bilibili.com/video/BV1Qy4y1L7Nj/?spm_id_from=333.851.header_right.fav_list.click)

《Jenkins 环境配置和项目创建》(https://blog.csdn.net/m0_59439550/article/details/122848023)

看完两件事

如果你觉得这篇内容对你挺有启发，我想邀请你帮我两件小事

1.点个「在看」，让更多人也能看到这篇内容（点了「在看」，bug -1 😊）

2.关注公众号「政采云前端」，持续为你推送精选好文

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云研发部，Base 在风景如画的杭州。团队现有 80 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推动并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

如果你想改变一直被事折腾，希望开始能折腾事；如果你想改变一直被告诫需要多些想法，却无从破局；如果你想改变你有能力去做成那个结果，却不需要你；如果你想改变你想做成的事需要一个团队去支撑，但没你带人的位置；如果你想改变既定的节奏，将会是“5 年工作时间 3 年工作经验”；如果你想改变本来悟性不错，但总是有那一层窗户纸的模糊… 如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程，亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我觉得我们该聊聊。任何时间，等着你写点什么，发给 ZooTeam@cai-inc.com