透過 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

Remote - SSH

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

Remote Status bar item

遠端狀態列項目可以快速向您顯示 VS Code 目前執行的環境(本地或遠端),點擊該項目將會開啟 Remote - SSH 指令。

Remote - SSH commands

建立虛擬機器

如果您沒有現有的 Linux 虛擬機器,您可以透過 Azure 入口網站建立新的 VM。在 Azure 入口網站中,搜尋 "Virtual Machines" 並選擇 新增 (Add)。接著,您可以選擇您的 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

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

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

將 SSH 金鑰新增至您的 VM

在上一個步驟中,您已經產生了 SSH 金鑰配對。在 SSH public key source 下拉選單中選擇 Use existing public key,以便使用您剛剛產生的公開金鑰。複製 id_ed25519.pub 的全部內容並貼上至 VM 設定的 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 擴充功能也會在活動列 (Activity bar) 上新增一個圖示,點擊它將會開啟「遠端總管」(Remote explorer)。從下拉選單中選擇 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 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 應用程式是在您的虛擬機器上執行的。

連接埠轉送 (Port forwarding)

為了能夠在本地機器上瀏覽該 Web 應用程式,您可以利用名為 連接埠轉送 的功能。

若要存取遠端機器上可能未公開對外的連接埠,您需要在本地機器的連接埠與遠端伺服器之間建立連線或通道。在應用程式執行時,開啟 SSH Explorer 並找到 Forwarded Ports 檢視畫面。點擊 Forward a port 連結,並指定您想要轉送的連接埠 3000。

Enter the port to forward

將此連線命名為 "browser"

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

偵錯

app.js 的第 10 行設定中斷點,點擊行號左側的邊界,或是將游標移至該行並按下 F9。中斷點會顯示為一個紅色圓點。

set breakpoint

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

應用程式將會啟動,並觸發您設定的中斷點。您可以檢查變數、建立監看式 (watches) 以及導覽呼叫堆疊。

按下 F10 進行單步執行,或是再次按下 F5 完成您的偵錯工作階段。

VS Code debug view

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

結束 SSH 連線

您可以透過 File > Close Remote Connection 結束 SSH 工作階段,並回到在本地端執行 VS Code 的狀態。

恭喜

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

接下來,請查看其他的遠端開發 (Remote Development) 擴充功能。

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

© . This site is unofficial and not affiliated with Microsoft.