vscode遠端程式設計 終極方案

       很多時候，我們會需要通過筆記本連伺服器進行程式碼除錯，但如果要從校外或是公司外連機房，有時會需要經過多次網路跳轉，例如：你的PC -> 學校VPN -> 機房某網段跳板機 -> 遠端目標機。在這種情況下，最簡單的方法是用vim等終端工具進行程式設計，但現在的程式設計工具發展的如此迅速，尤其是vscode這類自定義程度很高的工具的出現，讓我決定花一些時間思考如何讓remote程式設計變得更愉快。經過幾小時的試驗，最終得到了一個我比較喜歡的方案，與大家分享。

       首先展示一下最終效果：

遠端伺服器上的vscode的程式設計體驗與local模式幾乎一致，有個缺點是無法通過EXTENSIONS市場來一鍵安裝外掛（替代方案是利用VSIX，參考連結）。

需要用到的工具：

1. Windows系統的電腦，無論配置多低都ok，平板也ok，只要能執行MobaXterm就行，作為本地裝置；
2. MobaXterm，作為隧道工具（就是因為這個軟體只支援windows系統所以才限定了OS，當然還有其他的tunnel方案可以繞開OS的限制，但比較繁瑣，在這裡就不鋪開介紹了）；
3. Code-server，開源軟體，遠端部署，直接下載到遠端目標機上，codeserver的下載連結。一般來說，如果遠端是Intel的晶片，就選擇下載amd64版本的tar.gz。
4. Tmux工具，在遠端用yum（centos）或者apt-get（ubuntu）安裝一下就行，主要是為了便於後臺執行和管理。
5. 瀏覽器，你的PC上一般都有。

 

具體步驟：

1. 遠端目標機部署code-server。
   1. 解壓codeserver；

      tar -zxvf ./code-server-3.8.0-linux-amd64.tar.gz

       

   2. 把你的code-server的bin路徑新增到~/.bashrc的PATH中，方便以後一鍵啟動；
   3. 先執行一下bin裡面的code-server，然後ctrl+C退出程式，此時會在你的使用者目錄裡生成一個配置檔案，路徑是~/.config/code-server/config.yaml
   4. 配置config.yaml檔案，修改bind-addr成你的目標機IP:你想要的codeserver埠（要用實際的IP，別用localhost或者127.0.0.1），修改password成便於記憶的，用於後面登入驗證；
   5. 在遠端執行tmux，進入後執行code-server（如果沒有新增到PATH裡的話，就在對應bin目錄下執行），成功的話會看到下方紅框內的IP和埠已經變成了你設定的值；
   6. Detach tmux （ctrl+b d），退到外面來，接下來就沒遠端伺服器什麼事了。
2. 在本地開啟你的校園VPN，連進校園網。我校用的是anyconnect，直接照常連上就行。
3. 在MobaXterm上設定Tunnel，配置如下，埠號a可以自定義： ->  ->
4. 開啟你的瀏覽器，輸入127.0.0.1:埠號a，如果成功的話會讓你輸入一開始設定的密碼。
5. 開始你的遠端程式設計吧~ 只要有瀏覽器就行！

 

使用Tips：

1. 保持MobaXterm執行，tunneling別關別斷；
2. 如果server崩了，可以用MobaXterm以SSH的方式登入遠端，attach上Tmux，重啟一下code-server。
3. 寫程式碼時隨手儲存，避免網路問題導致程式碼丟失。

參考連結：

https://zhuanlan.zhihu.com/p/62570740

https://github.com/cdr/code-server/releases

https://github.com/cdr/code-server/blob/v3.8.0/doc/install.md