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

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

远程状态栏项目可以快速显示 VS Code 正在以哪种上下文运行(本地或远程),点击该项目将显示远程 - SSH 命令。

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

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

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

然后系统会提示您输入一个安全的密码短语,但您可以留空。您现在应该有一个id_ed25519.pub包含您的新公共 SSH 密钥的文件。
注意:如果你正在使用不支持Ed25519算法的旧系统,你可以使用rsa代替:
ssh-keygen -t rsa -b 4096输入:.
将 SSH 密钥添加到您的虚拟机
在上一步中,您生成了一对 SSH 密钥。选择 使用现有公钥 在 SSH 公钥来源 的下拉菜单中,以便您可以使用刚刚生成的公钥。将公钥复制到您的 VM 设置中,粘贴整个内容到 id_ed25519.pub在 SSH 公钥中。您还希望通过选择 允许选定端口 并从 下拉列表中选择 SSH (22) 来允许您的虚拟机接受入站 SSH 交通。

自动关机
使用 Azure 虚拟机的一个很棒的功能是能够启用自动关闭(因为坦白说,我们都会忘记关闭我们的虚拟机……)。如果你进入管理选项卡,你可以设置每天希望关闭虚拟机的时间。

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

选择 连接到主机... 命令在 远程-SSH 部分,并通过在以下格式中输入您的虚拟机连接信息来连接到主机:用户@主机名输入:.
该用户是您在向VM添加SSH公钥时设置的用户名。对于主机名,返回到Azure 门户,在概述窗格中,复制公共 IP 地址。

在连接 Remote - SSH 之前,您可以使用命令提示符验证您是否能够连接到您的虚拟机 (VM)ssh 用户@主机名输入:.
注意:如果你遇到错误
ssh: 连接主机 <host ip> 端口 22: 连接超时, 您可能需要从VM的网络选项卡中删除NRMS-Rule-106:

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

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

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

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 虚拟机中的软件包,然后安装 Node.js,其中包括 Node.js 软件包管理器 npm。
超级用户权限 软件包管理工具 更新
curl -sL https://deb.nodesource.com/setup_lts.x | 超级用户权限 -E bash -
超级用户权限 软件包管理工具 安装 -y nodejs
您可以通过运行以下命令来验证安装:
节点 --版本
npm --版本
安装Express生成器
Express 是一个流行的用于构建和运行 Node.js 应用程序的框架。你可以使用 Express Generator 工具来创建(生成)一个新的 Express 应用程序。Express Generator 作为一个 npm 模块提供,并通过使用 npm 命令行工具进行安装npm输入:.
超级用户 npm 安装 -g express-generator
该-克切换会在你的机器上全局安装 Express Generator,这样你就可以在任何地方运行它。
创建新应用程序
您现在可以创建一个名为的新Express应用程序我的快递应用通过运行:
表达 我的Express应用 --视图 pug
该--查看 pug参数告诉生成器使用pug模板引擎。
要安装所有应用程序的依赖项,请转到新文件夹并运行npm 安装输入:.
cd myExpressApp
npm 安装
运行应用程序
最后,确保应用程序正在运行。从终端使用以下命令启动应用程序npm 启动启动服务器的命令。
npm 开始
Express应用程序默认运行在http://localhost:3000。在localhost:3000上你不会看到任何内容,因为该网页应用程序正在你的虚拟机上运行。
端口转发
要能够在本地机器上浏览到网络应用程序,您可以利用另一个名为端口转发的功能。
要访问远程机器上的一个端口,该端口可能不对外公开,您需要在本地机器上的一个端口和服务器之间建立一个连接或隧道。应用程序仍在运行时,打开SSH资源管理器并找到转发端口视图。点击转发端口链接,并指示您要转发3000端口:

命名连接 "browser":

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

编辑和调试
从Visual Studio Code文件资源管理器 (⇧⌘E (Windows, Linux Ctrl+Shift+E)),导航到您的新我的快递应用文件夹并双击app.js文件以在编辑器中打开。
智能感知
您对JavaScript文件有语法高亮显示,并且有悬停时的IntelliSense,就像源代码在您的本地机器上一样。

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

调试
在第10行设置断点app.js 点击行号左侧的空白处,或在行上放置光标并按F9。 断点将显示为红色圆圈。

现在,按F5来运行你的应用程序。如果你被问到如何运行应用程序,请选择Node.js。
应用程序将启动,并且您会遇到断点。您可以检查变量、创建观察点,并导航调用堆栈。
按 F10 进行单步执行或 F5 再次按以结束调试会话。

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