使用 Visual Studio Code 進行遠端 SSH
2019 年 7 月 25 日，作者：Sana Ajani，@sana_ajani
遠端 - SSH：簡單、流暢，如本地般體驗
如果您錯過了，Visual Studio Code 最近釋出了遠端開發擴充套件。遠端擴充套件允許您在容器、遠端機器或虛擬機器 (VM) 或適用於 Linux 的 Windows 子系統 (WSL) 上進行開發，同時使用具有完整功能集的 VS Code 作為您的開發環境。
無限可能：您不受限於本地機器
越來越多的開發人員從事大型複雜專案，這些專案需要他們在提供比普通筆記型電腦更多儲存或計算能力的專用開發 VM 或伺服器上工作。
然而，這種開發方式也帶來了不少挑戰
- 如果您使用遠端訪問軟體（如 VNC），您可能會在編輯時遇到延遲，因為您的 UI 不再位於本地。
- 如果您使用遠端桌面協議 (RDP)，管理多個連線可能會很困難。
- 掛載遠端檔案系統和執行批次操作可能會很慢。
- 保持遠端和本地環境同步很麻煩，而且您經常會遇到一些問題，即某個地方可以正常工作，而另一個地方則不行。
- 使用 SSH 和 Vim 遠端編輯檔案意味著您不再處於您習慣使用的程式碼編輯器帶來的舒適區。
如果能在不放棄您的工具的情況下打破本地機器的物理限制，那該多好。現在，遠端 - SSH 擴充套件的魔力就來了。
使用 Linux 進行遠端開發
只要您的 Linux VM 支援 SSH，它就可以託管在任何地方；在您的本地主機上、內部部署、Azure 中或任何其他雲中。您也可以使用任何客戶端 - Windows、macOS 或 Linux。
注意：目前尚不支援 macOS 和 Windows SSH 主機。
在這篇部落格文章中，我們將使用 Windows 客戶端並以 Azure 上的 Linux VM 為目標。
開始使用
要開始使用，您需要完成以下操作
- 安裝一個與 OpenSSH 相容的 SSH 客戶端（不支援 PuTTY）。
- 安裝Visual Studio Code。
- 擁有 Azure 訂閱（如果您沒有 Azure 訂閱，請在開始之前建立一個免費帳戶）。
建立 VM
如果您沒有現有的 Linux 虛擬機器，您可以透過 Azure 門戶建立一個新的 VM。在 Azure 門戶中，搜尋“虛擬機器”，然後選擇新增。從那裡，您可以選擇您的 Azure 訂閱並建立一個新的資源組（如果您還沒有）。
現在您可以指定 VM 的詳細資訊，例如名稱、大小和基礎映像。在本例中，我們將選擇 Ubuntu Server 18.04 LTS，但您可以選擇其他 Linux 發行版的最新版本並檢視我們支援的 SSH 伺服器。
設定 SSH
有幾種連線 VM 的身份驗證方法，包括 SSH 公鑰/私鑰對或使用者名稱和密碼。我們強烈建議使用基於金鑰的身份驗證，這樣您就不必在每次連線時輸入密碼。如果您使用的是 Windows 並且已經使用 PuttyGen 建立了金鑰，您可以重用它們。
如果您沒有 SSH 金鑰對，請開啟 bash shell 或命令列並輸入
ssh-keygen -t ed25519
這將生成 SSH 金鑰。在以下提示符處按 Enter 鍵以將金鑰儲存在預設位置。
然後系統會提示您輸入安全的密碼，但您可以將其留空。
將 SSH 金鑰新增到您的 VM
在上一步中，我們生成了一個 SSH 金鑰對。我們將獲取公鑰並將其貼上到我們的 VM 設定中，方法是複製 id_ed25519.pub 的內容。您還需要允許您的 VM 接受入站 SSH 流量。
使用 Azure VM 的一個很酷的功能是能夠啟用自動關機（因為我們都忘了關閉我們的 VM...）。如果您轉到管理選項卡，您可以設定每天關閉 VM 的時間。
選擇檢視並建立，Azure 將為您部署 VM！
使用遠端 - SSH 連線
現在我們已經介紹瞭如何建立 SSH 主機，讓我們連線到它！
VS Code 遠端 - SSH 擴充套件允許您使用 SSH 連線到遠端機器或 VM，所有這些都在 VS Code 內部完成。如果您尚未安裝遠端 - SSH 擴充套件，您可以在擴充套件檢視 (Ctrl + Shift + X) 中搜索“remote ssh”。
您會注意到狀態列左下角有一個指示器。此指示器告訴您 VS Code 正在哪個上下文中執行（本地或遠端）。單擊指示器以調出遠端擴充套件命令列表。
選擇 Remote-SSH: Connect to Host 命令，並使用以下格式輸入 VM 的連線資訊來連線到主機：user@hostname。
user 是您在將 SSH 公鑰新增到 VM 時設定的使用者名稱。對於 hostname，返回 Azure 門戶，在建立的 VM 的概述窗格中，複製公共 IP 地址。
在連線資訊文字框中設定 user 和 hostname。
VS Code 現在將開啟一個新視窗（例項）。然後您將看到一條通知，指出“VS Code Server”正在 SSH 主機上初始化。一旦 VS Code Server 安裝在遠端主機上，它就可以執行擴充套件並與您的本地 VS Code 例項通訊。
透過檢視狀態列中的指示器，您將知道您已連線到 VM。現在它顯示了我們 VM 的主機名！
遠端 - SSH 擴充套件還在活動欄上貢獻了一個新圖示，單擊它將開啟 SSH 資源管理器。您可以在此處配置您的 SSH 連線。例如，您可以儲存您經常連線的主機，並從此處訪問它們，而不是輸入 user 和 hostname。
連線到 SSH 主機後，您可以與遠端機器上的檔案進行互動並開啟資料夾。如果您開啟整合終端，您會看到您正在 Windows 上工作while you're on Windows。等等，我們已經連線到我們的 VM 了嗎？這太容易了。這就是重點。這些擴充套件使遠端開發感覺簡單、流暢，並且……嗯，不那麼遠端。😃
您可以使用 bash shell 瀏覽 VM 上的檔案系統。使用 mkdir demo 建立一個名為“demo”的新資料夾，您可以使用檔案 > 開啟資料夾瀏覽並開啟遠端主目錄上的資料夾。
您還可以專門在遠端 SSH 主機上安裝擴充套件。影響 UI 的擴充套件（如主題和程式碼片段）安裝在本地，其餘擴充套件需要安裝在遠端 SSH 主機上。您會注意到開啟擴充套件檢視時有兩個部分，一個用於本地機器上的擴充套件，一個用於遠端主機上的擴充套件。即使您從不同的客戶端 SSH 連線到遠端機器，您的遠端擴充套件和設定也將保持不變。當您安裝擴充套件時，VS Code 將自動在正確的上下文中安裝它。
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 擴充套件尚未安裝在遠端機器上，您將看到一條通知，推薦Microsoft Python 擴充套件。
選擇安裝，重新載入 VS Code，您將開始在遠端機器上看到 VS Code 的 IntelliSense 和顏色高亮顯示。
要執行應用程式，請按 F5，然後選擇 Flask 除錯配置。在 Python 除錯控制檯中，您會看到應用程式正在 localhost 的埠 5000 上執行。但是，localhost 目前指的是遠端伺服器，而不是您的本地機器。為了能夠在本地機器上瀏覽 Web 應用程式，我們將利用另一個功能，稱為埠轉發。
為了能夠訪問遠端機器上可能未公開暴露的埠，我們需要在本地機器上的埠和伺服器之間建立連線或隧道。在應用程式仍在執行時，開啟 SSH 資源管理器並找到轉發埠檢視。單擊轉發埠連結並指明我們要轉發埠 5000
將連線命名為“browser”
伺服器現在會將埠 5000 上的流量轉發到我們的本地機器。當您瀏覽到 https://:5000 時，您會看到正在執行的 Web 應用程式。
現在，真正的問題是……我們可以在遠端機器上的 VS Code 中進行除錯嗎？是的！在應用程式仍在執行時，在返回字串“Hello Remote World”的行上設定一個斷點，然後選擇除錯控制元件中的重新啟動按鈕。在瀏覽器中重新整理頁面，您將命中斷點！您獲得了相同的 VS Code 體驗，包括編輯、除錯以及所有設定和擴充套件。😊
要切換回本地機器進行本地開發，請使用檔案 > 關閉遠端連線關閉遠端連線。
使用遠端 - SSH 擴充套件，您可以在遠端機器上使用 VS Code 的所有生產力功能和擴充套件來處理 VM。無論您的程式碼託管在哪裡，您都可以獲得您熟悉和喜愛的 VS Code 全功能開發體驗。
如果您想了解有關 VS Code Remote 的更多資訊，您可以閱讀我們宣佈遠端開發的部落格文章。您還可以試用其他遠端擴充套件，開發容器和 WSL，並閱讀我們完整的遠端開發文件。
遠端編碼愉快！
Sana Ajani，VS Code 專案經理 @sana_ajani