Jpom前端自动化部署

940 阅读4分钟

身为小企业前端,感觉部署一般都会经历这么几个过程:

  1. 前端打包给后端,后端上传到服务器
  2. 后端感觉太麻烦了,不想给你上传,让我们用 Xftp 7上传(但是每个服务器第一次连接都要让后端给地址+密码)
  3. 最后,团队扩大,找了一个架构师,表示都要自动化部署

菜鸟公司就处在最后一个阶段,但不是找了架构师,只是公司感觉自动化部署比较好,所以要求学习一下,后端就搞了 Jpom,但是后端不知道前端咋搞,只能菜鸟自己学 Jpom 研究怎么让前端自动化部署了!

后端怎么配置Jpom

后端怎么配置菜鸟确实不知道,菜鸟使用的是后端配置好之后的,菜鸟需要做的就是关联仓库、构建项目、服务器上下载nvm等工作!

不过后端跟菜鸟说官网很详细,直接看 官网 就行!

问了一下后端,后端说难的就这几个地方,可以参考一下:

产物目录,打包命令,启动重启停止业务程序命令

了解Jpom

熟悉前端自动化构建的前端肯定听说过:Jenkins + Docker自动化部署、gitLab CI/CD自动化部署,这些菜鸟也收藏了,但是感觉学习成本很高(前端表示要学的够多了,不想再学:docker了),且中小企业压根不需要这么严格,所以 Jpom 是不二之选!

image.png

注:

如果公司已经使用了Jenkins + Docker自动化部署 或者 gitLab CI/CD自动化部署 那就去学习就行了!如果想向自动化部署靠近,那么可以考虑 Jpom

这里引用一篇文章:你知道,前端工程部署有哪些方式嘛?

image.png

一切都在后端已经部署了 Jpom 之后开始

再次明确,这篇文章讲的是:后端已经部署了 Jpom 之后的操作,后端部署 Jpom 需要读者自己去查看官网研究!

菜鸟这里主要是针对前端对部署不熟悉的同学,按照菜鸟的步骤操作即可,免去学习成本!

关联仓库

这里关联的仓库最好是公司的gitLab,没有的话就gitee,这个倒是无所谓,只是gitLab更方便后续CI/CD的扩展!

image.png

image.png

image.png

项目构建

image.png

image.png

image.png

image.png

image.png

注意:

这里的发布目录就是你自己上传时候上传的那个位置,这里的/data/是在系统管理中的ssh管理中设置的,表示你可以操作那个目录:

image.png image.png image.png image.png

image.png

这里保持默认即可,可以设置一下保留天数和个数!

image.png

到这里基本配置就完成了!

服务器安装 nvm

注意:

这里是在 Jpom 的服务器上安装,因为这个打包是在 Jpom 服务器上打包,打完包再上传给你要部署的地方!

首先使用 FinalShell 连接上服务器,然后按照nvm官网的操作就行,链接:nvm.uihtm.com/#nvm-linux

image.png

注意:

这里要自己看清楚包名,因为菜鸟按这个来,发现有的是错误的,可能作者默认我们会自己去改解压包的名称!

构建

有了环境之后,我们就可以直接点击构建了!

image.png

吐槽

菜鸟这里真的要吐槽一波,我写这篇文章的时候,用的是我们公司外包出去的一个项目,结果硬是不成功!我甚至直接把 node_modules 都放上去也不成功!

不成功的原因在于以下几点,各位也要注意:

  1. 外包的 node_modules 有一些不好下载的包,需要一些特定的环境或者太老了(你可以本地试一下npm i,都不一定可以成功),只能用之前的 node_modules
  2. 我把 node_modules 传到服务器了也不行,还是报错有一些东西没有,可能是 node_modules 里面引入了一些本地的 window 上的 zip 包(反正菜鸟看报错是这样的),可能是一些 npm 包还需要 window 环境才能运行

遇上和第2个沾边的,菜鸟表示还是老老实实 Xftp 7 传打包文件就完事了!!

反正菜鸟用自己写的项目,那就是一帆风顺,除了vite会报错一个:

npm error notsup Unsupported platform for @rollup/rollup-win32-x64-msvc@4.19.0: wanted {"os":"win32","cpu":"x64"} (current: {"os":"linux","cpu":"x64"})

这个是因为@rollup/rollup-win32-x64-msvc这个插件不是必须要的,但是创建项目会自动下载,可以删除(删除后npm i,依旧可以跑项目,不过看githun上好像说vite删除了这个,后续项目不一定会有这个插件),特别是自动化部署的时候linux报错,完全可以直接删除!

这个菜鸟在github上也进行了回复,希望对大家有帮助!