前端vue项目在vscode使用插件部署到服服务器的方法

使用Visual Studio Code部署应用到远程服务器

Cloud Toolkit支持将应用部署到采用SSH标准协议的服务器,您无需在一系列运维工具之间切换,只需在图形界面上选择目标服务器即可快速部署。

前提条件

部署应用到远程服务器

您可以使用一个本地应用来完成部署工作,具体步骤如下:

  1. 在Visual Studio Code中导入您的本地应用。

  2. 添加服务器。

    1. 在左侧菜单栏中单击阿里云图标,然后在ALIBABA CLOUD TOOLKIT 侧边栏中选择ALIBABA CLOUD VIEW > Host View

    2. 在弹出的Host 页签中单击Add Host

    3. Add Host 对话框中设置Host ListPortSSH Profile 后,单击Test Connection测试是否能成功连接服务器。

  3. 部署应用。

    1. 单击ALIBABA CLOUD TOOLKIT 侧边栏中RUN CONFIGURATIONS 旁边的**...** 图标,选择Deploy to Host

    2. Deploy HOST View 页签中设置部署参数,然后单击Apply

      • Deployment(必选):

        部署参数说明如下表所示:

        |----------------------|-----------------------------------------------------------------------------------|
        | 参数 | 描述 |
        | Name | 为此次配置定义一个名字,以便区分多个配置。 |
        | File | 在以下打包方式中选择:npm buildWebpack buildUpload file。 |
        | Project | 选择待部署工程的根目录。打包方式选择npm buildWebpack build时需要配置。 |
        | Build Output | 打包之后的Output目录。打包方式选择npm buildWebpack build时需要配置。 |
        | Scripts | 选择脚本命令,仅当打包方式选择npm build时需配置。 |
        | Webpack | Webpack配置,选择一个Webpack脚本,仅当打包方式选择Webpack build时需配置。 |
        | File | 选择要上传文件的文件夹,仅当打包方式选择Upload file时需设置。 |
        | Target Host | 此次部署的远程目标服务器。 |
        | Target Directory | 远程目标服务器上的指定部署目录。 |
        | After deploy | 输入应用启动命令,表示在完成应用包的部署后,需要执行的命令。 以Java程序为例,通常是一句Tomcat的启动命令,如sh /root/restart.sh。 |

      • Advanced (可选):在设置页面完成启动命令和部署后命令的设置,设置完成后单击Apply

结果验证

部署开始后,Visual Studio Code的Console区域会打印部署日志,您可以根据日志信息检查部署结果。

您还可以通过内置Terminal终端登录远程服务器,cd至部署路径下,然后执行ls命令检查是否部署成功。登录远程服务器操作步骤如下:

  1. 在左侧菜单栏中单击阿里云图标,然后在ALIBABA CLOUD TOOLKIT 侧边栏中选择ALIBABA CLOUD VIEW > Host View

  2. Host View 页签中单击目标远程服务器Actions 列的Terminal,登录远程服务器。

相关推荐
虎头金猫2 天前
4K 视频总卡在公网带宽?用 N1 + OpenList 把网盘播放链路重新理顺
运维·服务器·网络·python·容器·beautifulsoup·pandas
-梅2 天前
linux(8) 软硬链接
linux·运维·服务器
Wang's Blog2 天前
Java 项目实战: 外卖平台-文件下载与ServletOutputStream回写浏览器
服务器·项目开发
琥珀色糖2 天前
SimlpeHttp
linux·服务器
第十人i2 天前
Linux 日志管理系统:journald 配置与优化
linux·服务器
ITxiaobing20232 天前
IP 定位服务选型指南:从准确率到工程落地的技术考察
linux·服务器·网络
wuyk5552 天前
【Socket 进阶之路】第 9 章 Linux 网络服务量产稳定性优化|心跳保活、TIME_WAIT、SO_LINGER、内存池、断线重连、完整异常防护框架
linux·服务器·开发语言·网络·物联网
Julien20042 天前
Docker 容器存储原理(一)
linux·运维·服务器·ssh·学习方法
筝筝ba2 天前
GUI 测试之只读用户恢复BMC出厂设置
服务器
Wang's Blog2 天前
Java 项目实战: 外卖平台-新增菜品DishDto双表插入与事务控制
服务器·项目开发