chenglong

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

notion image

👆 这是第 175 篇不掺水的原创,想要了解更多,请戳下方卡片关注我们吧~
0基础实现项目自动化部署
notion image

前言

作为一个前端你还在手动 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

Copyright © 2024 chenglong

logo