遠端開發 – Remote Development

最近幾天在試著尋找遠端開發的方式,主要是想用目前這台新組的pc來做主要開發機。

之所以不用vim,主要還是想先試試先前習慣的開發工具是否可以達到遠端開發的目的,而目前大概試了下面幾種比較省事的方式:

Goland + Code With Me

Code With Me 是在Goland 2020.3 新加入的plugin,主要的功用是讓目前主機的開發者與遠端參與者即時的開發同一個專案,官方也列出了幾個主要的用途:

  • Pair programming – collaborative editing, testing, and debugging.
  • Swarm programming – simultaneously coding together in the single remote IDE.
  • Guiding/Mentoring – inviting a guest or multiple guests to follow you, so you can show and explain the code.

另一種其它用法,就是遠端開發了;主要是在遠端主機上安裝IDE以後,並開啟Code With Me的功能,再複製完邀請連結以後,這樣我們就可以從使用目前的主機開發專案了!

大致的作法為:

(1) 先在遠端開發主機上安裝支援JetBrian的IDE與Code With Me套件。

(2) 透過遠端桌面分享的功能連到要遠端主機

(3) 開啟要分享的專案,點選專案共享的按鈕以後,並設定分享的權限。

(4) 複製一組邀請連結到目前的主機上,類似於 https://code-with-me.jetbrains.com/xxx#p=GO&fp=yyy 的連結,並在browser上開啟以後,就會導到一個IntelliJClient的頁面。

(5) 如果目前主機上沒有IntelliJClient的話,這個頁面會要求目前主機下載並安裝IntelliJClient。

(6) 若一切順利的話,我們就連到遠端主機的專案了,這時所有的開發或相關的debug 都是使用遠端主機的資源。

NOTE:

在實測過程中,安裝IntelliJClient出了點問題,JetBrain的這個頁面有提到大概的解決方式;主要的作法就是刪除之前有問題的IntelliJClient,在重新安裝一次!

以我目前的Macbook pro 為例,就是刪除下面列出的資料夾,再重新安裝一次

${home_dir}/Library/Application Support/JetBrains/IntelliJClient203.5981.98

Reference

Visual Studio Code Server

Visual Studio Code 也提供遠端開發的功能,而它的功能更為方便,只要遠端開發主機上有設定好openssh server,接著就可以透過目前主機的Visual Studio Code 作為Client,使用遠端主機的資源來開發。

大致上的作法為:

(1) 設定好遠端主機的ssh server, 並且設定好一組可以透過key pair 登入遠端的client key。

(2) 在目前主機上的Visual Studio Code 上安裝套件 Remote Development,這是微軟開發的官方套件。

(3) 在目前的Visual Studio Code 上,使用快捷鍵(cmd + shift + p) 來尋找指令 Remote SSH: Connect To Host以後,就可以連到遠端主機了。

(4) 在填寫主機資訊的過程中,可以使用常用的ssh flag 如下:
ssh -i ~/.ssh/my_key user@192.168.0.3

Code-Server

Code-Server是社群開發的另一種遠端開發模式,它基本的原理就是把整個Visual Studio Code 變成一個Web,只要有權限的使用者就可以登入這個網頁並使用Visual Studio Code。

之所以會試這第三種模式主要的原因在於,有時會想說只要帶著iPad 出門的情況下,又需要做一些基本的開發,在這種情況下,除了使用ssh + vim 的方式外,Code-Server 提供了一種新的可能性,而這個也比較接近我平常開發的習慣 -> (Editor or IDE + terminal)。

安裝方式主要是參考官方github的連結

不使用Docker安裝的原因在於,第一次安裝Docker Code-Server時遇到了些執行使用者上(@USER)的問題,所以後來還是決定就本機安裝的方式:

curl -fOL https://github.com/cdr/code-server/releases/download/v3.8.0/code-server_3.8.0_amd64.deb
sudo dpkg -i code-server_3.8.0_amd64.deb sudo systemctl enable --now code-server@$USER
  • 設定要使用的登入password 與listen address,預設的設定檔會在 ~/.config/code-server/config.yaml
  • 如果使用預設的127.0.0.1:8080的話,就只有本機可以透過http://127.0.0.1:8080連到,其它remote的機器會連不到,解決方式可以參考這裡

Secure Remote Access

由於Code-Server在本質上是Visual Studio Code,所以在測試的過程中發現我們是可以開啟系統中的任意檔案(只要檔案權限是可以被@USER所使用的),這可能會造成些安全上的疑慮,所以我試著將listen address綁定到VPN 界面上的ip,這樣就只有VPN user可以連接使用了。

  • 設定 config.yaml的 bind address = 10.0.0.1:3000 (vpn 網路界面的固定ip)
  • 設定iptables,丟棄所有從區網要連接10.0.0.1:3000的封包,這樣一來就只有連到VPN的裝置可以使用Code-Server了。
sudo iptables -A INPUT -s 192.168.3.0/24 -d 10.0.0.1 -p tcp --dport 3000 -j DROP

(取消這條route的指令:sudo iptables -D INPUT -s 192.168.3.0/24 -d 10.0.0.1 -p tcp –dport 3000 -j DROP)

Using iPad

基本上只要連到VPN以後,將browser連到http://10.0.0.1:3000就可以使用Code-Server了,不過如果是使用iPad的話,還可以使用這套軟體Servediter來連接我們的Code-Server。

Reference

Conclusion

  • 目前看來Visual Studio Code 的遠端開發設定更為方便,而且連入遠端主機以後,如果有權限的,可以開啟任何一個路徑下的專案,這已經等於了ssh + vim 的組合了。
  • Code With Me 看來比較適合網路速度較穩定的環境下使用,因為要做到開發遠端主機的某個專案,可能還是得先透過Remote Desktop 的連入遠端主機做設定,再回到目前主機上開發,手續上相對麻煩許多。
    如果網路不順的話,可能Remote Desktop這邊就會有不小的問題了
  • 如果網路穩定的狀況下,或許就可以直接使用Remote Desktop做開發了,而不需要用到Code With Me ?
  • 如果是不能裝Visual Studio Code 與 IntelliJ Client 的情況下,我們還有Code-Server,這樣一來遠端開發的環境看來已經齊全了。