透過 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 主機。

安裝 Remote - SSH 擴充功能

Remote - SSH extension

Remote - SSH

安裝 Remote - SSH 擴充功能後，您會在最左側看到新的狀態列項目。

Remote Status bar item

遠端狀態列項目可以快速顯示 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 檔案，其中包含您的新公開 SSH 金鑰。

注意：如果您使用的舊版系統不支援 Ed25519 演算法，則可以使用 rsa 作為替代方案：ssh-keygen -t rsa -b 4096。

將 SSH 金鑰新增至您的 VM

在上一步中，您產生了 SSH 金鑰組。在 SSH 公開金鑰來源的下拉式選單中選取使用現有的公開金鑰，以便您可以使用剛產生的公開金鑰。複製公開金鑰，並將其貼到您的 VM 設定中，方法是複製 SSH 公開金鑰中 id_ed25519.pub 的完整內容。您也希望允許您的 VM 接受輸入的 SSH 流量，方法是選取允許選取的連接埠，並從選取輸入連接埠下拉式清單中選擇 SSH (22)。

Add SSH public key to VM

自動關機

使用 Azure VM 的一個很棒的功能是能夠啟用自動關機 (因為老實說，我們都會忘記關閉我們的 VM...)。如果您前往管理索引標籤，您可以設定您希望每天關閉 VM 的時間。

Virtual machine auto-shutdown

選取檢閱 + 建立，然後選取建立，Azure 將為您部署您的 VM！

部署完成後 (可能需要幾分鐘)，前往您的虛擬機器的新資源檢視。

使用 SSH 連線

現在您已經建立 SSH 主機，讓我們連線到它！

您會注意到狀態列左下角有一個指示器。此指示器會告訴您 VS Code 正在哪個環境 (本機或遠端) 中執行。按一下指示器以帶出 Remote 擴充功能命令清單。

Remote extension commands

在 Remote-SSH 區段中選擇連線到主機... 命令，並以 user@hostname 的格式輸入 VM 的連線資訊，以連線到主機。

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 擴充功能也會在您的活動列上新增一個新的圖示，按一下該圖示將開啟遠端瀏覽器。從下拉式選單中，選取 SSH 目標，您可以在其中設定您的 SSH 連線。例如，您可以儲存您最常連線的主機，並從這裡存取它們，而無需輸入使用者和主機名稱。

Remote button on Activity bar

一旦您連線到 SSH 主機，您就可以與遠端機器上的檔案互動並開啟資料夾。如果您開啟整合式終端機 (⌃` (Windows、Linux Ctrl+`))，您會看到您正在 Windows 上的 bash shell 內工作。

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 產生器工具來建立新的 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 應用程式預設在 http://localhost:3000 上執行。您不會在本機瀏覽器的 localhost:3000 上看到任何內容，因為 Web 應用程式正在您的虛擬機器上執行。

連接埠轉送

為了能夠在本機瀏覽器中瀏覽 Web 應用程式，您可以利用另一個稱為連接埠轉送的功能。

為了能夠存取遠端機器上可能未公開公開的連接埠，您需要在本機上的連接埠與伺服器之間建立連線或通道。在應用程式仍在執行的情況下，開啟 SSH 瀏覽器並找到已轉送的連接埠檢視。按一下轉送連接埠連結，並指示您要轉送連接埠 3000

Enter the port to forward

將連線命名為「瀏覽器」

Name the port

伺服器現在會將連接埠 3000 上的流量轉送到您的本機。當您瀏覽至 http://localhost:3000 時，您會看到正在執行的 Web 應用程式。

Running Express Application

編輯和偵錯

從 Visual Studio Code 檔案總管 (⇧⌘E (Windows、Linux Ctrl+Shift+E)) 中，導覽至您的新 myExpressApp 資料夾，然後按兩下 app.js 檔案以在編輯器中開啟它。

IntelliSense

您擁有 JavaScript 檔案的語法醒目提示以及具有 hover 的 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。

恭喜

恭喜，您已成功完成本教學課程！

接下來，查看其他遠端開發擴充功能。

或安裝 Remote Development 擴充功能套件以取得所有擴充功能。

04/03/2025