通过 SSH 进行远程开发
本教程将引导你使用 Visual Studio Code Remote - SSH 扩展在 Azure 上创建虚拟机 (VM) 并连接到该虚拟机。你将创建一个 Node.js Express Web 应用程序,以演示如何像在本地使用源代码一样在远程计算机上使用 VS Code 进行编辑和调试。
注意:只要选择的 Linux 发行版满足这些先决条件,你的 Linux 虚拟机就可以托管在任何地方 - 在本地主机上、在本地、在 Azure 或在任何其他云中。
先决条件
要开始,你需要完成以下步骤
- 安装一个与 OpenSSH 兼容的 SSH 客户端(不支持 PuTTY)。
- 安装 Visual Studio Code。
- 拥有 Azure 订阅(如果没有 Azure 订阅,请在开始之前创建一个免费帐户)。
安装扩展
Remote - SSH 扩展用于连接到 SSH 主机。
Remote - SSH
安装 Remote - SSH 扩展后,你将在最左侧看到一个新的状态栏项目。
远程状态栏项目可以快速显示 VS Code 在哪个上下文中运行(本地或远程),单击该项目将弹出 Remote - SSH 命令。
创建虚拟机
如果没有现有的 Linux 虚拟机,可以通过 Azure 门户创建一个新的虚拟机。在 Azure 门户中,搜索“虚拟机”,然后选择 添加。从那里,你可以选择你的 Azure 订阅并创建一个新的资源组(如果你还没有)。
注意:在本教程中,我们使用的是 Azure,但只要 Linux 发行版满足这些先决条件,你的 Linux 虚拟机就可以托管在任何地方。
现在你可以指定虚拟机的详细信息,例如名称、大小和基本映像。在此示例中选择 Ubuntu Server 18.04 LTS,但你可以选择其他 Linux 发行版的最新版本,并查看 VS Code 的支持的 SSH 服务器。
设置 SSH
有多种方法可以对虚拟机进行身份验证,包括 SSH 公钥/私钥对或用户名和密码。我们建议使用基于密钥的身份验证(如果你使用用户名/密码,则扩展程序将提示你多次输入凭据)。如果你使用的是 Windows 并且已经使用 PuttyGen 创建了密钥,则可以重复使用它们。
创建 SSH 密钥
如果没有 SSH 密钥对,请打开 bash shell 或命令行并键入
ssh-keygen -t ed25519
这将生成 SSH 密钥。按 Enter 以在以下提示符下按默认位置(在你的用户目录下,文件夹名为 .ssh
)保存密钥。
然后将提示你输入安全的密码,但你可以将其留空。现在,你应该有一个 id_ed25519.pub
文件,其中包含你的新公钥。
注意:如果你使用的是不支持 Ed25519 算法的旧系统,则可以使用 rsa 代替:
ssh-keygen -t rsa -b 4096
。
将 SSH 密钥添加到虚拟机
在上一步中,你生成了一个 SSH 密钥对。在 SSH 公钥源的下拉列表中选择 使用现有公钥,以便可以使用刚刚生成的公钥。获取公钥并将其粘贴到你的虚拟机设置中,方法是将 SSH 公钥中的 id_ed25519.pub
的全部内容复制到其中。你还需要允许你的虚拟机接受入站 SSH 流量,方法是选择 允许选定端口 并从 选择入站端口 下拉列表中选择 SSH (22)。
自动关机
使用 Azure 虚拟机的一个很酷的功能是能够启用自动关机(因为让我们面对现实,我们都会忘记关闭虚拟机……)。如果转到 管理 选项卡,则可以设置每天关闭虚拟机的时间。
选择 查看 + 创建,然后选择 创建,Azure 将为你部署你的虚拟机!
部署完成后(可能需要几分钟),转到虚拟机的新的资源视图。
使用 SSH 连接
现在你已经创建了一个 SSH 主机,让我们连接到它!
你会在状态栏的左下角注意到一个指示器。此指示器告诉你 VS Code 在哪个上下文中运行(本地或远程)。单击指示器以打开远程扩展命令列表。
在 Remote-SSH 部分中选择 连接到主机... 命令,并通过以下格式输入虚拟机的连接信息来连接到主机:user@hostname
。
user
是你将 SSH 公钥添加到虚拟机时设置的用户名。对于 hostname
,请返回到Azure 门户,并在你创建的虚拟机的 概述 窗格中,复制 公共 IP 地址。
在 Remote - SSH 中连接之前,你可以使用 ssh user@hostname
通过命令提示符验证你是否可以连接到你的虚拟机。
注意:如果你遇到错误
ssh: connect to host <host ip> port 22: Connection timed out
,你可能需要从虚拟机的“网络”选项卡中删除 NRMS-Rule-106
在连接信息文本框中设置用户名和主机名。
VS Code 现在将打开一个新的窗口(实例)。然后,你将看到一个通知,表明“VS Code 服务器”正在 SSH 主机上初始化。一旦 VS Code 服务器安装在远程主机上,它就可以运行扩展并与你的本地 VS Code 实例通信。
你可以通过查看状态栏中的指示器来知道你已连接到虚拟机。它显示虚拟机的hostname。
Remote - SSH 扩展还在活动栏上贡献了一个新图标,单击该图标将打开远程资源管理器。从下拉列表中,选择 SSH 目标,你可以在其中配置你的 SSH 连接。例如,你可以保存你最常连接的主机并从此处访问它们,而无需输入用户名和主机名。
连接到 SSH 主机后,你可以与远程计算机上的文件交互并打开文件夹。如果打开集成的终端(⌃` (Windows, Linux Ctrl+`)),你会看到你正在 在 Windows 上 的情况下使用 bash shell。
你可以使用 bash shell 在虚拟机上浏览文件系统。你还可以使用 文件 > 打开文件夹 在远程主目录中浏览并打开文件夹。
创建 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
将连接命名为“browser”
服务器现在会将端口 3000 上的流量转发到你的本地机器。当您浏览 https://127.0.0.1:3000 时,你将看到正在运行的 Web 应用程序。
编辑和调试
从 Visual Studio Code 文件资源管理器(⇧⌘E (Windows, Linux Ctrl+Shift+E))中,导航到你的新 myExpressApp
文件夹,然后双击 app.js
文件以在编辑器中打开它。
IntelliSense
你将获得 JavaScript 文件的语法高亮显示以及带有悬停提示的 IntelliSense,就像源代码在你的本地机器上一样。
当你开始键入时,你将获得对象方法和属性的智能补全。
调试
通过单击行号左侧的装订线或将光标放在该行上并按 F9,在 app.js
的第 10 行设置一个断点。断点将显示为一个红色圆圈。
现在,按 F5 运行你的应用程序。如果系统询问你如何运行应用程序,请选择 Node.js。
应用程序将启动,并且你将命中该断点。你可以检查变量、创建监视并浏览调用堆栈。
按 F10 单步执行或再次按 F5 以完成调试会话。
你将获得通过 SSH 连接的 Visual Studio Code 的完整开发体验。
结束你的 SSH 连接
你可以通过 SSH 结束会话,然后使用 文件 > 关闭远程连接 返回到在本地运行 VS Code。
恭喜
恭喜,你已成功完成本教程!
接下来,查看其他远程开发扩展。
或者通过安装 远程开发扩展包来获取所有扩展。