🚀 在 VS Code 中免費取得 ！

使用 Visual Studio Code 進行遠端 SSH 連線

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

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

如果您錯過了，Visual Studio Code 近期發布了遠端開發擴充功能。遠端擴充功能讓您能以容器、遠端機器或虛擬機器 (VM)，或 Windows Subsystem for Linux (WSL) 作為開發目標，同時使用具備完整功能的 VS Code 作為您的開發環境。

Remote SSH architecture

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

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

然而，這類開發方式也帶來了不少挑戰

  • 如果您使用遠端存取軟體 (例如 VNC)，您可能會在編輯時遇到延遲，因為您的使用者介面不再是本機端的。
  • 如果您使用遠端桌面協定 (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 擴充功能讓您可以使用 SSH 從 VS Code 內部連線到遠端機器或 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 埠上的流量轉送到我們的本機電腦。當您瀏覽至 http://localhost:5000 時，您會看到正在執行的 Web 應用程式。

Hello Remote World in a browser

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

Debugging over SSH

若要切換回本機電腦進行本機開發，請使用 [檔案] > [關閉遠端連線] 關閉遠端連線。

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

如果您想進一步了解 VS Code Remote，您可以閱讀我們宣布遠端開發的部落格文章。您也可以試用其他遠端擴充功能 Dev Containers 和 WSL，並閱讀我們完整的遠端開發文件。

遠端編碼愉快，

Sana Ajani，VS Code 專案經理 @sana_ajani