透過 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 擴充套件後,你會在最左側看到一個新的狀態列項。
遠端狀態列項可以快速顯示 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
的資料夾)。
然後會提示你輸入一個安全的密碼短語,但你可以將其留空。你現在應該有一個包含新公共 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 流量。
自動關機
使用 Azure VM 的一個很酷的功能是能夠啟用自動關機(因為我們都忘記關閉我們的 VM……)。如果你進入管理選項卡,你可以設定你希望每天關閉 VM 的時間。
選擇審查並建立,然後選擇建立,Azure 將為你部署你的 VM!
部署完成後(可能需要幾分鐘),進入你虛擬機器的新的資源檢視。
使用 SSH 連線
現在你已經建立了一個 SSH 主機,讓我們連線到它!
你可能已經注意到狀態列左下角的指示器。此指示器告訴你 VS Code 正在執行的上下文(本地或遠端)。單擊指示器以調出遠端擴充套件命令列表。
在 Remote-SSH 部分選擇 Connect to Host... 命令,並透過以下格式輸入你的 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 擴充套件還在你的活動欄上添加了一個新圖示,點選它將開啟遠端資源管理器。從下拉選單中,選擇 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 生成器工具來構建(建立)一個新的 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。
將連線命名為“browser”
伺服器現在將埠 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。
恭喜
恭喜,你已成功完成本教程!
接下來,檢視其他遠端開發擴充套件。
或者透過安裝遠端開發擴充套件包獲取所有這些擴充套件。