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

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

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

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

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

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

然后,系统会提示您输入安全的密码短语,但您可以将其留空。您现在应该有一个 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)。

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

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

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

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

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

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

您可以通过查看状态栏中的指示器来知道您已连接到 VM。它显示 VM 的主机名。

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

一旦您连接到 SSH 主机,您就可以与文件交互并在远程计算机上打开文件夹。如果您打开集成终端 (⌃` (Windows, Linux Ctrl+`)),您会看到您正在使用 bash shell 在 Windows 上 工作。

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

创建您的 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 Generator 工具搭建(创建)一个新的 Express 应用程序。Express Generator 作为 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 资源管理器并找到 转发的端口 视图。单击 转发端口 链接,并指示您要转发端口 3000

将连接命名为“browser”

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

编辑和调试
从 Visual Studio Code 文件资源管理器 (⇧⌘E (Windows, Linux Ctrl+Shift+E)),导航到您的新 myExpressApp 文件夹,然后双击 app.js 文件在编辑器中打开它。
IntelliSense
您为 JavaScript 文件提供了语法高亮显示以及悬停的 IntelliSense,就像源代码在您的本地计算机上一样。

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

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

现在,按 F5 运行您的应用程序。如果您被问到如何运行应用程序,请选择 Node.js。
应用程序将启动,您将命中断点。您可以检查变量、创建监视和导航调用堆栈。
按 F10 逐步执行或再次按 F5 完成您的调试会话。

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