vscode遠端程式設計 終極方案

莫古球球發表於2020-12-26

       很多時候,我們會需要通過筆記本連伺服器進行程式碼除錯,但如果要從校外或是公司外連機房,有時會需要經過多次網路跳轉,例如:你的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路徑新增到~/.bashrcPATH中,方便以後一鍵啟動;
    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

相關文章