# 使用VSCode Remote透過 SSH 進行遠端開發
[TOC]
## 前言廢話
這幾天在練習前端開發的時候看到一個Youtuber介紹了 [VScode in the cloud](https://www.youtube.com/watch?v=9Emn2YQNDl0)，它是使用一個專案[code-server](https://github.com/cdr/code-server)，它可以讓你在伺服器上建立一個 VSCode環境，並讓你遠端使用瀏覽器連線進去使用，看起來極其炫泡XD，我就不多做介紹了github連結在前面可以參考一下


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

後來就繼續找了一下其他Remote的解決方案，原來在今年5月 PyCon 2019 大會上，微軟發布了 [VSCode Remote](https://code.visualstudio.com/docs/remote/remote-overview) 的VSCode套件，並且在6月更新的版本中正式發布，終於支援遠端開發啦!!!
此次微軟提供了三種遠端連線方法
- SSH 連接到實體/虛擬Linux主機(目前只提供給x86_64)
- 連接Container
- 連接WSL


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

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


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

### 安裝SSH client
**在本機端的部分因為要使用SSH所以也必須安裝作業系統對應的SSH客戶端哦**
因為我是用Windows系統，微軟這邊提供安裝 [OpenSSH](https://docs.microsoft.com/zh-tw/windows-server/administration/openssh/openssh_install_firstuse) 請參考裡面的說明ㄅ

## 設定
### 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```的檔案內，如果沒有的話請自行創建此資料夾與檔案
1. Create the .ssh directory:

mkdir ~/.ssh

2. Set the right permissions:

chmod 700 ~/.ssh

3. Create the authorized_keys file:

touch ~/.ssh/authorized_keys

4. 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號

儲存後完成設定

## 連線
設定完成後點擊左邊的Remote-SSH圖案，connection下就會有剛剛設定好的遠端主機，點擊右邊的已新視窗開啟


如果沒設定沒問題的話就會跳出新視窗進行連線了
會在右下角顯示目前的連接狀況


連接完成左下角會顯示目前連線的主機


:::warning
此終端機會一直顯示這樣的狀況，不用擔心
如果需要使用終端機可以在旁邊的下拉選單選取bash使用
:::

## 使用
成功連上之後就可以開始進行遠端開發啦~
左側點選到檔案總管>開啟資料夾


就可以看到遠端機器上的檔案了，選擇做為開發的資料夾進行開啟就可以使用啦!


:::warning
以上，上面的設定皆是在我的主機配置狀況下可以正常運行，如果各位在設定過程中出現問題請參考google大神或是下面的參考連結3的官方文件。
:::

## 參考連結
1. [Win10 OpenSSH安裝](https://docs.microsoft.com/zh-tw/windows-server/administration/openssh/openssh_install_firstuse)
2. [遠端機器建立authorized_keys檔案]( https://askubuntu.com/questions/466549/bash-home-user-ssh-authorized-keys-no-such-file-or-directory)
3. [VSCode SSH Remote設定](https://code.visualstudio.com/docs/remote/ssh)