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