遠端開發環境架設:Web 版 VSCode

遠端開發環境架設:Web 版 VSCode
Photo by Yancy Min / Unsplash

手邊一些開發有使用 Flask,因為 Flask 是架在遠端 Server 上,如果本地開發後還要部署到遠端,等於中間多了一個步驟,切來切去很麻煩,所以在想,有沒有機會直接在遠端進行開發?Google 後發現有個 code-server,能用 VSCode 進行 Remote Coding,所以還等什麼呢,來試試看吧。

Use Docker to Deploy code-server

依照 code-server 的 Github,我們可以使用 docker 來架設

# -v bind docker folder to host's folder
# codercom/code-server:v2 is docker image

docker run -it -p 127.0.0.1:8080:8080 -v "${HOME}/.local/share/code-server:/home/coder/.local/share/code-server" -v "$PWD:/home/coder/project" codercom/code-server:v2

docker 會自動去 Docker Hub 將 image 抓下來設置,完成。

好像有點簡單,用瀏覽器來看一下成果

看起來跟本機端的 VSCode 幾乎完全一樣啊!

Use Binary

因為用 docker 真的太簡單了,沒有挑戰性,為了充篇幅,接著來看如果不使用 docker,要使用 binary 來執行的話,可以怎麼做。

GitHub 同樣有 QuickStart Guide

Visit the releases page and download the latest binary for your operating system.Unpack the downloaded file then run the binary.In your browser navigate to localhost:8080.

我的電腦是 Linux,首先依照步驟,先去下載 binary

wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

解壓縮並安裝到 /bin

tar zxvf code-server2.1665-vsc1.39.2-linux-x86_64.tar.gz
cd code-server2.1665-vsc1.39.2-linux-x86_64/
mv code-server ~/bin/
cd
source .bashrc

接著執行

ken@ken-Lenovo-ideapad-330-15ICH:~$ code-server
info  Server listening on [http://localhost:8080](http://localhost:8080)
info    - Password is 803570ed676b5d026417da00
info      - To use your own password, set the PASSWORD environment variable
info      - To disable use `--auth none`
info    - Not serving HTTPS

由瀏覽器可以看到登入頁面,輸入隨機產生的密碼後登入

Set Password

由 Step 2 執行後的結果可以看到,在 code-server 預設上,每次執行會隨機產生一組密碼,要登入就需要輸入。這麼做雖然保障安全性,但是非常麻煩。所幸 code-server 會自行讀取環境變數來設置密碼,因此只需要將使用的密碼設定在環境變數,就能固定用這組密碼登入

export PASSWORD="******"
code-server

小結

code-server 還有其他選項可以設定,就不一一細講了,有興趣可以自己翻GitHub。Remote coding 的優點在 GitHub 上也講得很清楚:

Consistent environment: Code on your Chromebook, tablet, and laptop with a consistent dev environment. develop more easily for Linux if you have a Windows or Mac, and pick up where you left off when switching workstations.Server-powered: Take advantage of large cloud servers to speed up tests, compilations, downloads, and more. Preserve battery life when you're on the go since all intensive computation runs on your server.

你可以在任何地點、任何裝置上,從上次暫停的部分繼續 coding;你可以使用雲端裝置的運算能力,協助你進行編譯、測試,而且省下裝置的電量。這意味著你可以移動--只要有網路的話,所在的地方就是辦公室,不用限定在一格一格死氣沉沉的辦公間或是某張特定的桌子上。

這很讓人振奮不是嗎?要說技術如何改變生活,我想這就是個例子。

Reference

Read more

Weekly Issue 第 15 期:Go 語言從 1.25 支援 Flight Recorder

最近安排旅遊計畫,會到 Brisbane 居住三個月,突然跟熟悉的環境分開,用陌生眼光看待周圍一切,真是個特別的體驗。 世界依然在轉動,只是用了不同速度,反映在每週週報上,是項目變少了,可是內容變長了。 🗞️ 熱門新聞 Flight Recorder in Go 1.25 Go 1.25 開始支援 Flight Recorder。 以前要抓 trace,都是要等到事發後才能抓,有沒有可能事發前抓呢?有,原理很簡單,配置一塊記憶體存放臨時的 trace,如果符合條件,輸出持久化,否則丟棄,這就是 Flight Recorder。 官方給的範例很讚,像 slow request 這類例子,常常是處理 request 時遇到問題,在沒有 Flight Recorder

By Ken Chen

Weekly Issue 第 14 期:Product Hunt 已死

近期台灣技術圈新聞應該要算 Vibe Coding,無獨有偶的是,HN 上也談到類似的議題:行銷跟技術的界線在哪?哪些東西可以包裝成商品販售,哪些則是應該要有基本的自我審核? 🗞️ 熱門新聞 Product Hunt is Dead 有位產品創辦人寫了篇 Blog,標題比較聳動:Product Hunt 已死。 我沒特別 Follow Product Hunt,只有偶爾看看,但看完還是五味雜陳。依照文中所說,當你在 Product Hunt 發布產品後,會有一堆人來跟你說需不需要買讚,這讓我想到以前書市買榜的例子。 有人可能會覺得這是行銷,只是對我來說,行銷跟欺騙還是兩回事。我比較不確定的是,假設今天換個場景,改為無傷大雅的善意謊言,我會同意嗎? ✨ 科技觀點 How to Lead in a Room Full of Experts

By Ken Chen

Weekly Issue 第 13 期:Google 無須出售 Chrome

Chrome 的判決出來了,Google 不用分拆,只需要保障競爭者能跟它公平競爭。 這個判決有指標意義,所有人都知道 Google 長期利用 Chrome 數據改善它的搜尋引擎,讓其他廠商處於競爭劣勢。要解決這問題,最簡單方式是要求 Google 出售 Chrome,而法官在仔細評估後,給出相當審慎的判決。 我喜歡這種法律見解,具有實務與原則的平衡,法律條文不應該是照本宣科。 🗞️ 熱門新聞 Google Can Continue Paying for Firefox Search Deal, Judge Rules 以前很少注意 Chrome 的新聞,剛好最近判決出來了,看了一些。 最驚訝的是,Mozilla 有 85% 的年度收入是由 Google 給的,如果判決禁止 Google 出錢成為瀏覽器預設的搜尋引擎,將直接影響到 Mozilla

By Ken Chen

Weekly Issue 第 12 期:Bear 修改授權條款

通常開源專案需要面對長期維護的問題,而長期維護需要人力(開發者)物力(伺服器與基礎建設),個人開發者來說是個負擔。有些專案會有企業贊助,有些專案則是替用戶提供顧問與服務來收費維持。 這期選了 Bear 修改授權的新聞,也因為這則新聞,順道看了 Sentry 的授權模式。我們都希望擁有健康的開發生態,而授權條款很大程度左右了這點。 🗞️ 熱門新聞 Bear changes license to Elastic License Blog 平台工具 Bear 修改授權,原本是 MIT,現在改用 Elastic License。 看開發者的說法,原因是有人搭便車,fork 完直接部署成服務賣錢。開源不是免費勞工,這樣確實有點過分。Elastic License 的差別是不准以託管方式提供服務,算是補上這個洞。 相對 AGPL 來講,有時這種個人開發的小型專案,也不追求產業影響力,直接用 EL

By Ken Chen