现已发布!阅读 10 月份的新功能和修复。

使用 Visual Studio Code 远程访问 SSH

2019 年 7 月 25 日,Sana Ajani,@sana_ajani

远程 - SSH:轻松、流畅且(像)本地

如果您错过了,Visual Studio Code 最近发布了 远程开发扩展。远程扩展允许您针对容器、远程机器或虚拟机 (VM) 或 Windows 子系统 Linux (WSL) 进行开发,同时使用 VS Code 及其完整功能集作为您的开发环境。

Remote SSH architecture

无限:您不受限于本地机器

越来越多的开发人员从事大型复杂项目,这些项目要求他们针对专门的开发虚拟机或服务器进行工作,这些虚拟机或服务器提供比普通笔记本电脑更多的存储空间或计算能力。

但是,这种开发伴随着它自己的挑战。

  • 如果您使用远程访问软件(如 VNC),您可能会在编辑时遇到延迟,因为您的 UI 不再是本地的。
  • 如果您使用远程桌面协议 (RDP),则难以管理多个连接。
  • 挂载远程文件系统并执行批量操作可能会很慢。
  • 保持远程和本地环境同步很烦人,您经常会遇到在某个地方有效但在另一个地方无效的问题。
  • 使用 SSH 和 Vim 远程编辑文件意味着您不再处于舒适的代码编辑器中。

打破本地机器的物理限制而又不放弃工具,难道不很棒吗?现在,远程 - SSH 扩展 的魔力出现了。

使用 Linux 进行远程开发

只要您的 Linux 虚拟机支持 SSH,它就可以托管在任何地方;在您的本地主机上、内部部署、在 Azure 上或在任何其他云中。您也可以在任何客户端上 - Windows、macOS 或 Linux。

注意:尚不支持 macOS 和 Windows SSH 主机。

在这篇博文中,我们将使用 Windows 客户端并针对 Azure 上的 Linux 虚拟机。

入门

要开始,您需要完成以下操作:

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

创建虚拟机

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

Create a virtual machine

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

Virtual machine instance details

设置 SSH

有几种身份验证方法可以进入虚拟机,包括 SSH 公钥/私钥对或用户名和密码。我们强烈建议使用基于密钥的身份验证,这样您就不需要在每次连接时都输入密码。如果您使用的是 Windows 并已使用 PuttyGen 创建密钥,则可以 重复使用它们

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

ssh-keygen -t ed25519

这将生成 SSH 密钥。在以下提示处按 Enter 键,将密钥保存到默认位置。

ssh-keygen output

然后系统将提示您输入安全密码短语,但您可以将其留空。

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

在上一步骤中,我们生成了一个 SSH 密钥对。我们将获取公钥并将其粘贴到我们的虚拟机设置中,方法是复制 id_ed25519.pub 的内容。您还需要允许您的虚拟机接受入站 SSH 流量。

Add SSH public key to VM

使用 Azure 虚拟机的一项很酷的功能是能够启用自动关闭(因为我们都忘了关闭虚拟机……)。如果您转到**管理**选项卡,您可以设置每天关闭虚拟机的时间。

Virtual machine auto-shutdown

选择**查看和创建**,Azure 将为您部署虚拟机!

使用远程 - SSH 连接

既然我们已经介绍了如何创建 SSH 主机,那么让我们连接到它!

VS Code 的 远程 - SSH 扩展 允许您使用 SSH 连接到远程机器或虚拟机,所有操作都在 VS Code 内部完成。如果您还没有安装远程 - SSH 扩展,可以在扩展视图(Ctrl + Shift + X)中搜索“remote ssh”。

Remote SSH extension

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

Remote extension commands

选择**远程 - SSH:连接到主机**命令,并通过以下格式输入虚拟机的连接信息连接到主机:user@hostname

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

Virtual machine public IP address

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

Set user and host name

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

Initializing VS Code Server

通过查看状态栏中的指示器,您就知道已连接到虚拟机。现在,它显示了我们虚拟机的主机名!

SSH indicator in Status bar

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

Remote button on Activity bar

连接到 SSH 主机后,您可以与远程机器上的文件交互并打开文件夹。如果您打开集成终端,您会看到您正在 bash shell 中工作尽管您在 Windows 上。等等,我们已经连接到我们的虚拟机了吗?这太容易了。这就是重点。这些扩展让远程开发感觉轻松、流畅且……嗯,不像远程开发。😃

Checking uname in the terminal

您可以使用 bash shell 浏览虚拟机上的文件系统。使用mkdir demo创建一个名为“demo”的新文件夹,您可以使用文件 > 打开文件夹浏览并打开远程主目录中的文件夹。

Remote open folder

您还可以在远程 SSH 主机上专门安装扩展。影响 UI 的扩展(如主题和代码段)是在本地安装的,其余扩展需要安装在远程 SSH 主机上。您会注意到,当您打开扩展视图时,有两个部分,一个用于本地机器上的扩展,另一个用于远程主机上的扩展。即使您从不同的客户端 SSH 到您的远程机器,您的远程扩展和设置也将保持不变。当您去安装扩展时,VS Code 会自动在正确的上下文中安装它。

Intellicode extension installed remotely

Hello World

让我们将一个基本的“Hello World”Python 应用程序部署到我们的虚拟机。我们将使用一个流行的 Python Web 框架,称为 Flask。在您的 bash shell 中,运行以下命令。

sudo apt install python3-flask

在您之前创建的“Demo”文件夹中,创建一个新文件(Ctrl + N),名为app.py,其中包含一个基本的 Hello world Flask 应用程序。

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello Remote World! :)"

if __name__ == "__main__":
    app.run()

一旦 VS Code 将文件语言识别为 Python,您将看到一个通知,推荐您使用 Microsoft Python 扩展(如果它尚未安装在远程机器上)。

Python extension recommendation

选择**安装**,重新加载 VS Code,您将开始在远程机器上看到 VS Code 的 IntelliSense 和颜色化。

python IntelliSense

要运行应用程序,请按 F5,然后选择Flask 调试配置。在 Python 调试控制台中,您会看到应用程序正在 localhost 的端口 5000 上运行。但是,localhost 当前指的是远程服务器,而不是您的本地机器。为了能够在本地机器上浏览到 Web 应用程序,我们将利用另一个名为 端口转发 的功能。

为了能够访问远程机器上可能未公开的端口,我们需要在本地机器上的端口和服务器之间建立连接或隧道。在应用程序仍在运行的情况下,打开 SSH 资源管理器,找到**已转发端口**视图。单击**转发端口**链接,并指示我们希望转发端口 5000。

Enter the port to forward

将连接命名为“browser”。

Name the port

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

Hello Remote World in a browser

现在,真正的问题是……我们可以在远程机器上从 VS Code 进行调试吗?当然可以!在应用程序仍在运行的情况下,在返回字符串“Hello Remote World”的代码行上设置断点,然后选择调试控制中的重启按钮。刷新浏览器中的页面,您就会命中断点!您将获得与本地一样的 VS Code 体验,包括编辑、调试以及所有设置和扩展。😊

Debugging over SSH

要切换回本地机器进行本地开发,请关闭远程连接,方法是点击 **文件** > **关闭远程连接**。

使用 Remote - SSH 扩展,您可以与虚拟机一起工作,并在远程机器上使用 VS Code 的所有生产力功能和扩展。无论您的代码托管在哪里,您都可以获得您所熟知和喜爱的 VS Code 全功能开发体验。

如果您想了解有关 VS Code Remote 的更多信息,可以阅读我们的 宣布远程开发的博文。您还可以尝试其他远程扩展,例如 开发容器WSL,并阅读我们的完整 远程开发文档.

祝您远程编码愉快!

Sana Ajani,VS Code 项目经理 @sana_ajani