使用VSCode Remote透過 SSH 進行遠端開發

使用VSCode Remote透過 SSH 進行遠端開發

前言廢話

這幾天在練習前端開發的時候看到一個Youtuber介紹了 VScode in the cloud，它是使用一個專案code-server，它可以讓你在伺服器上建立一個 VSCode環境，並讓你遠端使用瀏覽器連線進去使用，看起來極其炫泡XD，我就不多做介紹了github連結在前面可以參考一下

code-server

但是思考跟爬文了一下，感覺蠻吃資源以及看到有人反應開啟較大的檔案的時候就會奇卡無比，期待這個專案能夠在繼續優化。

後來就繼續找了一下其他Remote的解決方案，原來在今年5月 PyCon 2019 大會上，微軟發布了 VSCode Remote 的VSCode套件，並且在6月更新的版本中正式發布，終於支援遠端開發啦!!!
此次微軟提供了三種遠端連線方法

SSH 連接到實體/虛擬Linux主機(目前只提供給x86_64)
連接Container
連接WSL

SSH連線

那麼我們就來試試看其中的使用SSH遠端連線到主機進行開發吧!

安裝

安裝VSCode以及擴充插件

當然首先要安裝VSCode啦
接著在Extension搜尋remote就可以看到了，這邊我們選擇安裝SSH的

安裝完成後我們就可以看到在左側新增了一個新的Remote欄位

安裝SSH client

在本機端的部分因為要使用SSH所以也必須安裝作業系統對應的SSH客戶端哦
因為我是用Windows系統，微軟這邊提供安裝 OpenSSH 請參考裡面的說明ㄅ

設定

VSCode設定

首先呢先到VScode的設定 設定>延伸模組>Remote-SSH 中將Remote.SSH: Show Login Terminal 打開

SSH設定

遠端開發插件提供我們使用Pubkey和密碼的方式進行連接，不過如果使用密碼，每次都需要手動輸入密碼，不太方便。所以這裡介绍使用Pubkey的方式進行遠端連線。我們首先要做的事情當然就是設定SSH Pubkey啦，必須將我們本地端Pubkey（id_rsa.pub）加入到SSH主機上相應的authorized_keys檔案中。

生成Pubkey並加入遠端主機中

檢查本機上是否已有SSH密鑰。Pubkey通常在Windows上的%USERPROFILE%\.ssh\id_rsa.pub中。
如果沒有密鑰，請在本機的command line運行以下命令來生成SSH密鑰

ssh-keygen -t rsa -b 4096

產生後就可以在資料夾中看到下列檔案

config檔案是Remote-SSH的設定文件，表示等下我們使用這個資料夾下的rsa密鑰去連線遠端伺服器。後面會設定這個部分

接著我們要將生成的Pubkey加入到遠端主機中~/.ssh/authorized_keys的檔案內，如果沒有的話請自行創建此資料夾與檔案

Create the .ssh directory:

mkdir ~/.ssh

Set the right permissions:

chmod 700 ~/.ssh

Create the authorized_keys file:

touch ~/.ssh/authorized_keys

Set the right permissions:

chmod 600 ~/.ssh/authorized_keys

創建好了之後就把你本機端的id_rsa.pub的內容複製到伺服器端的authorized_keys檔案中
這邊SSH設定就完成啦~

VSCode設定文件

接著我們來設定剛剛提到的config文件
在VSCode中輸入快捷鍵Ctrl+Shift+P開啟命令列輸入remote，選擇Remote-SSH: Open Configuration File選項

接著會跳出

選擇剛剛Pubkey路徑下的config檔案，開啟後輸入

Host LabServer             #填寫別名例如 LabSever
    HostName 172.31.00.00  #主機名稱或是ip位置
    User root              #登入的使用者名稱
    Port                   #如果有指定的Port號

儲存後完成設定