vscode 之 Alibaba Cloud Toolkit 前端打包部署到服务器

360 阅读2分钟

Alibaba Cloud Toolkit

用于帮助开发者高效开发并部署适合在云端运行的应用。您在本地完成应用程序的开发、调试和测试后,可以使用在IDE(如Eclipse或IntelliJ或VsCode)中安装的Cloud Toolkit插件,通过图形配置的方式连接到云端部署环境并将应用程序快速部署到云端。

安装与部署

一.vscode 插件搜索 Alibaba Cloud Toolkit 安装

image.png

二、新建连接服务器Host View

1、 单击ALIBABA CLOUD VIEW 中的Host View

image.png

2、单击Host Add 新增最新的连接

image.png

3、输入需要的信息 Host List:需要连接的服务器地址IP
port:一般是默认22
SSH Profile:创建新的服务账号密码、或使用已经有的自己新建过的,右边选择即可
Profile Name:配置文件名称 Username: 用户名 Password: 密码

image.png

配置完成点击OK

三、配置打包、部署

1、点击RUN CONFIGURATIONS 右边的三个小点,并选中Deploy to Host

image.png

2、

image.png

  • Name:配置定义一个名称;
  • File:选择打包方式;
  • Project:选择需要部署的项目根目录;
  • Build Output:打包之后的 Output 目录();
  • Scripts:打包的命令,这个在你选择了工程目录,会自动读取package.json 中脚本命令;
  • Target Host:部署的远程目标服务器;
  • Target Directory:远程目标服务器上的指定部署目录;
  • After deploy:重点 文件上传到服务器上之后要做的事、比如执行复制、删除等

image.png

3、配置完成 这里点击你配置的名称右键有编辑删除或者启动打包部署

image.png

4、其实进行到第三步骤是已经能进行打包并部署到远程服务器了,但是呢。这里会直接部署你的Output文件夹,比如打包输出dist文件夹之后,这里会直接将dist整个丢到你的目标文件夹。而我们想要的是dist 中的文件。

因此我们如此做:

4.1 点击Select Command

image.png

输入 cp -f -r /project/html/* /project/html/ && rm -f -r /project/html/dist

这么做是因为我们想要的是dist 中的文件,所以先复制dist的所有文件到project/html/文件夹,在删除/project/html/dist 这样就完成啦!