本站点文档内容均翻译自code.visualstudio.com,仅供个人学习,如有差异请以官网为准。

通过 SSH 进行远程开发

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

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

先决条件

要开始,您需要完成以下步骤:

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

安装扩展

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

安装远程 - SSH 扩展

远程 - SSH 扩展

远程 - SSH

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

远程状态栏项目

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

远程 - 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)。

ssh-keygen 输出

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

注意:如果你正在使用不支持Ed25519算法的旧系统,你可以使用rsa代替:ssh-keygen -t rsa -b 4096输入:.

将 SSH 密钥添加到您的虚拟机

在上一步中,您生成了一对 SSH 密钥。选择 使用现有公钥SSH 公钥来源 的下拉菜单中,以便您可以使用刚刚生成的公钥。将公钥复制到您的 VM 设置中,粘贴整个内容到 id_ed25519.pub在 SSH 公钥中。您还希望通过选择 允许选定端口 并从 下拉列表中选择 SSH (22) 来允许您的虚拟机接受入站 SSH 交通。

将 SSH 公钥添加到虚拟机

自动关机

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

虚拟机自动关机

选择审查并创建,然后创建,然后 Azure 将为您部署虚拟机!

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

使用 SSH 连接

既然你已经创建了一个 SSH 主机,让我们来连接它吧!

您会注意到状态栏左下角有一个指示器。该指示器告知您 VS Code 正在以哪种上下文运行(本地或远程)。点击该指示器以显示远程扩展命令列表。

远程扩展命令

选择 连接到主机... 命令在 远程-SSH 部分,并通过在以下格式中输入您的虚拟机连接信息来连接到主机:用户@主机名输入:.

用户是您在向VM添加SSH公钥时设置的用户名。对于主机名,返回到Azure 门户,在概述窗格中,复制公共 IP 地址

虚拟机公共IP地址

在连接 Remote - SSH 之前,您可以使用命令提示符验证您是否能够连接到您的虚拟机 (VM)ssh 用户@主机名输入:.

注意:如果你遇到错误ssh: 连接主机 <host ip> 端口 22: 连接超时, 您可能需要从VM的网络选项卡中删除NRMS-Rule-106:

NRMS 规则的虚拟机列表

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

设置用户和主机名

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

正在初始化 VS Code 服务器

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

状态栏中的SSH指示器

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

活动栏上的遥控按钮

一旦你连接到你的SSH主机,你就可以与文件进行交互并在远程机器上打开文件夹。如果你打开集成终端 (⌃` (Windows, Linux Ctrl+`)),你会看到你正在一个bash shell中工作如果你在Windows上.

在终端中检查uname

你可以使用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时,您将看到正在运行的网页应用程序。

运行 Express 应用程序

编辑和调试

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

智能感知

您对JavaScript文件有语法高亮显示,并且有悬停时的IntelliSense,就像源代码在您的本地机器上一样。

快速应用.js悬停

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

Express app.js 智能完成

调试

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

设置断点

现在,按F5来运行你的应用程序。如果你被问到如何运行应用程序,请选择Node.js

应用程序将启动,并且您会遇到断点。您可以检查变量、创建观察点,并导航调用堆栈。

F10 进行单步执行或 F5 再次按以结束调试会话。

VS Code 调试视图

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

结束你的 SSH 连接

你可以通过 SSH 结束你的会话,并返回到在本地运行 VS Code 的状态,通过 文件 > 关闭远程连接

恭喜

恭喜你,你已经成功完成这个教程!

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

或者通过安装 远程开发扩展包来获取它们。