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

目录:

      • 一. 安装jenkins
      • 二. 安装NodeJs插件并配置
      • 三. 创建jenkins项目
      • 四.执行构建
      • 附录I: Public Over SSH插件安装及配置
      • 附录II: 可能会遇到的报错
        • 1.npm ERR! missing script: build

一. 安装jenkins

参考:linux安装jenkins

二. 安装NodeJs插件并配置

Jenkins构建打包部署前端Vue项目至Nginx_第1张图片
Jenkins构建打包部署前端Vue项目至Nginx_第2张图片
Jenkins构建打包部署前端Vue项目至Nginx_第3张图片

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

三. 创建jenkins项目

Jenkins构建打包部署前端Vue项目至Nginx_第6张图片
Jenkins构建打包部署前端Vue项目至Nginx_第7张图片
Jenkins构建打包部署前端Vue项目至Nginx_第8张图片
选择增加构建步骤->执行shell:
Jenkins构建打包部署前端Vue项目至Nginx_第9张图片
选择增加构建步骤->Send files or execute commands over SSH:
Jenkins构建打包部署前端Vue项目至Nginx_第10张图片
点击保存, 创建完成!

四.执行构建

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

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

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

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

1.npm ERR! missing script: build

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

你可能感兴趣的:(框架搭建工具,jenkins,持续构建,nginx,vuew)