vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署

时间:2024-03-20 17:02:05

每次在没有jenkins自动部署的情况下都要经历、打包、将包通过ftp丢到服务器上。实在繁琐。那这里就推荐一个vscode插件一键打包,一键部署。Alibaba Cloud Toolkit

介绍

前端持续化集成-一键部署:在一键部署中有很多插件和工具:比如前面说的jenkinsdeploy等等,这里使用阿里开发的一款插件Alibaba Cloud Toolkit
阿里云官网:产品分类>开发运维
vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署

Alibaba Cloud Toolkit传送门
vscode安装步骤

安装与部署

一.vscode 插件搜索 Alibaba Cloud Toolkit 安装vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署

二、新建连接服务器Host View

1、 单击ALIBABA CLOUD VIEW 中的Host View
vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署
2、单击Host Add 新增最新的连接
vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署
3、输入需要的信息
Host List:需要连接的服务器地址IP
port:一般是默认22(看自己的设置)
SSH Profile:创建新的服务账号密码、或使用已经有的自己新建过的,右边选择即可

vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署
切换advance面板输入tag

三、配置打包、部署
1、点击RUN CONFIGURATIONS 右边的三个小点,并选中Deploy to Host
vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署
2、配置打包、部署
vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署
Name:配置定义一个名字,以便更容易区分多个配置;
File:选择打包方式;
Project:选择待部署工程的根目录;
Build Output:打包之后的 Output 目录;
Scripts:打包的命令,这个在你选择了工程目录,会自动读取package.json 中脚本命令;
Target Host:部署的远程目标服务器;
Target Directory:远程目标服务器上的指定部署目录;
After deploy:文件上传到服务器上之后要做的事、比如执行复制、删除等

3、配置完成
这里点击你配置的名称右键有编辑删除或者启动打包部署
vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署
四、Output 部署问题
其实进行到第三步骤是已经能进行打包并部署到远程服务器了,但是呢。这里会直接部署你的Output文件夹,比如你打包输出dist文件夹之后,这里会直接将dist整个丢到你的目标文件夹。而我们想要的是dist 中的文件。

问了阿里那边的开发,并没有什么好办、只能在After-deploy使用命令提取dist 文件夹。并删除dist
1、点击select command
vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署
2、点击Add command增加复制、删除命令
vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署

因为static中的js是做了去缓存处理(加了版本号和时间戳)、如果复制的时候不删除static,会造成static 越来越大.越来越多、所以这里要加先删除static 的命令、然后static 删除之后再去复制、复制成功后,再去删除dist文件夹

输入命令:
删除static

rm -f -r Target Directory/static

复制dist

cp -f -r Target Directory/dist/* Target Directory

删除dist

rm -f -r Target Directory/dist

其中Target Directory为你的服务目标地址
其中-f 表示强制覆盖、-r表示递归复制,因为dist文件夹下有多级文件夹。

合并上诉命令
;隔开:多个命令使用;拼接。异步的,各执行各的

&&隔开:同步的,只有前面命令成功执行了,才会执行后续的命令
||隔开:只有前面的命令失败了才会执行下面的命令,知道有命令成功

所以这里应该是用&&进行合并,都是依赖关系,只有删除了static 才能复制,只有复制完了dist、才能删除dist

五、部署
点击Run 部署。可以看到部署成功
vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署
服务器上也成功了,并删除了dist、而且static 也最新的,不存在叠加
vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署

千里之行
始于足下