国产 Dev/Ops 工具 Jpom 的前端项目自动化部署实践

前言

之前写过两篇文章从 WebHooks实现项目CI/CD 到 # WebHooks配合Docker实现项目CI/CD,项目从CI/CD上得到质的变化,但是跟正真公司中项目自动化部署还是有不小的差距。今天就来试一下正规的项目自动化部署。我们公司是从Jenkins到Jpom的,所以我也是从Jpom入手,研究一下。

在我看来CI/CD只是 Dev/Ops 实践的一部分。Jpom的官网是这么说的

我们致力于为您提一款简而轻的低侵入式、在线构建、自动部署、日常运维、项目运维/监控软件。

正文

Jpom的部署

Jpom有Server端和Agent端需要安装,我们直接使用自动化安装服务命令就可以了

Server端

sh 复制代码
curl -fsSL https://jpom.top/docs/install.sh | bash -s Server jdk+default+service

Agent端

sh 复制代码
curl -fsSL https://jpom.top/docs/install.sh | bash -s Agent jdk+default+service

安装后我们就可以直接开始使用了,Jpom 服务端的默认端口是2122。此时您只需要在浏览器地址栏输入:http://您服务器的IP:2122, 即可访问到 Jpom 服务端。根据自己的喜好设置一个账号就可以。

这一步跳过就可以了

之后你可以正常的使用账号登录了

我们还可以通过设置Nginx,使得可以通过域名来访问。xxx为你所设置的域名解析值。这样我们就可以通过域名来访问了,而不是IP。

JSON 复制代码
server {
    listen 80 default_server; 
    server_name   xxx.你的域名;
    index index.html;
    location / {
      proxy_pass http://127.0.0.1:2122;
    }
  }

切换目录

通过这个按钮可以切换不同的目录,系统目录和功能管理

创建工作空间

工作空间可以这么理解,按环境分的话可以分为dev工作空间、test工作空间、prod工作空间,按前后端来分的话可以分为前端工作空间、后端工作空间。这个看你自己。

创建机器

创建完工作空间后,我们还需要一个机器,先来创建一个机器。

节点密码可以到这个文件夹下查看

bash 复制代码
/usr/local/jpom-agent/data/agent_authorize.json

为机器分配工作空间

有了工作空间和机器还不够,还需要将工作空间和机器进行关联。

这样切换不同的工作空间,相当于切换不同的机器。

创建项目仓库

我们需要创建项目仓库,这样才知道从哪里拉取代码。按照要求填写就行了。

设置项目构建配置

进入构建列表目录,新增一个构建项目,选择本地构建。

选择构建的仓库和分支

根据自己项目配置,编写构建的命令。项目比较多时,你也可以选择引入脚本模板,脚本模板里面还是写拉取依赖和项目打包命令

选择发布发布方式,我试了两种项目发布和SSH发布

项目发布
  1. 新增项目
  1. 选择项目
  1. 保存发布就行
SSH发布
  1. 新增SSH
  1. 配置路径

也是相当于设置项目在服务器中的位置

  1. 选择SSH
  1. 下一步保存发布就可以了

构建项目

当项目构建配置完后以后就只要点击直接构建就可以了,它就会自动的拉取远程代码然后打包。

构建完的项目,会出现在你项目发布和SSH发布所配置的目录下

最后只需要在服务器中设置网站的根目录为配置目录就可以了。

分支合并自动打包部署

在构建编辑中我们可以找到这个触发器,我们只要向这个地址发送请求,项目就可以自动构建。我们也就可以看到最新的页面。

这里需要WebHooks的帮助,WebHooks实现项目CI/CD 可以参考,只需要将打包脚本变为发送请求就可以了。还有一点很重要,我们对dev和test环境的代码可以自动的发版,对于生产环境的代码,我们可以选择手动发版(不使用触发器,而是需要发版的时候,点一下直接构建),这样做也是为了保险。

结语

Jpom的功能还有很多很多,对于前端项目的自动化部署来说,以上的内容就够了,剩下感兴趣的可以自己去试试。

相关推荐
前进前进前进3 分钟前
TRAE 全链路实战:做了一个警示牌一键生成器:纯 Canvas、单文件、零依赖
前端
小万7421 小时前
God‘s Eye View 深度解析:15 路公开信号 + CesiumJS 的浏览器级 OSINT 控制台,60 帧渲染的“真实间谍卫星模拟器”
前端
IT星宿1 小时前
浏览器标签页全是一个图标:我用名字哈希生成 favicon,让每个项目都有身份标识
前端
全栈项目管理程序猿1 小时前
ArcGIS JS 基础教程(32):体元系列 - VoxelSlice 体元切片
前端·javascript
众壹新能源科技3 小时前
逆变器自带无功不够用,加装5MVar SVG后功率因数从0.85回到0.99
运维·人工智能·自动化
..Dauntless..3 小时前
【Linux】一切皆文件和缓冲区
linux·运维·服务器
QMCY_jason3 小时前
x86 ubuntu2204 无gui 安装 openeuler 2203 aarch64版本
linux·运维·服务器
重生之小比特3 小时前
【Linux系统】12 进程程序替换 自定义Shell 命令行解释器
linux·运维·服务器
考拉讲支付3 小时前
母婴亲子服务平台分账架构设计:多场景多方分账与合规清结算实践
大数据·运维·人工智能·微信小程序·架构·微信公众平台
拖孩3 小时前
AI 帮我写的小程序「厨菜记」上线满月了,挣了两百块!!!
前端·后端·微信小程序