透過 SSH 進行遠端開發

本教學將引導您使用 Visual Studio Code Remote - SSH 擴充功能,在 Azure 上建立虛擬機器 (VM) 並連線至該 VM。您將建立一個 Node.js Express 網頁應用程式,以展示如何使用 VS Code 在遠端機器上進行編輯與偵錯,就像您的原始程式碼位於本機上一樣。

注意:您的 Linux VM 可以託管在任何地方 — 您的本機主機、地端 (on-premise)、Azure 或任何其他雲端,只要所選的 Linux 發行版本符合這些先決條件即可。

先決條件

若要開始使用,您需要完成下列步驟

  1. 安裝 OpenSSH 相容的 SSH 用戶端(不支援 PuTTY)。
  2. 安裝 Visual Studio Code
  3. 擁有 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

接著系統會提示您輸入安全的密碼片語,但您可以將其留空。您現在應該會有一個包含您的新 SSH 公開金鑰的 id_ed25519.pub 檔案。

注意:如果您使用的是不支援 Ed25519 演算法的舊系統,您可以改用 rsa:ssh-keygen -t rsa -b 4096

將 SSH 金鑰新增至您的 VM

在上一個步驟中,您產生了 SSH 金鑰對。在 SSH public key source 的下拉式選單中選取 Use existing public key,以便使用您剛才產生的公開金鑰。取得公開金鑰並將其貼到您的 VM 設定中,方法是將 id_ed25519.pub 的完整內容複製到 SSH public key 中。您也需要允許您的 VM 接受連入的 SSH 流量,方法是選取 Allow selected ports,然後從 Select inbound ports 下拉式選單中選擇 SSH (22)

Add SSH public key to VM

自動關機

使用 Azure VM 的一個酷炫功能是能夠啟用自動關機(因為老實說,我們都會忘記關閉我們的 VM……)。如果您前往 Management 索引標籤,可以設定您想要每天關閉 VM 的時間。

Virtual machine auto-shutdown

選取 Review and Create,然後選取 Create,Azure 就會為您部署 VM!

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

使用 SSH 連線

既然您已經建立 SSH 主機,讓我們連線到它!

您應該會注意到狀態列左下角有一個指示器。這個指示器會告訴您 VS Code 目前執行的內容(本機或遠端)。按一下該指示器以叫出遠端擴充功能命令清單。

Remote extension commands

Remote-SSH 區段中選擇 Connect to Host... 命令,並以下列格式輸入您的 VM 連線資訊來連線到主機:user@hostname

user 是您將 SSH 公開金鑰新增至 VM 時所設定的使用者名稱。至於 hostname,請返回 Azure 入口網站,並在您建立的 VM 的 Overview 窗格中複製 Public IP address

Virtual machine public IP address

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

注意:如果您遇到錯誤 ssh: connect to host <host ip> port 22: Connection timed out,您可能需要從 VM 的 Networking 索引標籤中刪除 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 Targets,您可以在其中設定 SSH 連線。例如,您可以儲存最常連線的主機,並從這裡存取它們,而不需要輸入使用者和主機名稱。

Remote button on Activity bar

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

Checking uname in the terminal

您可以使用 bash shell 來瀏覽 VM 上的檔案系統。您也可以透過 File > Open Folder 來瀏覽和開啟遠端主目錄上的資料夾。

Remote open folder

建立您的 Node.js 應用程式

在這個步驟中,您將建立一個簡單的 Node.js 應用程式。您將使用應用程式產生器從終端機快速建立應用程式的架構。

安裝 Node.js 與 npm

從整合式終端機 (⌃` (Windows, Linux Ctrl+`)),更新 Linux VM 中的套件,然後安裝 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://:3000 上執行。您不會在本機瀏覽器的 localhost:3000 上看到任何內容,因為網頁應用程式是在您的虛擬機器上執行。

連接埠轉發

為了能夠在本機上瀏覽網頁應用程式,您可以利用稱為連接埠轉發的另一個功能。

為了能夠存取遠端機器上可能未公開暴露的連接埠,您需要在本機上的連接埠與伺服器之間建立連線或通道。在應用程式仍在執行的情況下,開啟 SSH 總管並尋找 Forwarded Ports 檢視。按一下 Forward a port 連結,並指示您要轉發連接埠 3000

Enter the port to forward

將連線命名為 "browser"

Name the port

伺服器現在會將連接埠 3000 上的流量轉發到您的本機。當您瀏覽至 https://:3000 時,您會看到正在執行的網頁應用程式。

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

偵錯

app.js 的第 10 行設定中斷點,方法是在行號左側的裝訂邊中按一下,或將游標放在該行上並按下 F9。中斷點將會顯示為紅色的圓圈。

set breakpoint

現在,按下 F5 來執行您的應用程式。如果您被詢問如何執行應用程式,請選擇 Node.js

應用程式將會啟動,並且您會觸擊中斷點。您可以檢查變數、建立監看式,以及巡覽呼叫堆疊。

按下 F10 進行跨過,或再次按下 F5 以結束您的偵錯工作階段。

VS Code debug view

您可以獲得透過 SSH 連線的 Visual Studio Code 完整開發體驗。

結束您的 SSH 連線

您可以透過 File > Close Remote Connection 結束您的 SSH 工作階段並返回本機執行 VS Code。

恭喜

恭喜,您已成功完成本教學!

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

或者,您可以直接安裝 Remote Development 擴充套件組合,一次取得所有功能。

English 한국어 中文(简体) 中文(繁體)
© . This website operates independently and is not affiliated with or endorsed by Microsoft. All brand names, logos, and trademarks are the property of their respective owners.