參加你附近的 ,瞭解 VS Code 中的 AI 輔助開發。

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

遠端狀態列項可以快速顯示 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 公鑰源的下拉選單中選擇使用現有公鑰,以便可以使用你剛剛生成的公鑰。複製 id_ed25519.pub 的全部內容,將其貼上到SSH 公鑰中,以將其新增到你的 VM 設定。你還需要透過選擇允許選定的埠並從選擇入站埠下拉列表中選擇SSH (22)來允許你的 VM 接受入站 SSH 流量。

Add SSH public key to VM

自動關機

使用 Azure VM 的一個很酷的功能是能夠啟用自動關機(因為我們都忘記關閉我們的 VM……)。如果你進入管理選項卡,你可以設定你希望每天關閉 VM 的時間。

Virtual machine auto-shutdown

選擇審查並建立,然後選擇建立,Azure 將為你部署你的 VM!

部署完成後(可能需要幾分鐘),進入你虛擬機器的新的資源檢視。

使用 SSH 連線

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

你可能已經注意到狀態列左下角的指示器。此指示器告訴你 VS Code 正在執行的上下文(本地或遠端)。單擊指示器以調出遠端擴充套件命令列表。

Remote extension commands

Remote-SSH 部分選擇 Connect to Host... 命令,並透過以下格式輸入你的 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 擴充套件還在你的活動欄上添加了一個新圖示,點選它將開啟遠端資源管理器。從下拉選單中,選擇 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 生成器工具來構建(建立)一個新的 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 上看到任何內容,因為 Web 應用程式正在你的虛擬機器上執行。

埠轉發

為了能夠在你的本地機器上瀏覽 Web 應用程式,你可以利用另一個功能,稱為埠轉發

為了能夠訪問遠端機器上可能未公開的埠,你需要在本地機器上的埠和伺服器之間建立連線或隧道。在應用程式仍在執行的情況下,開啟 SSH 資源管理器並找到轉發的埠檢視。點選轉發埠連結,並指示你希望轉發埠 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

除錯

透過點選行號左側的行間空白或將游標放在行上並按 F9,在 app.js 的第 10 行設定一個斷點。斷點將顯示為一個紅色的圓圈。

set breakpoint

現在,按 F5 執行你的應用程式。如果被問及如何執行應用程式,選擇Node.js

應用程式將啟動,你將命中斷點。你可以檢查變數、建立監視器並導航呼叫堆疊。

F10 單步執行或再次按 F5 結束除錯會話。

VS Code debug view

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

結束你的 SSH 連線

你可以透過檔案 > 關閉遠端連線來結束你的 SSH 會話並回到本地執行 VS Code。

恭喜

恭喜,你已成功完成本教程!

接下來,檢視其他遠端開發擴充套件。

或者透過安裝遠端開發擴充套件包獲取所有這些擴充套件。