1.将vue项目推送到远程仓库Gitlab

Jenkins远程发布VUE项目_服务器


**2.安装Nginx **

我这里使用docker来安装

这个Nginx安装步骤就不过多演示了

Jenkins远程发布VUE项目_服务器_02

3.Jenkins安装NodeJS插件 NodeJS

Jenkins远程发布VUE项目_nginx_03

4.Jenkins配置NodeJs环境

这个NodeJs版本和开发环境的版本最好保持一致

进入Global Tool Configuration

Jenkins远程发布VUE项目_nginx_04

5.Jenkins创建前端流水线项目

Jenkins远程发布VUE项目_服务器_05


6.编写构建脚本

这个脚本采用Jenkins本地方式编写,脚本中包含拉取Git代码,编译,打包,远程部署

Jenkins远程发布VUE项目_nginx_06

node {
stage('拉取代码') {
checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: 'b52a369a-9e90-4971-bd55-6ba17eb273f1', url: 'http://192.168.0.188:8888/gitlab/liutao/test_front.git']]])
}
stage('打包,部署网站') {
//使用NodeJS的npm进行打包
nodejs('nodejs10.15'){
sh '''
npm install
npm run build
'''
}
//=====以下为远程调用进行项目部署========
sshPublisher(publishers: [sshPublisherDesc(configName: '188',transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '',execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes:false, patternSeparator: '[, ]+', remoteDirectory: '/data/nginx/www/',remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/**')],usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
}
}

这里简单在介绍一下

这一段是通过账号密码的方式在GitLab上拉取代码
stage('拉取代码') {
checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: 'b52a369a-9e90-4971-bd55-6ba17eb273f1', url: 'http://192.168.0.188:8888/gitlab/liutao/test_front.git']]])
}
这一段就不过多介绍了,nodejs10.15这个是上面配置NodeJs的环境名称
stage('打包,部署网站') {
//使用NodeJS的npm进行打包
nodejs('nodejs10.15'){
sh '''
npm install
npm run build
'''
}
这一段如果很陌生的话就要看我上一篇文章,上一篇文章中这部分有详细介绍
sshPublisher(publishers: [sshPublisherDesc(configName: '188',transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '',execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes:false, patternSeparator: '[, ]+', remoteDirectory: '/data/nginx/www/',remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/**')],usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
}

这里就只说和上一篇不同的地方
这里脚本大致意思是将打包好的dist目录中的所有文件,远程ssh拷贝到188服务器上,188服务器是正式的部署服务器,上面安装的nginx也是部署在188服务器上,remoteDirectory这个是nginx的访问目录,configName远程服务器的名字

保存应用!

7.开始构建

Jenkins远程发布VUE项目_服务器_07


这里构建的时间比较长

先拉取代码,下载NodeJS环境,打包项目,于远程服务器建立ssh连接,拷贝项目!!!8.访问测试.

Jenkins远程发布VUE项目_服务器_08


搞定!!!