現已釋出!閱讀關於 11 月新增功能和修復的內容。

SSH 遠端開發

本教程將引導您使用 Visual Studio Code 的 Remote - SSH 擴充套件在 Azure 上建立虛擬機器(VM)並連線到它。您將建立一個 Node.js Express Web 應用程式,以演示如何使用 VS Code 在遠端計算機上進行編輯和除錯,就像在本地處理原始碼一樣。

注意:您的 Linux VM 可以託管在任何地方——本地主機、本地資料中心、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

Remote 狀態列項可以快速顯示 VS Code 正在執行的上下文(本地或遠端),點選該項將顯示 Remote - SSH 命令。

Remote - SSH commands

建立虛擬機器

如果您沒有現有的 Linux 虛擬機器,可以透過 Azure 門戶建立一個新的 VM。在 Azure 門戶中,搜尋“虛擬機器”,然後選擇新增。從那裡,您可以選擇您的 Azure 訂閱並建立一個新的資源組(如果您還沒有的話)。

注意:在本教程中,我們使用 Azure,但您的 Linux VM 可以託管在任何地方,只要 Linux 發行版滿足這些 先決條件

Create a virtual machine

現在您可以指定 VM 的詳細資訊,例如名稱、大小和基礎映像。在本示例中,請選擇 Ubuntu Server 18.04 LTS,但您可以選擇其他 Linux 發行版的最新版本,並檢視 VS Code 的 支援的 SSH 伺服器

Virtual machine instance details

設定 SSH

有幾種身份驗證方法可以連線到 VM,包括 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 公鑰源”的下拉選單中選擇“使用現有公鑰”,以便您可以使用剛剛生成的公鑰。複製公鑰並將其貼上到 VM 設定中,方法是複製 SSH 公鑰id_ed25519.pub 的全部內容。您還需要允許 VM 接受入站 SSH 流量,方法是選擇“允許選定的埠”,並在“選擇入站埠”下拉列表中選擇“SSH (22)”。

Add SSH public key to VM

自動關機

使用 Azure VM 的一個很酷的功能是能夠啟用自動關機(因為我們都知道我們經常忘記關閉 VM……)。如果您轉到“管理”選項卡,可以設定每天關機的時間。

Virtual machine auto-shutdown

選擇“檢查並建立”,然後選擇“建立”,Azure 將為您部署 VM!

部署完成後(可能需要幾分鐘),請轉到虛擬機器的“新資源”檢視。

透過 SSH 連線

現在您已經建立了一個 SSH 主機,讓我們連線到它!

您會注意到狀態列左下角有一個指示器。此指示器顯示 VS Code 正在執行的上下文(本地或遠端)。單擊該指示器將顯示 Remote 擴充套件命令列表。

Remote extension commands

在“Remote-SSH”部分選擇“連線到主機...”命令,然後輸入 VM 的連線資訊(格式為:user@hostname)以連線到主機。

user 是您在將 SSH 公鑰新增到 VM 時設定的使用者名稱。對於 hostname,請返回 Azure 門戶,並在您建立的 VM 的“概述”窗格中複製“公用 IP 地址”。

Virtual machine public IP address

在 Remote - SSH 中連線之前,您可以透過命令提示符使用 ssh user@hostname 驗證您是否能夠連線到 VM。

注意:如果您遇到錯誤 ssh: connect to host <host ip> port 22: Connection timed out,您可能需要從 VM 的“網路”選項卡中刪除 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

您可以透過檢視狀態列中的指示器來知道您已連線到 VM。它顯示了 VM 的主機名。

SSH indicator in Status bar

Remote - SSH 擴充套件還在您的活動欄中添加了一個新圖示,點選該圖示將開啟 Remote 資源管理器。從下拉列表中選擇“SSH 目標”,您可以在此處配置您的 SSH 連線。例如,您可以儲存最常連線的主機,並從此處訪問它們,而無需再次輸入使用者名稱和主機名。

Remote button on Activity bar

連線到 SSH 主機後,您可以與遠端計算機上的檔案進行互動並開啟資料夾。如果您開啟整合終端(⌃` (Windows、Linux Ctrl+`)),您會看到您正在使用 bash shell 而在 Windows 上

Checking uname in the terminal

您可以使用 bash shell 瀏覽 VM 上的檔案系統。您也可以使用“檔案”>“開啟資料夾”瀏覽並開啟遠端主目錄中的資料夾。

Remote open folder

建立 Node.js 應用程式

在此步驟中,您將建立一個簡單的 Node.js 應用程式。您將使用應用程式生成器從終端快速搭建應用程式。

安裝 Node.js 和 npm

在整合終端(⌃` (Windows、Linux Ctrl+`)),更新 Linux VM 中的軟體包,然後安裝 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 Explorer 並找到“轉發的埠”檢視。單擊“轉發埠”連結,並指示您要轉發埠 3000。

Enter the port to forward

將連線命名為“瀏覽器”

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.