🚀 在 VS Code 中！

使用 Visual Studio Code 進行遠端 SSH

2019 年 7 月 25 日，作者：Sana Ajani，@sana_ajani

Remote - SSH：輕鬆、流暢，且（如同）本機

如果您錯過了，Visual Studio Code 最近發布了「遠端開發擴充功能」。遠端擴充功能讓您可以使用完整功能的 VS Code 作為開發環境，針對容器、遠端機器或虛擬機器 (VM) 或 Windows Linux 子系統 (WSL) 進行開發。

Remote SSH architecture

無限可能：你不受限於本機

越來越多開發人員處理大型且複雜的專案，這些專案需要他們使用專門的開發 VM 或伺服器，因為這些 VM 或伺服器提供的儲存空間或運算能力比一般筆記型電腦更強大。

然而，這類型的開發也帶來了相當多的挑戰

  • 如果您使用遠端存取軟體 (例如 VNC)，您可能會在編輯時遇到延遲，因為您的 UI 不再是本機的。
  • 如果您使用遠端桌面協定 (RDP)，則可能難以管理多個連線。
  • 掛載遠端檔案系統和執行大量操作可能會很慢。
  • 保持遠端和本機環境同步非常麻煩，而且您經常會遇到問題，某些東西在一個地方可以運作，但在另一個地方卻不行。
  • 使用 SSH 和 Vim 遠端編輯檔案意味著您不再能舒適地使用您慣用的程式碼編輯器。

如果能在不放棄工具的情況下，突破本機的實體限制，豈不是很好嗎？現在，「Remote - SSH 擴充功能」的魔力來了。

使用 Linux 進行遠端開發

只要您的 Linux VM 支援 SSH，它就可以託管在任何地方；在本機主機上、內部部署、在 Azure 中或在任何其他雲端中。您也可以使用任何用戶端 - Windows、macOS 或 Linux。

注意：macOS 和 Windows SSH 主機尚不受支援。

在這篇部落格文章中，我們將使用 Windows 用戶端並以 Azure 上的 Linux VM 為目標。

開始使用

若要開始使用，您需要完成以下事項

  1. 安裝與 OpenSSH 相容的 SSH 用戶端 (不支援 PuTTY)。
  2. 安裝 Visual Studio Code。
  3. 擁有 Azure 訂用帳戶 (如果您沒有 Azure 訂用帳戶，請先建立免費帳戶再開始)。

建立 VM

如果您沒有現有的 Linux 虛擬機器，您可以透過 Azure 入口網站建立新的 VM。在 Azure 入口網站中，搜尋「虛擬機器」，然後選擇「新增」。從那裡，您可以選取您的 Azure 訂用帳戶並建立新的資源群組 (如果您還沒有的話)。

Create a virtual machine

現在您可以指定 VM 的詳細資訊，例如名稱、大小和基礎映像。在此範例中，我們將選擇 Ubuntu Server 18.04 LTS，但您可以選擇其他 Linux 發行版的最新版本，並查看我們支援的 SSH 伺服器。

Virtual machine instance details

設定 SSH

有幾種驗證 VM 的方法，包括 SSH 公開/私密金鑰組或使用者名稱和密碼。我們強烈建議使用金鑰式驗證，這樣您每次連線時都不需要輸入密碼。如果您使用 Windows 並且已經使用 PuttyGen 建立金鑰，您可以重複使用它們。

如果您沒有 SSH 金鑰組，請開啟 bash shell 或命令列並輸入

ssh-keygen -t ed25519

這將產生 SSH 金鑰。在下列提示中按 Enter 鍵，將金鑰儲存到預設位置。

ssh-keygen output

接著系統會提示您輸入安全密碼，但您可以留白。

將 SSH 金鑰新增至 VM

在上一個步驟中，我們產生了 SSH 金鑰組。我們將取得公開金鑰並將其貼到我們的 VM 設定中，方法是複製 id_ed25519.pub 的內容。您也需要允許您的 VM 接受輸入的 SSH 流量。

Add SSH public key to VM

使用 Azure VM 的一項很棒的功能是能夠啟用自動關機（因為老實說，我們都會忘記關閉我們的 VM…）。如果您前往「管理」索引標籤，您可以設定您想要每天關閉 VM 的時間。

Virtual machine auto-shutdown

選取「檢閱 + 建立」，Azure 就會為您部署 VM！

使用 Remote - SSH 連線

現在我們已經介紹了如何建立 SSH 主機，讓我們連線到它！

VS Code Remote - SSH 擴充功能可讓您從 VS Code 內部使用 SSH 連線到遠端機器或 VM。如果您尚未安裝 Remote - SSH 擴充功能，您可以在「擴充功能」檢視 (Ctrl + Shift + X) 中搜尋「remote ssh」。

Remote SSH extension

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

Remote extension commands

選擇「Remote-SSH：連線到主機」命令，並以 user@hostname 格式輸入 VM 的連線資訊，以連線到主機。

user 是您在將 SSH 公開金鑰新增至 VM 時設定的使用者名稱。對於 hostname，請回到 Azure 入口網站，並在我們建立的 VM 的「概觀」窗格中，複製「公用 IP 位址」。

Virtual machine public IP address

在連線資訊文字方塊中設定使用者和主機名稱。

Set user and host name

VS Code 現在將開啟一個新視窗 (執行個體)。接著您會看到通知，指出「VS Code 伺服器」正在 SSH 主機上初始化。一旦 VS Code 伺服器安裝在遠端主機上，它就可以執行擴充功能並與您的本機 VS Code 執行個體通訊。

Initializing VS Code Server

您會透過查看狀態列中的指示器來知道您已連線到您的 VM。現在它會顯示我們 VM 的主機名稱！

SSH indicator in Status bar

Remote - SSH 擴充功能也會在您的活動列上新增一個新的圖示，按一下它將會開啟 SSH 瀏覽器。您可以在這裡設定您的 SSH 連線。例如，您可以儲存您最常連線的主機，並從這裡存取它們，而無需輸入使用者和主機名稱。

Remote button on Activity bar

一旦您連線到 SSH 主機，您就可以與遠端機器上的檔案互動並開啟資料夾。如果您開啟整合式終端機，您會看到您正在 Windows 上使用 bash shell。等等，我們已經連線到我們的 VM 了嗎？這太容易了吧。這正是重點。這些擴充功能讓遠端開發感覺輕鬆、流暢，而且…嗯，不像是遠端。😃

Checking uname in the terminal

您可以使用 bash shell 瀏覽 VM 上的檔案系統。使用 mkdir demo 建立一個新的資料夾「demo」，您可以使用「檔案」>「開啟資料夾」瀏覽並開啟遠端主目錄上的資料夾。

Remote open folder

您也可以專門在遠端 SSH 主機上安裝擴充功能。影響 UI 的擴充功能 (例如佈景主題和程式碼片段) 會在本機安裝，而其餘擴充功能則需要安裝在遠端 SSH 主機上。當您開啟「擴充功能」檢視時，您會注意到有兩個區段，一個用於本機機器上的擴充功能，另一個用於遠端主機上的擴充功能。即使您從不同的用戶端 SSH 連線到您的遠端機器，您的遠端擴充功能和設定仍會保持不變。當您要安裝擴充功能時，VS Code 會自動將其安裝在正確的內容中。

Intellicode extension installed remotely

Hello World

讓我們將基本的「Hello World」Python 應用程式部署到我們的 VM。我們將使用一個流行的 Python Web 框架，稱為 Flask。在您的 bash shell 中，執行以下命令。

sudo apt install python3-flask

在您稍早建立的「Demo」資料夾中，建立一個名為 app.py 的新檔案 (Ctrl + N)，其中包含基本的 Hello world Flask 應用程式。

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello Remote World! :)"

if __name__ == "__main__":
    app.run()

一旦 VS Code 識別檔案語言為 Python，您就會看到通知，建議您安裝 Microsoft Python 擴充功能 (如果遠端機器上尚未安裝)。

Python extension recommendation

選取「安裝」，重新載入 VS Code，您就會開始在我們的遠端機器上看到 VS Code 的 IntelliSense 和色彩化。

python IntelliSense

若要執行應用程式，請按 F5，然後選取 Flask 偵錯組態。在 Python 偵錯主控台中，您會看到應用程式正在 localhost 的 5000 埠上執行。但是，localhost 目前指的是遠端伺服器，而不是您的本機機器。為了能夠在本機機器上瀏覽 Web 應用程式，我們將利用另一個稱為「埠轉送」的功能。

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

Enter the port to forward

將連線命名為「browser」

Name the port

伺服器現在會將 5000 埠上的流量轉送到我們的本機機器。當您瀏覽至 https://127.0.0.1:5000 時，您會看到正在執行的 Web 應用程式。

Hello Remote World in a browser

現在，真正的問題是…我們可以在遠端機器上的 VS Code 中進行偵錯嗎？可以！在應用程式仍在執行的情況下，在傳回字串「Hello Remote World」的行上設定中斷點，然後選取偵錯控制項中的重新啟動按鈕。重新整理瀏覽器中的頁面，您就會命中中斷點！您將獲得相同的 VS Code 體驗，包括編輯、偵錯以及所有設定和擴充功能。😊

Debugging over SSH

若要切換回本機機器進行本機開發，請使用「檔案」>「關閉遠端連線」關閉遠端連線。

透過使用 Remote - SSH 擴充功能，您可以使用 VS Code 的所有生產力功能和擴充功能在遠端機器上的 VM 上工作。無論您的程式碼託管在哪裡，您都能在 VS Code 中獲得您熟悉且喜愛的完整開發體驗。

如果您想瞭解更多關於 VS Code Remote 的資訊，您可以閱讀我們發布遠端開發公告的部落格文章。您也可以試用其他遠端擴充功能，Dev Containers 和 WSL，並閱讀我們的完整遠端開發文件。

遠端編碼愉快，

Sana Ajani，VS Code 專案經理 @sana_ajani