现已发布!阅读关于 11 月份的新功能和修复的信息。

通过 SSH 进行远程开发

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

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

先决条件

要开始,你需要完成以下步骤

  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

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

Remote - SSH commands

创建虚拟机

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

注意:在本教程中,我们使用的是 Azure,但只要 Linux 发行版满足这些先决条件,你的 Linux 虚拟机就可以托管在任何地方。

Create a virtual machine

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

Virtual machine instance details

设置 SSH

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

创建 SSH 密钥

如果没有 SSH 密钥对,请打开 bash shell 或命令行并键入

ssh-keygen -t ed25519

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

ssh-keygen output

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

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

将 SSH 密钥添加到虚拟机

在上一步中,你生成了一个 SSH 密钥对。在 SSH 公钥源的下拉列表中选择 使用现有公钥,以便可以使用刚刚生成的公钥。获取公钥并将其粘贴到你的虚拟机设置中,方法是将 SSH 公钥中的 id_ed25519.pub 的全部内容复制到其中。你还需要允许你的虚拟机接受入站 SSH 流量,方法是选择 允许选定端口 并从 选择入站端口 下拉列表中选择 SSH (22)

Add SSH public key to VM

自动关机

使用 Azure 虚拟机的一个很酷的功能是能够启用自动关机(因为让我们面对现实,我们都会忘记关闭虚拟机……)。如果转到 管理 选项卡,则可以设置每天关闭虚拟机的时间。

Virtual machine auto-shutdown

选择 查看 + 创建,然后选择 创建,Azure 将为你部署你的虚拟机!

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

使用 SSH 连接

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

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

Remote extension commands

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

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

Virtual machine public IP address

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

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

Virtual machine list of NRMS rules

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

Set user and host name

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

Initializing VS Code Server

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

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 在虚拟机上浏览文件系统。你还可以使用 文件 > 打开文件夹 在远程主目录中浏览并打开文件夹。

Remote open folder

创建 Node.js 应用程序

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

安装 Node.js 和 npm

从集成终端(⌃` (Windows, Linux Ctrl+`))中,更新你的 Linux 虚拟机中的软件包,然后安装 Node.js,它包含了 Node.js 包管理器 npm。

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

将连接命名为“browser”

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。

恭喜

恭喜,你已成功完成本教程!

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

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