当前位置: 首页>前端>正文

jenkins 打包vue时间优化 jenkins部署vue项目

部署步骤

1.服务器上安装tomcat

首先到tomcat官网下载压缩包,unzip解压,然后修改conf下的server.xml,主要修改以下2处地方的port(注意,我的项目使用8093端口,文章后面出现8093即代表项目端口)

<Server port="18093" shutdown="SHUTDOWN">
<Connector port="8093" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />

按需修改,可用以下命令查看端口是否被占用

netstat -anp|grep 8093

修改完后切换到bin目录启动tomcat

./startup.sh

若提示 -bash: ./startup.sh: Permission denied 则可用以下命令对当前目录下的*.sh文件的所有者增加可执行权限

chmod u+x *.sh

启动完毕后可用netstat查看端口是否启动成功,然后在浏览器地址栏输入http://192.168.1.221:8093/,看到tomcat首页则表示启动成功,若失败则可去log文件夹下查看catalina.out分析出错原因依据相同步骤再创建一个tomcat文件夹放Jenkins,下载jenkins.war解压到tomat的webapps下然后启动tomcat即可,注意端口不要重复,启动后访问ip+端口,按提示找到密码文件,输入密码,进入插件安装页面,可以安装推荐的插件或者自己选择插件进行安装,也可点击右上角关闭,安装完毕或关闭后即可开始使用Jenkins 可参考Linux-Jenkins安装部署

2.安装NodeJS 插件

系统管理 -> 插件管理 -> 可选插件 -> 输入 NodeJS -> 勾选后点击直接安装

安装完成后点击 系统管理 -> 全局工具配置 -> 新增NodeJS -> 输入别名 -> 选择版本 -> 保存

jenkins 打包vue时间优化 jenkins部署vue项目,jenkins 打包vue时间优化 jenkins部署vue项目_jenkins,第1张

3.构建vue项目

点击新建任务

jenkins 打包vue时间优化 jenkins部署vue项目,jenkins 打包vue时间优化 jenkins部署vue项目_jenkins 打包vue时间优化_02,第2张

源码管理输入项目地址,添加账户,选择分支

jenkins 打包vue时间优化 jenkins部署vue项目,jenkins 打包vue时间优化 jenkins部署vue项目_vue_03,第3张

jenkins 打包vue时间优化 jenkins部署vue项目,jenkins 打包vue时间优化 jenkins部署vue项目_vue_04,第4张

构建环境选择刚刚安装的NodeJS插件

jenkins 打包vue时间优化 jenkins部署vue项目,jenkins 打包vue时间优化 jenkins部署vue项目_jenkins 打包vue时间优化_05,第5张

构件 -> 增加构件步骤 -> 执行shell

jenkins 打包vue时间优化 jenkins部署vue项目,jenkins 打包vue时间优化 jenkins部署vue项目_Jenkins_06,第6张

shell脚本依据环境和项目自行编写,大致思路是进/root/.jenkins/jobs/下当前任务的workspace执行打包,进dist目录压缩为gz文件,然后在tomcat的webapps目录下新建一个web文件夹,将gz文件移动过来并解压缩,最后启动tomcat

注意:如果在脚本里面启动tomcat,最前面记得加上以下命令防止tomcat被强制关闭

export BUILD_ID=dontKillMe

遇到的问题汇总

1.TypeError: compilation.templatesPlugin is not a function

网上的办法多是说webpack不是最新版,需要删除node_modules,重新安装,然后安装最新webpack

npm install
npm add webpack@latest

实际上现在最新的是5.0版本,很多时候版本太高反而不兼容,所以需要安装根据项目安装指定版本,比如

npm install webpack@^4.0.0

注意,该命令需要在wordspace下直接执行,不要全局安装

2.tomcat已启动但是无法访问

可能是被防火墙拦截了,可以单独开放8093端口

firewall-cmd --permanent --zone=public --add-port=8093/tcp

重启防火墙

firewall-cmd --reload

查看8093端口是否开放

firewall-cmd --zone=public --query-port=8093/tcp

3.shutdown.sh无法关闭tomcat

在bin目录下的catalina.sh文件最前面加上如下命令

if [ -z "$CATALINA_PID" ]; then
      CATALINA_PID=$PRGDIR/CATALINA_PID
      cat $CATALINA_PID
fi

然后修改shutdown.sh的最后一行,增加 -force

exec "$PRGDIR"/"$EXECUTABLE" stop -force "$@"

参考博文:linux tomcat shutdown.sh 不能正常关闭

如果遇到以下问题,可能是之前的tomcat启动后没有关闭,可以强制关闭进程后再行尝试

$CATALINA_PID was set but the specified file does not exist. Is Tomcat running? Stop aborted.

4.控制台显示tomcat启动成功但是无法访问

脚本前面加上以下命令防止tomcat进程给关闭

export BUILD_ID=dontKillMe

5.首页空白

vue.config.js文件中修改publicPath为相当路径,即

jenkins 打包vue时间优化 jenkins部署vue项目,jenkins 打包vue时间优化 jenkins部署vue项目_vue_07,第7张

参考资料

Linux-Jenkins安装部署jenkins +git 自动化部署vue项目Linux 中 Tomcat 启动成功 但 无法访问 解决方法


https://www.xamrdz.com/web/2jb1944759.html

相关文章: