每次在没有
jenkins自动部署的情况下都要经历、打包、将包通过ftp丢到服务器上。实在繁琐。那这里就推荐一个vscode插件一键打包,一键部署。Alibaba Cloud Toolkit
介绍
前端持续化集成-一键部署:在一键部署中有很多插件和工具:比如前面说的jenkins、deploy等等,这里使用阿里开发的一款插件Alibaba Cloud Toolkit
阿里云官网:产品分类>开发运维
Alibaba Cloud Toolkit传送门
vscode安装步骤
安装与部署
一.vscode 插件搜索 Alibaba Cloud Toolkit 安装
二、新建连接服务器Host View
1、 单击ALIBABA CLOUD VIEW 中的Host View
2、单击Host Add 新增最新的连接
3、输入需要的信息Host List:需要连接的服务器地址IPport:一般是默认22(看自己的设置)SSH Profile:创建新的服务账号密码、或使用已经有的自己新建过的,右边选择即可
切换advance面板输入tag
三、配置打包、部署
1、点击RUN CONFIGURATIONS 右边的三个小点,并选中Deploy to Host
2、配置打包、部署Name:配置定义一个名字,以便更容易区分多个配置;File:选择打包方式;Project:选择待部署工程的根目录;Build Output:打包之后的 Output 目录;Scripts:打包的命令,这个在你选择了工程目录,会自动读取package.json 中脚本命令;Target Host:部署的远程目标服务器;Target Directory:远程目标服务器上的指定部署目录;After deploy:文件上传到服务器上之后要做的事、比如执行复制、删除等
3、配置完成
这里点击你配置的名称右键有编辑删除或者启动打包部署
四、Output 部署问题
其实进行到第三步骤是已经能进行打包并部署到远程服务器了,但是呢。这里会直接部署你的Output文件夹,比如你打包输出dist文件夹之后,这里会直接将dist整个丢到你的目标文件夹。而我们想要的是dist 中的文件。
问了阿里那边的开发,并没有什么好办、只能在After-deploy使用命令提取dist 文件夹。并删除dist
1、点击select command
2、点击Add command增加复制、删除命令
因为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 部署。可以看到部署成功
服务器上也成功了,并删除了dist、而且static 也最新的,不存在叠加
千里之行
始于足下