1.配置nodejs

https://nodejs.org/dist/ 下选择自己需要的版本下载。
我使用8,页面上会出现如下版本供选择。

  • node-v8.16.0-linux-arm64.tar.gz
  • node-v8.16.0-linux-arm64.tar.xz

gz和xz格式无所谓,只是压缩方式的不同

下载后解压到服务器下合适的目录。接下来登录jenkins配置,系统管理–》全局工具配置

winods 可以部署jenkins 执行自动化脚本 jenkins自动部署vue项目_根目录


找到nodejs,新增,安装目录选择自己解压后的nojs目录。如果看不到nodejs这块,需要安装插件NodeJS Plugin插件。

winods 可以部署jenkins 执行自动化脚本 jenkins自动部署vue项目_jenkins_02


完成后保存。

2.配置job

新建任务,构建自由风格的软件项目。

winods 可以部署jenkins 执行自动化脚本 jenkins自动部署vue项目_服务器_03


我使用是的git管理代码,如果想在构建前自行选择版本,可按照如下步骤,否则跳过。

需要安装git parameter 插件。

winods 可以部署jenkins 执行自动化脚本 jenkins自动部署vue项目_服务器_04


这样在构建时会先让你选择一个代码分支。

winods 可以部署jenkins 执行自动化脚本 jenkins自动部署vue项目_根目录_05


继续,接下来配置代码版本库

winods 可以部署jenkins 执行自动化脚本 jenkins自动部署vue项目_部署vue_06


接下来是构建环境设置

winods 可以部署jenkins 执行自动化脚本 jenkins自动部署vue项目_服务器_07


构建设置

winods 可以部署jenkins 执行自动化脚本 jenkins自动部署vue项目_根目录_08

自动将编辑后的文件传输到目标服务器指定目录,并执行部署操作。如果没有维护ssh server 按照如下步骤

系统管理–》系统设置

找到 Publish over SSH,如果没有去找相关插件。

winods 可以部署jenkins 执行自动化脚本 jenkins自动部署vue项目_html_09

继续将编辑后的文件传输到目标服务器指定目录,并执行部署操作

winods 可以部署jenkins 执行自动化脚本 jenkins自动部署vue项目_jenkins_10


要注意:

构建后的文件目录结构(很重要,一定要搞清楚):

-dist

|- - dist

|- - - -*.js,*.*等文件

|- - index.html

配置时如果对目录结构或参数含义不清楚特别容易出现无法复制的情况,还很难找到原因。

配置中各参数说明:

  • source files 源文件,目录是jenkins下该任务的根目录,我们构建vue的dist目录就在这个根目录下,直接使用dist/*即可找到index文件,生成的文件中有两部分,index.html和子目录dist(里面是js等);* 意思是任意多个字符,**代表所有文件
  • remote prefix 复制文件时,拷贝到目的主机时相对源文件目录要忽略的前缀,这里设置了dist/意思是拷贝时拷贝第一层dist/下的所有文件,包括 index.html和第二层dist下的所有文件
  • remote directory 远程目录,此处是针对于我们设置的ssh server根目录来说的相对路径,切记!
  • exec command 执行命令 可以调用服务器上的脚本执行部署操作。这里我就用来备份原服务器文件、将新文件从服务器上传目录移动到nginx下的项目目录。然后重启nginx。