前端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,登录远程服务器。

相关推荐
DO_Community1 天前
Ubuntu服务器快速上手:初始配置与安全设置教程
服务器·安全·ubuntu
三宝盈科炜尊1 天前
电阻的基础知识
服务器·开关电源·热敏电阻·压敏电阻·电阻·ptc热敏电阻
love530love1 天前
EPGF 新手教程 13在 PyCharm(中文版 GUI)中创建 Hatch 项目环境,并把 Hatch 做成“项目自包含”(工具本地化为必做环节)
开发语言·ide·人工智能·windows·python·pycharm·hatch
看见繁华1 天前
Linux 相关
linux·运维·服务器
ziyue75751 天前
idea不能使用低版本插件问题解决
java·ide·intellij-idea
运维之美@1 天前
linux主机ping不通问题排查
linux·运维·服务器
kylezhao20191 天前
C# 写一个Http 服务器和客户端
服务器·http·c#
云飞云共享云桌面1 天前
昆山精密机械工厂研发部门10个SolidWorks如何共享一台服务器来进行设计办公
运维·服务器·网络·人工智能·电脑
小沈同学呀1 天前
基于时间片划分的提醒算法设计与实现
服务器·数据库·算法
二等饼干~za8986681 天前
碰一碰发视频系统源码搭建部署技术分享
服务器·开发语言·php·音视频·ai-native