通过 SSH 进行远程开发
本教程将引导您完成使用 Visual Studio Code Remote - SSH 扩展在 Azure 上创建虚拟机 (VM) 并进行连接的过程。您将创建一个 Node.js Express Web 应用,以演示如何在 VS Code 中像处理本地源代码一样,对远程机器上的代码进行编辑和调试。
注意:您的 Linux 虚拟机可以托管在任何地方——本地主机、本地环境、Azure 或任何其他云平台,只要所选的 Linux 发行版满足这些先决条件即可。
先决条件
在开始之前,您需要完成以下步骤:
- 安装一个兼容 OpenSSH 的 SSH 客户端(不支持 PuTTY)。
- 安装 Visual Studio Code。
- 拥有 Azure 订阅(如果您没有 Azure 订阅,请在开始前创建一个免费账户)。
安装扩展
Remote - SSH 扩展用于连接 SSH 主机。

远程 - SSH
安装 Remote - SSH 扩展后,您会在最左侧看到一个新的状态栏项。

远程状态栏项可以快速显示 VS Code 当前运行的上下文(本地或远程),点击该项将调出 Remote - SSH 命令。

创建虚拟机
如果您还没有现成的 Linux 虚拟机,可以通过 Azure 门户创建一个新的虚拟机。在 Azure 门户中,搜索“虚拟机”,然后选择添加。在此处,您可以选择您的 Azure 订阅并创建一个新的资源组(如果您还没有的话)。
注意:在本教程中我们使用的是 Azure,但只要 Linux 发行版满足这些先决条件,您的 Linux 虚拟机可以托管在任何地方。

现在您可以指定虚拟机的详细信息,例如名称、大小和基础镜像。在此示例中,选择 Ubuntu Server 18.04 LTS,但您也可以选择其他 Linux 发行版的最新版本,并查看 VS Code 支持的 SSH 服务器。

设置 SSH
连接虚拟机有多种身份验证方法,包括 SSH 公钥/私钥对或用户名和密码。我们建议使用基于密钥的身份验证(如果您使用用户名/密码,扩展程序会多次提示您输入凭据)。如果您在 Windows 上并已使用 PuttyGen 创建了密钥,可以重用它们。
创建 SSH 密钥
如果您还没有 SSH 密钥对,请打开 Bash Shell 或命令行并输入:
ssh-keygen -t ed25519
这将生成 SSH 密钥。在接下来的提示中按 Enter 键,将密钥保存在默认位置(用户目录下一个名为 .ssh 的文件夹中)。

随后系统会提示您输入安全密码(Passphrase),您可以留空。现在您应该拥有一个 id_ed25519.pub 文件,其中包含您的新 SSH 公钥。
注意:如果您使用的旧系统不支持 Ed25519 算法,可以使用 rsa 代替:
ssh-keygen -t rsa -b 4096。
将 SSH 密钥添加到您的虚拟机
在上一步中,您生成了 SSH 密钥对。在SSH 公钥源的下拉菜单中选择使用现有公钥,以便使用刚刚生成的公钥。获取公钥内容,并将其完整复制并粘贴到虚拟机设置的SSH 公钥字段中。同时,通过选择允许所选端口并在选择入站端口下拉列表中选择SSH (22),以允许虚拟机接受入站 SSH 流量。

自动关机
使用 Azure 虚拟机的一个很棒的功能是能够启用自动关机(毕竟,我们都会忘记关闭虚拟机……)。如果您转到管理选项卡,可以设置每天关闭虚拟机的具体时间。

选择查看 + 创建,然后选择创建,Azure 将为您部署虚拟机!
部署完成后(可能需要几分钟),转到虚拟机的新资源视图。
使用 SSH 连接
既然您已经创建了 SSH 主机,让我们连接到它吧!
您会注意到状态栏左下角有一个指示器。该指示器告诉您 VS Code 当前运行的上下文(本地或远程)。点击该指示器可调出远程扩展命令列表。

在 Remote-SSH 部分选择 Connect to Host...(连接到主机...) 命令,并以 user@hostname 的格式输入虚拟机的连接信息以连接到主机。
user 是您在向虚拟机添加 SSH 公钥时设置的用户名。对于 hostname,请返回 Azure 门户,在您创建的虚拟机的概述窗格中,复制公共 IP 地址。

在 Remote - SSH 中进行连接之前,您可以先在命令提示符中使用 ssh user@hostname 验证是否能够连接到虚拟机。
注意:如果您遇到错误
ssh: connect to host <host ip> port 22: Connection timed out,您可能需要在虚拟机的网络选项卡中删除 NRMS-Rule-106 规则。

在连接信息文本框中设置用户和主机名。

VS Code 现在将打开一个新窗口(实例)。您会看到一条通知,显示“VS Code Server”正在 SSH 主机上进行初始化。一旦 VS Code Server 安装在远程主机上,它就可以运行扩展并与您的本地 VS Code 实例进行通信。

查看状态栏中的指示器,即可确认您已连接到虚拟机。它会显示您虚拟机的名称。

Remote - SSH 扩展还在您的活动栏中添加了一个新图标,点击它将打开远程资源管理器。从下拉菜单中选择 SSH Targets(SSH 目标),在这里您可以配置 SSH 连接。例如,您可以保存最常连接的主机,直接从这里访问它们,而无需每次都输入用户和主机名。

连接到 SSH 主机后,您可以与远程机器上的文件进行交互并打开文件夹。如果您打开集成终端(⌃` (Windows, Linux Ctrl+`)),您会发现尽管您在 Windows 上,但您实际上是在 Bash Shell 中工作。

您可以使用 Bash Shell 浏览虚拟机上的文件系统。您也可以通过文件 > 打开文件夹来浏览并打开远程主目录下的文件夹。

创建您的 Node.js 应用程序
在这一步中,您将创建一个简单的 Node.js 应用程序。您将使用一个应用程序生成器通过终端快速构建应用程序脚手架。
安装 Node.js 和 npm
在集成终端(⌃` (Windows, Linux Ctrl+`))中,更新 Linux 虚拟机中的包,然后安装 Node.js,其中包含了 npm(Node.js 包管理器)。
sudo apt-get update
curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
您可以运行以下命令来验证安装:
node --version
npm --version
安装 Express 生成器
Express 是一个用于构建和运行 Node.js 应用程序的流行框架。您可以使用 Express Generator 工具来构建(创建)一个新的 Express 应用程序脚手架。Express Generator 作为 npm 模块发布,通过 npm 命令行工具 npm 安装。
sudo npm install -g express-generator
-g 开关将 Express Generator 全局安装在您的机器上,以便您可以从任何位置运行它。
创建新应用程序
现在,您可以通过运行以下命令创建一个名为 myExpressApp 的新 Express 应用程序:
express myExpressApp --view pug
--view pug 参数告诉生成器使用 pug 模板引擎。
要安装应用程序的所有依赖项,请进入新文件夹并运行 npm install。
cd myExpressApp
npm install
运行应用程序
最后,让我们确保应用程序可以运行。从终端使用 npm start 命令启动服务器。
npm start
Express 应用默认运行在 https://:3000。您在本地浏览器的 localhost:3000 上看不到任何内容,因为 Web 应用正在您的虚拟机上运行。
端口转发
为了能够在本地机器上浏览 Web 应用,您可以利用名为 端口转发 的功能。
为了访问远程机器上可能未公开暴露的端口,您需要在本地机器的端口和服务器之间建立连接或隧道。在应用程序仍在运行的情况下,打开 SSH 资源管理器并找到转发端口 (Forwarded Ports) 视图。点击转发端口链接,并指明您想要转发 3000 端口。

将此连接命名为“browser”。

服务器现在会将 3000 端口上的流量转发到您的本地机器。当您浏览 https://:3000 时,您就能看到正在运行的 Web 应用了。

编辑与调试
从 Visual Studio Code 文件资源管理器(⇧⌘E (Windows, Linux Ctrl+Shift+E))中,导航到新的 myExpressApp 文件夹,双击 app.js 文件以在编辑器中打开它。
IntelliSense
您将获得 JavaScript 文件的语法高亮以及带有悬停提示的智能感知 (IntelliSense),就像源代码在您的本地机器上一样。

开始输入时,您将获得对象方法和属性的智能补全。

调试
通过点击行号左侧的间距,或者将光标放在该行并按 F9,在 app.js 的第 10 行设置一个断点。断点将显示为一个红点。

现在,按 F5 运行您的应用程序。如果询问如何运行应用程序,请选择 Node.js。
应用程序将启动,并且会停在断点处。您可以检查变量、创建监视并查看调用堆栈。
按 F10 进行单步跳过,或再次按 F5 结束调试会话。

您获得了通过 SSH 连接的 Visual Studio Code 的完整开发体验。
结束您的 SSH 连接
您可以通过文件 > 关闭远程连接来结束 SSH 会话并回到本地运行 VS Code 的状态。
恭喜
恭喜,你已成功完成本教程!
接下来,请查看其他的远程开发扩展。
或者通过安装远程开发扩展包获取所有这些扩展。