Jenkins构建打包部署前端Vue项目至Nginx

一. 安装jenkins

二. 安装NodeJs插件并配置

Jenkins构建打包部署前端Vue项目至Nginx
Jenkins构建打包部署前端Vue项目至Nginx
Jenkins构建打包部署前端Vue项目至Nginx

显示上面两行则表示安装成功, 然后回到首页, 点击’系统管理’->‘全局工具配置’:
Jenkins构建打包部署前端Vue项目至Nginx
Jenkins构建打包部署前端Vue项目至Nginx
点击保存即配置完成.

三. 创建jenkins项目

Jenkins构建打包部署前端Vue项目至Nginx
Jenkins构建打包部署前端Vue项目至Nginx
Jenkins构建打包部署前端Vue项目至Nginx
选择增加构建步骤->执行shell:
Jenkins构建打包部署前端Vue项目至Nginx
选择增加构建步骤->Send files or execute commands over SSH:
Jenkins构建打包部署前端Vue项目至Nginx
点击保存, 创建完成!

四.执行构建

点击’立即构建’:
Jenkins构建打包部署前端Vue项目至Nginx
构建控制台输出:
Jenkins构建打包部署前端Vue项目至Nginx
进入服务器查看:
Jenkins构建打包部署前端Vue项目至Nginx
大功告成!

附录I: Public Over SSH插件安装及配置

1.点击-系统管理-插件管理-可选插件中 直接搜 publish over ssh 点击安装,安装完之后,重启jenkins
2.点击-系统管理-系统配置:
Jenkins构建打包部署前端Vue项目至Nginx
Jenkins构建打包部署前端Vue项目至Nginx
点击保存即可.

附录II: 可能会遇到的报错

1.npm ERR! missing script: build

Jenkins构建打包部署前端Vue项目至Nginx
解决:
在配置执行shell时命令: npm run build, 实际前端构建时加上了环境参数, 我的项目在此处将shell命令修改成一下便可成功: npm run build:prod, 保存然后再次执行构建.