遠端開發環境架設: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 第 9 期:Ghost 發布 6.0 版本

Ghost Release 新版了!距離上次大版號更新,已經過了 3 年多,這幾年來,創作者經濟變化得很快,Ghost 也嘗試讓創作者更容易經營自己的內容。 我會等 6.0 發布一陣子,穩定下來後才會更新。很期待他們下一步會是什麼。 🗞️ 熱門新聞 Ghost 6.0 Ghost Release 6.0。 兩個重量級更新:支援 ActivityPub,讓 Ghost 可以 Leverage 社群媒體分發渠道;以及內建 Analytics,支援流量分析。這剛好就是兩個我最想要的功能,Great Work。 常說經營內容的痛點在,不知道如何發佈內容,不知道訪客從哪來。當然這都可以用工具協助,例如設定 GA、或者使用 Postiz 等來經營社群,可是我覺得一個好的平台應該要替創作者處理掉這些事,Ghost

By Ken Chen

Weekly Issue 第 8 期:數位時代的遷徙自由

以前在開發內容平台產品時,常常想,如果有天我們的使用者要離開平台,他們擁有自由嗎?在現代,數位創作者有點像是佃農,替平台生產內容,可是因為數位落差,他們沒有移動的能力。 隨著時代進步,法規應該要與時俱進,這期選了數位部的公告草案,告訴我們科技與制度可以如何相輔相成。 另外,從本期開始,加入了目錄大綱,希望讓讀者閱讀時能更容易在不同議題間切換。 🗞️ 熱門新聞 社交資料可攜權與互通性 在唐鳳那看到這則消息,最近衛城出版編輯的帳號被無預警停權,引發討論,我自己也常常焦慮,當使用這些便利的平台服務時,我們是不是交出一些沒意識到的權利? 身為個人,可行的策略是,在發布內容到平台前,先保留一份在自己手中,但這其中的不平等顯而易見。《數位選擇法案》讓我理解到,創作者有機會在一個更好更平等的環境下創作。 我希望台灣也能有這樣的一天。 I gave the AI arms and legs – then it rejected me 在 HN 上看到的新聞,有名開發者發現自己的函式庫被用在 Claude

By Ken Chen

Weekly Issue 第 7 期:從 GitHub Spark 看 Prompt 工程

近期開始有人建議用 Context Engineering 來取代 Prompt Engineering,的確相較於 Prompt,Context 是更精確的用詞。前一期也提到,當 Duolingo 的 CEO 被問到 AI 是否只是模型套皮時,他也說模型一定有影響,但更多是關乎你的 Context。 那麼,業界現在是如何看待 Prompt 的呢?Github Spark 跟 V0 的例子或許能提供一些參考。 🗞️ 熱門新聞 Using GitHub Spark to reverse engineer GitHub Spark GitHub Spark 最近推出公開預覽,讓你可以用 prompt 直接開發應用。 作者用逆向工程,找出 Spark 的 system

By Ken Chen

Weekly Issue 第 6 期:Duolingo CEO 看 AI 與遊戲化

現在是 AI 時代,大家都在想怎麼讓自己的產品跟 AI 掛勾,但具體要怎麼做呢?背後的思考有哪些?Duolingo 給出他們自己的觀點。 例如,現在的產品是否只是 AI 套皮,你接收使用者的問題,套上自己的提詞後,拿去給 OpenAI,要它回答你?在現在百家爭鳴的情況下,選擇哪個模型會有差嗎?AI 能帶來新用戶與新營收嗎?等等。 另外本週也選了一篇少數派的文章,談 AI 對 RSS 的影響,對 RSS 未來方向有興趣的人不妨看看。 🗞️ 熱門新聞 Duolingo CEO Luis von Ahn wants you addicted to learning Duolingo CEO 專訪,相當紮實,推薦閱讀。 「對我們來說,

By Ken Chen