通过 SSH 进行远程开发

本教程将引导您完成使用 Visual Studio Code Remote - SSH 扩展在 Azure 上创建虚拟机 (VM) 并进行连接的过程。您将创建一个 Node.js Express Web 应用,以演示如何在 VS Code 中像处理本地源代码一样,对远程机器上的代码进行编辑和调试。

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

先决条件

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

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

安装扩展

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

安装 Remote - SSH 扩展

Remote - SSH extension

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

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

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

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

在上一步中,您生成了 SSH 密钥对。在SSH 公钥源的下拉菜单中选择使用现有公钥,以便使用刚刚生成的公钥。获取公钥内容,并将其完整复制并粘贴到虚拟机设置的SSH 公钥字段中。同时,通过选择允许所选端口并在选择入站端口下拉列表中选择SSH (22),以允许虚拟机接受入站 SSH 流量。

Add SSH public key to VM

自动关机

使用 Azure 虚拟机的一个很棒的功能是能够启用自动关机(毕竟,我们都会忘记关闭虚拟机……)。如果您转到管理选项卡,可以设置每天关闭虚拟机的具体时间。

Virtual machine auto-shutdown

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

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

使用 SSH 连接

既然您已经创建了 SSH 主机,让我们连接到它吧!

您会注意到状态栏左下角有一个指示器。该指示器告诉您 VS Code 当前运行的上下文(本地或远程)。点击该指示器可调出远程扩展命令列表。

Remote extension commands

Remote-SSH 部分选择 Connect to Host...(连接到主机...) 命令,并以 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 Server”正在 SSH 主机上进行初始化。一旦 VS Code Server 安装在远程主机上,它就可以运行扩展并与您的本地 VS Code 实例进行通信。

Initializing VS Code Server

查看状态栏中的指示器,即可确认您已连接到虚拟机。它会显示您虚拟机的名称。

SSH indicator in Status bar

Remote - SSH 扩展还在您的活动栏中添加了一个新图标,点击它将打开远程资源管理器。从下拉菜单中选择 SSH Targets(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,其中包含了 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 命令行工具 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 资源管理器并找到转发端口 (Forwarded Ports) 视图。点击转发端口链接,并指明您想要转发 3000 端口。

Enter the port to forward

将此连接命名为“browser”。

Name the port

服务器现在会将 3000 端口上的流量转发到您的本地机器。当您浏览 https://: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 的状态。

恭喜

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

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

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

© . This site is unofficial and not affiliated with Microsoft.