vscode遠端編程終極方案

原創

2021-01-30 10:39

寫在最前面（爲了過審覈）：本文所提技術不需要訪問任何國外的VPN，VPN不等同於翻牆，本文中提到的VPN指的是校園網。

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

首先展示一下最終效果：

遠端服務器上的vscode的編程體驗與local模式幾乎一致，有個缺點是無法通過EXTENSIONS市場來一鍵安裝插件（替代方案是利用VSIX，參考鏈接）。

需要用到的工具：

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

具體步驟：

遠端目標機部署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），退到外面來，接下來就沒遠端服務器什麼事了。
在本地開啓校園網VPN，連進校園網。我校用的是anyconnect，直接照常連上就行。
在MobaXterm上設置Tunnel，配置如下，端口號a可以自定義： -> ->
打開瀏覽器，輸入127.0.0.1:端口號a，如果成功的話會讓你輸入一開始設置的密碼。
開始你的遠端編程吧~ 只要有瀏覽器就行！