自动化部署工具Jpom系列（四）使用ssh部署VUE项目

在之前的文章《自动化部署工具Jpom系列（三）使用ssh部署JAVA项目》我们介绍了使用jpom实现自动化部署java服务，这篇文章我们介绍下使用利用jpom实现ssh部署前端VUE的项目（React项目也适用）。

一、首先登录Jpom项目管理平台

二、添加前端git仓库代码

选择在线构建->仓库信息，选择新增

这一步主要是把仓库代码的信息添加进来，方便我们后期构建的时候使用。

三、分配ssh服务器及授权目录

现在的jpom升级了，不能直接在ssh列表中新增服务器，所以这里需要使用管理员账户登录，登录后点击系统管理->资产管理->ssh关联

然后在这里新增了服务器之后，我们需要点击分配按钮，把当前的服务器分配给某个工作空间

备注：

1、这的话分配是单选，但是选择后相当于给某个工作空间插入一条新的机器，所以实际上一台服务器可以分配给多个工作空间。

然后再点击关联按钮，找到对应的分配工作空间，点击配置

这里主要是给当前工作空间分配一个linux上的授权目录，也就是只能在这个目录里面进行操作，其他的都不能操作。

四、添加构建信息

回到Jpom主页，选择菜单 在线构建->构建列表-点击新增

这里的话，分支选择自己的分支即可，构建方式选择本地构建，构建命令的话，标配是：

npm i && npm run build

这里可以根据实际的环节进行构建，例如：

npm i && npm run build:dev

最后的产物选择dist。

备注：

1、在vue里面打包的产出标配目录是dist，如果项目有更改，则修改为对应的目录即可。

2、以上步骤做完了，在发布操作里面选择不发布，可以先测试下在本地是否能打包。

发布操作这里我们还是选择ssh即可。首先选择服务器，同时填写发布目录，这个目录前半部分和后半部分的目录加起来应该是nginx的location目录，这里一定要选择好。

发布后的命令暂时没有，可以随便填一个ls即可。

然后一定要选择下面的清空发布，选择是。

备注：

1、上图我们的nginx服务器是使用宝塔搭建的，因此这里的发布目录直接指向的是域名对应的路径。

2、在宝塔里面，所有文件html文件的归属都是www用户，但是www用户是不允许登录服务器的，因此我们在ssh管理里面配置的是root用户，那么传入到html目录下的文件就是root权限，此时访问的话就会出现权限不足的报错，因此这里我们上传之后，执行的是把文件夹的权限再授予给www用户，这时候上完线就可以访问了。

以上就是使用Jpom部署VUE项目的教程。