Jenkins打包部署Vue项目至远程服务器
Jenkins打包部署Vue项目与打包部署后端项目原理是一样的，唯一的区别在于打包和部署的脚本上。
参考：Jenkins打包部署gitee项目至阿里云ECS服务器
具体配置步骤如下：
1、创建项目及配置
进入项目文件夹，点击“新建Item”，输入前端项目任务名称创建Freestyle project项目。
基础配置如下图示：
图1-基础配置1
图2-基础配置2配置内容：
填写项目描述
选择Gitee链接
勾选参数化构建项目
添加Choice Parameter，参数名：environment
选项(每行一个值)：
test
mgr
描述分别与选项对应：
test-测试环境
mgr-预上线环境
添加Git Parameter，参数名：branch
描述：请选择要发布的分支
参数类型：分支
默认值：origin/master
源码管理
源码管理配置如下图所示：
图3-源码管理配置配置内容：
选择Git
填写Respository URL仓库地址
构建
由于Jenkins所在机器为Windows系统，故：
增加构建步骤选择：Execute Windows batch command
打包命令：
echo "开始编译打包..."
cd business-ui
echo "删除之前的压缩包"
del /f /q dist.zip
echo "npm编译打包..."
call npm install
echo %environment%
if %environment% == test (
call npm run build:test
)
if %environment% == mgr (
call npm run build:mgr
)
echo "7zip压缩dist目录"
D:\smaple\db_backup\7zip.exe a dist.zip dist/
echo "打包完毕"
构建后操作
构建后操作如下图所示：
图4-构建后操作点击Add Server按钮，选择对应的远程服务器
SSH远程配置：
SSH Server
Name：选择环境对应的SSH服务器
点击高级：
勾选：Verbose output in console
勾选Label，输入框输入：test，标识当前服务器对应环境
Transfers
Source files（要上传的源文件）：business-ui/dist.zip
Remove prefix：business-ui
Remote directory（上传服务器临时目录）：/opt/publish/apple-business-admin
Exec command：发布shell脚本
具体发布shell脚本如下：
#!/bin/bash
publishDir=/opt/publish/apple-business-admin
staticDir=/opt/nginx_static/apple-business-admin
echo "进入发布目录解压缩..."
cd $publishDir
unzip dist.zip
echo "删除apple-business-admin站点下的静态资源目录..."
rm -r -f $staticDir/*
cp $publishDir/dist/* -r -f $staticDir/
echo "备份部署压缩包..."
mkdir -p $publishDir/backup/${BUILD_ID}/
mv $publishDir/dist.zip $publishDir/backup/${BUILD_ID}/
rm -r -f $publishDir/dist/
rm -r -f $publishDir/dist.zip
echo "发布完毕..."
最后，点击最底下“高级”按钮
勾选Parameterized publishing
Parameter name：与最开始Choice Parameter参数名：environment保持一致
如下图示：
图5-参数化构建点击应用--保存即可。
以上远程发布即配置完成。
2、构建发布测试
点击Build with Parameters按钮，
选择对应的环境参数和要发布的分支，
点击“开始构建”按钮，执行构建操作。
点击下方构建历史，可查看对应的控制台输出信息。
如下图示：
构建发布常见构建失败错误：
找不到命令，创建文件夹无权限等问题，具体可根据控制台日志提示修改测试。
扩展：
（1）如果是生产环境，可以单独复制项目配置，权限只分配给项目负责人；
（2）如果同一个环境下有多个节点（如：生产环境有多个节点），可以通过新增选择参数来控制要发布的环境和节点；
例如：
参数名：environment
选项：prod
参数名：environment-node-group
选项：
prod1
prod2
描述：
prod1 - 192.168.0.1
prod1 - 192.168.0.2
prod2 - 192.168.0.3
prod2 - 192.168.0.4
（完）