SSH 遠端開發
本教程將引導您使用 Visual Studio Code 的 Remote - SSH 擴充套件在 Azure 上建立虛擬機器(VM)並連線到它。您將建立一個 Node.js Express Web 應用程式,以演示如何使用 VS Code 在遠端計算機上進行編輯和除錯,就像在本地處理原始碼一樣。
注意:您的 Linux VM 可以託管在任何地方——本地主機、本地資料中心、Azure 或任何其他雲,只要所選的 Linux 發行版滿足這些 先決條件。
先決條件
要開始,您需要完成以下步驟
- 安裝一個 OpenSSH 相容的 SSH 客戶端(不支援 PuTTY)。
- 安裝 Visual Studio Code。
- 擁有 Azure 訂閱(如果您沒有 Azure 訂閱,請在開始前建立一個 免費帳戶)。
安裝擴充套件
Remote - SSH 擴充套件用於連線到 SSH 主機。

遠端 - SSH
安裝 Remote - SSH 擴充套件後,您將在最左側看到一個新的狀態列項。

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

建立虛擬機器
如果您沒有現有的 Linux 虛擬機器,可以透過 Azure 門戶建立一個新的 VM。在 Azure 門戶中,搜尋“虛擬機器”,然後選擇新增。從那裡,您可以選擇您的 Azure 訂閱並建立一個新的資源組(如果您還沒有的話)。
注意:在本教程中,我們使用 Azure,但您的 Linux VM 可以託管在任何地方,只要 Linux 發行版滿足這些 先決條件。

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

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

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

選擇“檢查並建立”,然後選擇“建立”,Azure 將為您部署 VM!
部署完成後(可能需要幾分鐘),請轉到虛擬機器的“新資源”檢視。
透過 SSH 連線
現在您已經建立了一個 SSH 主機,讓我們連線到它!
您會注意到狀態列左下角有一個指示器。此指示器顯示 VS Code 正在執行的上下文(本地或遠端)。單擊該指示器將顯示 Remote 擴充套件命令列表。

在“Remote-SSH”部分選擇“連線到主機...”命令,然後輸入 VM 的連線資訊(格式為:user@hostname)以連線到主機。
user 是您在將 SSH 公鑰新增到 VM 時設定的使用者名稱。對於 hostname,請返回 Azure 門戶,並在您建立的 VM 的“概述”窗格中複製“公用 IP 地址”。

在 Remote - SSH 中連線之前,您可以透過命令提示符使用 ssh user@hostname 驗證您是否能夠連線到 VM。
注意:如果您遇到錯誤
ssh: connect to host <host ip> port 22: Connection timed out,您可能需要從 VM 的“網路”選項卡中刪除 NRMS-Rule-106。

在連線資訊文字框中設定使用者和主機名。

VS Code 現在將開啟一個新視窗(例項)。然後,您將看到一條通知,表明“VS Code Server”正在 SSH 主機上初始化。一旦 VS Code Server 安裝在遠端主機上,它就可以執行擴充套件並與您的本地 VS Code 例項進行通訊。

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

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

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

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

建立 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。

將連線命名為“瀏覽器”

伺服器現在將把埠 3000 上的流量轉發到您的本地計算機。當您瀏覽到 https://: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。
恭喜
恭喜,你已成功完成本教程!
接下來,檢視其他遠端開發擴充套件。
或者透過安裝遠端開發擴充套件包獲取所有這些擴充套件。