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

相关推荐
linux kernel5 小时前
第六部分:数据链路层
服务器·网络
较劲男子汉12 小时前
CANN Runtime零拷贝传输技术源码实战 彻底打通Host与Device的数据传输壁垒
运维·服务器·数据库·cann
wypywyp13 小时前
8. ubuntu 虚拟机 linux 服务器 TCP/IP 概念辨析
linux·服务器·ubuntu
Doro再努力13 小时前
【Linux操作系统10】Makefile深度解析:从依赖推导到有效编译
android·linux·运维·服务器·编辑器·vim
senijusene13 小时前
Linux软件编程:IO编程,标准IO(1)
linux·运维·服务器
不像程序员的程序媛13 小时前
Nginx日志切分
服务器·前端·nginx
忧郁的橙子.13 小时前
02-本地部署Ollama、Python
linux·运维·服务器
醇氧13 小时前
【linux】查看发行版信息
linux·运维·服务器
XiaoFan01214 小时前
免密批量抓取日志并集中输出
java·linux·服务器
souyuanzhanvip14 小时前
ServerBox v1.0.1316 跨平台 Linux 服务器管理工具
linux·运维·服务器