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

相关推荐
代码AI弗森21 小时前
一文理清楚“算力申请 / 成本测算 / 并发评估”
java·服务器·数据库
weixin_4022784521 小时前
解决打开vscode编辑器ctrl+鼠标左键不能跳转定义问题 环境C++
vscode·编辑器·计算机外设
^—app5668661 天前
游戏运存小启动不起来临时解决方法
运维·服务器
志栋智能1 天前
超自动化安全:构建智能安全运营的核心引擎
大数据·运维·服务器·数据库·安全·自动化·产品运营
Edward111111111 天前
4月28日防火墙问题
linux·运维·服务器
想学后端的前端工程师1 天前
【补充内外网突然不通的情况】
运维·服务器
qq_589568101 天前
java学习笔记,包括idea快捷键
java·ide·intellij-idea
跨境数据猎手1 天前
跨境独立站系统技术拆解(附带源码)
服务器·前端·php
一次旅行1 天前
IDEA安装CC GUI新手指南
java·ide·intellij-idea