Jenkins+svn+nginx实现windows环境自动部署vue前端项目

前面文章介绍了Jenkins+svn+tomcat实现自动化部署，现在终于有空抽时间出来写下Jenkins+svn+nginx实现自动部署vue前端项目。

jenkins的安装和配置已经在前面文章进行介绍，下面介绍实现vue前端项目需要进行的哪些额外的步骤。

注意：在安装jenkins和nginx的前提下，如果还没安装nginx,请自行百度

1：登陆jenkins，在系统管理——插件管理中，添加两个插件。Node.js和Post build task.

其中node.js是用来打包vue项目，post build task用来把打包好的项目自动移动到nginx目录。

 

 

 

 

 

 2.配置下NodeJS参数,打开全局工具配置，找到NodeJS，选择相应版本进行配置安装，可以查看本地开发运行的node版本，选择相应版本，以免发生版本问题导致项目发布失败。

 

 

 3.完成如上配置之后，重启下服务，然后重新打开页面，进行任务的创建。任务类型选择freestyle project.

 

 4.输入项目名称，进入到项目之后，进行项目的描述已经配置下discard old builds，这个是配置项目构建保留的天数和最大个数，为了给磁盘省点空间，不然每次构建都有存留很多的历史文件。

 

 5.源码管理配置如图：

 

6.下一步，选择相应的策略和构建环境，下图都是配置好的信息。

 

 7.构建项目，其中npm i 表示的是npm install，npm run build:stage表示的是项目打包的命令，如果要打包生产环境，换生成环境命令即可。

 

 8.项目打包完，我们还需要最后一步，就是把打包好的项目移动到nginx上面。其中要注意的点是：log text的值，这个是post build tash触发的关键，就是我们jenkins自动部署该项目时候产生的日志，我判断有deployed的日志文字，就促发post build,如果是tomcat项目，执行前面成功命令是 BUILD SUSSESS，我们就可填写相应的值进去。其中

rmdir /q /s "E:\nginx-1.12.2\html\ns"
xcopy /y /e /i "C:\Program Files (x86)\Jenkins\workspace\ns-web\ns" "E:\nginx-1.12.2\html\ns"

这个脚本第一句表示删除nginx原来的项目，第二句表示复制打包好的项目到nginx目录，自此，完成项目的自动化部署。