使用 Coder 搭建遠端開發環境
date
Apr 3, 2023
slug
remote-development-environment-with-coder
status
Published
tags
DevOps
summary
始用行動裝置開發的時代真的來臨了
type
Post
去年 GitHub Codespaces 推出時，我就有跑去試玩一下，體驗非常好，使用者可以在 Web IDE 上進行開發，不再受限於本機，在行動裝置上也可輕鬆操作。然而，GitHub Codespaces 的價格偏高，如果全部轉移到 Codespaces 上開發，成本不小。因此我開始尋找這類型的遠端開發平台有沒有現成的 Open Source 解決方案，最後我選擇自架 Coder。
Coder 是什麼
Coder 是一款開源的遠端開發環境，整合多款 IDE，也有支援 web IDE，Dashboard 能控管成員、建立 Template、建立 Workspace，可以輕鬆搭起開發環境。除此之外也支援 Port Forwarding，因此在前端開發時想邊看畫面編開發也能輕鬆搞定。而他的架構是基於 Terraform，可以藉由他去打造不同的 Workspace。你可以用 Docker 跑在本地端，也可以跑在 GCP、AWS、Azure 等環境上。
安裝 Coder
文件上提供很多種安裝方式，這裡我們選擇跑在 Docker 上。因為也剛好使用了 Caddy，所以直接參考官方 GitHub Repository 上的範例。
不過因為我統一跑一台 Caddy 作為 Reverse Proxy ，所以有稍微調整一下設定，最後的
docker-compose.yml 如下：環境變數也寫好後，就可以把服務跑起來，也別忘了 reload Caddy config。
完成後，可以用瀏覽器進入設定好的
CODER_ACCESS_URL ，如果看到 Setup 的畫面，就代表成功囉 🎉
建立第一個 Template
新增完使用者後，我們就可以開始建立第一個 Template。
Coder 的概念是使用 Template 建立 Workspace，而一開始也提供多種 Starter Template 給我們使用。
而我因為手邊沒開其他機器，所以選擇了「Develop code-server in Docker」直接在本機上執行。建立的步驟很簡單，只需填寫幾個欄位即可完成。
建立 Workspace
建立完 Template 後，接著點選「Use Template」，填好 Workspace 的名字後，就可以一鍵產生囉 🎉
不過我在這步時有遇到coder沒有 Docker 權限的問題，查了 GitHub Issue 似乎也有人遇到相同的問題，解法是進 container 內去調整權限
Workspace 啟動成功後，你可以執行
docker ps 指令來檢查，你會發現多了一個使用 codercom/code-server:latest image 運行的 container。進入遠端開發的世界
而和 GitHub Codespaces 類似，除了 Terminal 外，Coder 也帶有一個 code-server，也就是可以跑在瀏覽器的 vscode。使用起來很方便，以後只要有瀏覽器就可以開發囉！
雖然看起來沒什麼問題，但都跑在自己的機器上，對於一台月租 5 鎂的機器還是有點吃力，1G RAM 直接被吃滿，連續兩次 OOM，最後心一橫，先開到 2G RAM 才能成功開啟 code-server 和 port forwarding 看畫面。但這個配置下，hot reload 還是很慢，看來要能順暢開發，勢必還是一筆不小的花費 😭
後記
不得不說 Coder 的使用者體驗蠻好的，介面好看，用起來也很順手，只差我狠下心租個好機器來跑了。目前看下來 GCP 和 AWS 似乎都是個不錯的選擇，按時計價，也不用再把 Coder 和 Workspace 都跑在同一台，不然一個掛掉全部掛掉，好慘 😢