现已发布!阅读 10 月份发布的新功能和修复。

通过 SSH 进行远程开发

本教程将引导您使用 Visual Studio Code Remote - SSH 扩展在 Azure 上创建和连接到虚拟机 (VM)。您将创建一个 Node.js Express Web 应用程序,以展示如何像在本地代码一样,在远程计算机上使用 VS Code 进行编辑和调试。

注意:您的 Linux VM 可以托管在任何地方 - 在您的本地主机上、本地、Azure 或任何其他云中,只要所选的 Linux 发行版符合这些 先决条件

先决条件

要开始,您需要执行以下步骤

  1. 安装 支持 OpenSSH 的 SSH 客户端(不支持 PuTTY)。
  2. 安装 Visual Studio Code
  3. 拥有 Azure 订阅(如果您没有 Azure 订阅,请在开始之前创建一个 免费帐户)。

安装扩展

Remote - SSH 扩展用于连接到 SSH 主机。

安装 Remote - SSH 扩展

Remote - SSH extension

Remote - SSH

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

Remote Status bar item

Remote 状态栏项目可以快速向您显示 VS Code 在哪个上下文(本地或远程)中运行,单击该项目将调出 Remote - SSH 命令。

Remote - SSH commands

创建虚拟机

如果您没有现有的 Linux 虚拟机,可以通过 Azure 门户 创建一个新的 VM。在 Azure 门户中,搜索“虚拟机”,然后选择添加。从那里,您可以选择您的 Azure 订阅,如果还没有资源组,则创建一个新的资源组。

注意:在本教程中,我们使用的是 Azure,但您的 Linux VM 可以托管在任何地方,只要 Linux 发行版符合这些 先决条件

Create a virtual machine

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

Virtual machine instance details

设置 SSH

有多种方法可以对 VM 进行身份验证,包括 SSH 公钥/私钥对或用户名和密码。我们建议使用基于密钥的身份验证(如果您使用用户名/密码,扩展程序会多次提示您输入凭据)。如果您使用的是 Windows 并已使用 PuttyGen 创建了密钥,则可以 重复使用它们

创建 SSH 密钥

如果您没有 SSH 密钥对,请打开一个 bash shell 或命令行,然后输入

ssh-keygen -t ed25519

这将生成 SSH 密钥。在以下提示中按 Enter 将密钥保存在默认位置(在您的用户目录下,作为名为 .ssh 的文件夹)。

ssh-keygen output

然后会提示您输入安全密码,但您可以将其留空。您现在应该拥有一个 id_ed25519.pub 文件,其中包含您的新 SSH 公钥。

注意:如果您使用的是不支持 Ed25519 算法的旧系统,可以使用 rsa 而不是:ssh-keygen -t rsa -b 4096

将 SSH 密钥添加到您的 VM

在之前的步骤中,您生成了一个 SSH 密钥对。在SSH 公钥源的下拉菜单中选择使用现有公钥,以便使用您刚刚生成的公钥。将公钥复制到您的 VM 设置中,方法是复制 id_ed25519.pub 中的全部内容到SSH 公钥中。您还需要允许您的 VM 接受传入的 SSH 流量,方法是选择允许选定的端口,然后从选择传入端口下拉列表中选择SSH (22)

Add SSH public key to VM

自动关机

使用 Azure VM 的一个很酷的功能是能够启用自动关机(因为说实话,我们都会忘记关闭我们的 VM…)。如果您转到管理选项卡,您可以设置每天想要关闭 VM 的时间。

Virtual machine auto-shutdown

选择查看并创建,然后选择创建,Azure 将为您部署您的 VM!

部署完成后(可能需要几分钟),转到您的虚拟机的新的资源视图。

使用 SSH 连接

现在您已经创建了一个 SSH 主机,让我们连接到它!

您会注意到状态栏左下角有一个指示器。此指示器会告诉您 VS Code 在哪个上下文(本地或远程)中运行。单击指示器以调出远程扩展命令列表。

Remote extension commands

Remote-SSH 部分中选择连接到主机... 命令,并通过以下格式输入 VM 的连接信息:user@hostname

user 是您在将 SSH 公钥添加到 VM 时设置的用户名。对于 hostname,请返回 Azure 门户,并在您创建的 VM 的概述窗格中,复制公网 IP 地址

Virtual machine public IP address

在 Remote - SSH 中连接之前,您可以使用 ssh user@hostname 通过命令提示符验证您是否能够连接到您的 VM。

注意:如果您遇到错误 ssh: connect to host <host ip> port 22: Connection timed out,您可能需要从 VM 的“网络”选项卡中删除 NRMS-Rule-106。

Virtual machine list of NRMS rules

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

Set user and host name

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

Initializing VS Code Server

您可以通过查看状态栏中的指示器来确定是否已连接到 VM。它显示了 VM 的主机名。

SSH indicator in Status bar

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

Remote button on Activity bar

连接到 SSH 主机后,您可以与远程机器上的文件进行交互并打开文件夹。如果您打开集成终端(⌃`(Windows、Linux Ctrl+`),您将看到自己在 Windows 上的 bash shell 中工作。

Checking uname in the terminal

您可以使用 bash shell 浏览 VM 上的文件系统。您也可以使用 **文件** > **打开文件夹** 浏览和打开远程主目录中的文件夹。

Remote open folder

创建您的 Node.js 应用程序

在本步骤中,您将创建一个简单的 Node.js 应用程序。您将使用应用程序生成器从终端快速搭建应用程序。

安装 Node.js 和 npm

从集成终端(⌃`(Windows、Linux Ctrl+`)中,更新 Linux VM 中的软件包,然后安装 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 生成器 工具来搭建(创建)一个新的 Express 应用程序。Express 生成器作为 npm 模块提供,并使用 npm 命令行工具 npm 进行安装。

sudo npm install -g express-generator

-g 开关将 Express 生成器全局安装到您的机器上,以便您可以从任何位置运行它。

创建一个新的应用程序

现在,您可以通过运行以下命令创建一个名为 myExpressApp 的新的 Express 应用程序

express myExpressApp --view pug

--view pug 参数告诉生成器使用 pug 模板引擎。

要安装应用程序的所有依赖项,请转到新文件夹并运行 npm install

cd myExpressApp
npm install

运行应用程序

最后,让我们确保应用程序能够运行。从终端,使用 npm start 命令启动应用程序以启动服务器。

npm start

Express 应用程序默认情况下在 https://127.0.0.1:3000 上运行。您在本地浏览器上的 localhost:3000 上将不会看到任何内容,因为 Web 应用程序正在您的虚拟机上运行。

端口转发

要能够在您的本地机器上浏览 Web 应用程序,您可以利用另一个名为 端口转发 的功能。

要能够访问可能未公开暴露的远程机器上的端口,您需要在本地机器上的端口和服务器之间建立连接或隧道。在应用程序仍在运行的情况下,打开 SSH 资源管理器并找到 **已转发端口** 视图。单击 **转发端口** 链接,并表明您希望转发端口 3000

Enter the port to forward

将连接命名为“浏览器”。

Name the port

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

Running Express Application

编辑和调试

从 Visual Studio Code 文件资源管理器(⇧⌘E(Windows、Linux Ctrl+Shift+E)中,导航到您的新 myExpressApp 文件夹,并双击 app.js 文件以在编辑器中打开它。

IntelliSense

您将获得 JavaScript 文件的语法高亮显示以及 IntelliSense(带有悬停提示),就像源代码在您的本地机器上一样。

Express app.js hover

当您开始键入时,您将获得对对象方法和属性的智能完成提示。

Express app.js smart completions

调试

通过单击行号左侧的边距或将光标放在该行上并按下 F9,在 app.js 的第 10 行设置断点。断点将显示为一个红色圆圈。

set breakpoint

现在,按下 F5 运行您的应用程序。如果系统询问您如何运行应用程序,请选择 **Node.js**。

应用程序将启动,您将遇到断点。您可以检查变量、创建监视和导航调用堆栈。

按下 F10 进行单步执行,或再次按下 F5 完成调试会话。

VS Code debug view

您将获得通过 SSH 连接的 Visual Studio Code 的完整开发体验。

结束 SSH 连接

您可以使用 **文件** > **关闭远程连接** 结束通过 SSH 的会话,并返回到在本地运行 VS Code。

恭喜

恭喜您已成功完成本教程!

接下来,查看其他远程开发扩展。

或者通过安装 远程开发 扩展包来安装所有扩展。