每次在没有
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
也最新的,不存在叠加
千里之行
始于足下