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 -> 输入别名 -> 选择版本 -> 保存

3.构建vue项目

点击新建任务

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

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

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

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为相当路径，即

参考资料

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