diff --git a/vs-code-server/template/QUICKSTART.md b/vs-code-server/template/QUICKSTART.md new file mode 100644 index 0000000..4653aae --- /dev/null +++ b/vs-code-server/template/QUICKSTART.md @@ -0,0 +1,82 @@ +# 🎯 5 分鐘快速開始 + +## 步驟 1:啟動 Coder Server(已在 Docker 運行) + +```bash +docker-compose -f vs-code-server.yml up -d +``` + +驗證:訪問 https://code.karylab.com + +--- + +## 步驟 2:上傳 Template + +```bash +# 進入 template 目錄 +cd c:\Users\ckliu\Documents\docker_stack\vs-code-server + +# 登入 Coder(首次) +coder login https://code.karylab.com + +# 上傳 template +coder templates create -d ./template --name vscode +``` + +--- + +## 步驟 3:建立 Workspace(以使用者身份) + +1. 進入 https://code.karylab.com +2. 用 GitHub 登入 +3. Dashboard → "Create Workspace" +4. 選 "vscode" template +5. 輸入 workspace 名稱 +6. 點擊 "Create" +7. 等待 30-60 秒 + +--- + +## 步驟 4:使用 VSCode + Copilot + +1. Workspace 啟動後 → 點擊 "code-server" +2. 進入 VSCode +3. 左側 Extensions → 搜尋 "GitHub Copilot" +4. 安裝並授權 +5. 開始寫代碼,Copilot 自動完成! + +--- + +## 常用命令 + +```bash +# 上傳 template(更新後重新執行) +coder templates create -d ./template --name vscode + +# 查看已上傳的 templates +coder templates list + +# 刪除 template +coder templates delete vscode +``` + +--- + +## 常見問題速查 + +| 問題 | 解決方案 | +|------|--------| +| Workspace 無法啟動 | 查看 Dashboard → Workspace → Logs | +| Copilot 無法認證 | 重新登入:Ctrl+Shift+P → "Copilot: Sign In" | +| 檔案未保存 | Settings → Auto Save → 確認已啟用 | +| 容器無法訪問 | 檢查 Docker 是否運行、防火牆設定 | + +--- + +## 🎓 更詳細的說明 + +查看 `README-CN.md` 瞭解完整功能、配置、故障排除等。 + +--- + +**下一步:** 登入 Coder,建立第一個 Workspace! diff --git a/vs-code-server/template/outputs.tf b/vs-code-server/template/outputs.tf new file mode 100644 index 0000000..3e1205b --- /dev/null +++ b/vs-code-server/template/outputs.tf @@ -0,0 +1,46 @@ +# 定義 Terraform 輸出(使用者在 Coder Dashboard 可看到) + +output "workspace_owner" { + description = "Workspace owner (GitHub username)" + value = data.coder_workspace_owner.me.name +} + +output "workspace_id" { + description = "Workspace unique ID" + value = data.coder_workspace.me.id +} + +output "agent_status" { + description = "Coder Agent status" + value = "Check agent details in Coder UI" +} + +output "code_server_info" { + description = "code-server 存取資訊" + value = "Click 'code-server' button in Workspace details" +} + +output "volume_name" { + description = "Docker volume name for this workspace" + value = "coder-${data.coder_workspace.me.id}-home" +} + +output "git_config" { + description = "Git 已配置的使用者資訊" + value = { + author_name = coalesce(data.coder_workspace_owner.me.full_name, data.coder_workspace_owner.me.name) + author_email = data.coder_workspace_owner.me.email + } + sensitive = true +} + +output "resources_monitored" { + description = "已啟用的監控指標" + value = [ + "CPU Usage (current & host)", + "RAM Usage (current & host)", + "Disk Usage (home directory)", + "System Load Average", + "Swap Usage" + ] +} diff --git a/vs-code-server/template/readme.md b/vs-code-server/template/readme.md index 5a78af4..fc53297 100644 --- a/vs-code-server/template/readme.md +++ b/vs-code-server/template/readme.md @@ -1,38 +1,337 @@ -\# Coder VSCode Template +# 🚀 Coder VSCode Template 使用指南 +## 📋 功能清單 +- ✅ 每個使用者獨立 Workspace +- ✅ GitHub OIDC 登入認證 +- ✅ GitHub Copilot 支援 +- ✅ code-server 網頁版 VSCode +- ✅ 自動存檔 +- ✅ 程式碼 & 設定持久化 (Volume) +- ✅ JetBrains IDE 支援(可選) +- ✅ 資源監控(CPU、RAM、Disk) -\## 功能 +--- -\- 單容器架構 +## 🎯 使用流程 -\- 使用者程式碼 → 宿主實體目錄 `/path/to/host/projects` +### 第一步:啟動 Coder Server -\- 使用者設定 / cache → Docker volume `/config/users` +你的 Docker 環境中已有 `vs-code-server.yml`,執行: -\- 登出自動儲存 +```bash +cd c:\Users\ckliu\Documents\docker_stack\vs-code-server +docker-compose -f vs-code-server.yml up -d +``` -\- 支援 GitHub Copilot +檢查 Coder 是否正常運行: +```bash +# 訪問 +https://code.karylab.com +``` -\- 支援 WebSocket + 子域名 +--- +### 第二步:上傳 Template 到 Coder +#### 方法 A:使用 Coder CLI(推薦) -\## 對應 docker-compose.yml 要求 +```bash +# 1. 安裝 Coder CLI(如果還沒安裝) +# 參考:https://coder.com/docs/install -```yaml +# 2. 登入 Coder server +coder login https://code.karylab.com -volumes: +# 3. 上傳 template +coder templates create \ + -d c:\Users\ckliu\Documents\docker_stack\vs-code-server\template \ + --name vscode +``` -  - user\_config:/config/users +#### 方法 B:在 Coder UI 手動上傳 -  - /path/to/host/projects:/projects +1. 進入 https://code.karylab.com/admin/templates +2. 點擊 "Create template" +3. 上傳整個 `template` 資料夾 +4. 設定名稱為 "vscode" +5. 點擊 "Create" -  - coder\_system:/config/coder +--- +### 第三步:使用者建立 Workspace +**以普通使用者身份:** -environment: +1. **用 GitHub 登入 Coder** + ``` + 進入 https://code.karylab.com + → 點擊 "Sign in with GitHub" + → 授權 + ``` -  CODER\_ADDRESS: 0.0.0.0:3000 +2. **建立新 Workspace** + ``` + Dashboard → "Create Workspace" + → Select template: "vscode" + → Workspace name: "my-first-workspace" + → 點擊 "Create" + ``` +3. **等待初始化** + ``` + 狀態從 "Provisioning" → "Running" + (首次約 30-60 秒) + ``` + +4. **進入 VSCode** + ``` + Workspace 啟動後 → 點擊 "code-server" + → 進入網頁版 VSCode + ``` + +--- + +## 💡 在 VSCode 中使用 GitHub Copilot + +### 自動啟用(推薦) + +因為你已用 GitHub 登入,Copilot 會自動使用你的 GitHub 身份: + +1. 進入 VSCode → Extensions (Ctrl+Shift+X) +2. 搜尋 "GitHub Copilot" +3. 安裝官方 extension(Microsoft 出品) +4. 完成 → Copilot 自動認證 + +### 手動驗證 + +打開任何代碼文件,開始輸入: + +```python +# 計算兩個數的和 + +# Copilot 應該會自動完成: +def add(a, b): + return a + b +``` + +如果沒有自動完成建議,檢查: +- Extension 是否已安裝 +- GitHub 登入是否有效 + +--- + +## 📁 你的檔案存放位置 + +每個 Workspace 的檔案存儲結構: + +``` +Docker Volume: coder-- +└── /home/coder/ + ├── .config/code-server/ ← VSCode 設定、extension 清單 + ├── .cache/ ← Copilot 快取、編譯快取 + ├── .local/share/ ← VSCode 歷史、其他數據 + ├── .init_done ← 初始化標記(首次啟動時建立) + └── (你的程式碼檔案) ← 自動持久化 +``` + +**重要:** 所有檔案都保存在 Docker volume 中,你登出或停止 Workspace 時 **不會遺失**。 + +--- + +## 🔄 常見操作 + +### 重啟 Workspace + +``` +Dashboard → 選擇你的 Workspace +→ 點擊"..."菜單 +→ "Stop"(等 30 秒) +→ "Start" +``` + +### 刪除 Workspace + +``` +Dashboard → 選擇你的 Workspace +→ 點擊"..."菜單 +→ "Delete" +⚠️ 警告:會永久刪除該 Workspace 的所有檔案! +``` + +### 查看 Workspace 日誌 + +``` +Dashboard → 選擇你的 Workspace +→ 點擊"Logs" +(可看 startup_script 的執行結果,有錯誤時很有用) +``` + +### 自訂 Extensions + +在 VSCode 的終端執行: + +```bash +# 安裝 extension +code-server --install-extension ms-vscode.cpptools +code-server --install-extension ms-python.python +code-server --install-extension rust-lang.rust-analyzer + +# 查看已安裝 +code-server --list-extensions + +# 卸載 extension +code-server --uninstall-extension +``` + +--- + +## ⚙️ 進階配置 + +### 如果要自動安裝特定 Extensions + +編輯 `main.tf` 中的 `startup_script` 部分: + +```hcl +startup_script = <<-EOT + set -e + + # 初始化使用者目錄 + if [ ! -f ~/.init_done ]; then + cp -rT /etc/skel ~ + touch ~/.init_done + fi + + # 確保必要目錄存在 + mkdir -p ~/.config ~/.cache ~/.local/share + + # 自動安裝 extensions + code-server --install-extension github.copilot + code-server --install-extension ms-vscode.cpptools + code-server --install-extension ms-python.python +EOT +``` + +然後重新上傳 template: + +```bash +coder templates create \ + -d c:\Users\ckliu\Documents\docker_stack\vs-code-server\template \ + --name vscode +``` + +### 傳入 GitHub Token(可選) + +如果要顯式指定 GitHub token,建立 Workspace 時傳入: + +```bash +coder create my-workspace \ + --parameter github_token="ghp_xxxxxxxxxxxxxxxxxxxx" +``` + +--- + +## 🐛 常見問題 + +### Q1:Copilot 無法工作 + +**症狀:** 沒有自動完成建議,或顯示"Not Authorized" + +**解決步驟:** +1. 檢查是否已安裝 GitHub Copilot extension +2. 在 VSCode 中按 `Ctrl+Shift+P` → 搜尋 "Copilot" +3. 選擇 "GitHub Copilot: Sign In" +4. 如果彈出授權窗口,點擊授權 +5. 重新開啟代碼文件 + +### Q2:Workspace 啟動失敗 + +**症狀:** 狀態停留在 "Provisioning" 或顯示紅色錯誤 + +**診斷步驟:** +``` +Dashboard → 選擇 Workspace +→ 點擊 "Logs" 分頁 +→ 查看錯誤信息 +``` + +常見原因: +- Docker 資源不足 +- Coder server 無法連接到 provisioner +- startup_script 有語法錯誤 + +**解決方案:** +- 檢查 Docker 磁碟空間 +- 重啟 Coder server:`docker-compose restart` +- 檢查 `main.tf` 語法 + +### Q3:無法保存檔案 + +**症狀:** 編輯後 Ctrl+S 無反應,或重啟後檔案遺失 + +**檢查步驟:** +1. VSCode 左下角應有自動存檔指示 +2. Settings → 搜尋 "Auto Save" → 確認已啟用 +3. 檢查磁碟空間是否充足 +4. 查看 code-server 是否正常運行 + +### Q4:如何備份 Workspace 的檔案? + +因為使用 Docker volume,備份方式: + +```bash +# 1. 進入 Docker 容器 +docker exec -it coder /bin/sh + +# 2. 備份 volume(替換 ) +docker run --rm -v :/data \ + -v /backup:/backup \ + alpine tar czf /backup/workspace-backup.tar.gz -C /data . + +# 3. 檔案會存在 /backup 目錄 +``` + +--- + +## 📊 資源監控 + +在 VSCode 右側 "Workspace" 菜單中,可看到: +- **CPU Usage** - 目前 CPU 使用率 +- **RAM Usage** - 目前 RAM 使用量 +- **Home Disk** - home 目錄磁碟使用量 +- **CPU Usage (Host)** - 宿主機 CPU +- **Memory Usage (Host)** - 宿主機 RAM + +如果 RAM 接近上限,可以: +- 關閉不必要的 extensions +- 重啟 Workspace +- 聯繫管理員增加資源 + +--- + +## 🔐 安全性 + +- ✅ 所有通訊都通過 HTTPS(由 Nginx 處理) +- ✅ GitHub OIDC 認證保護 +- ✅ 每個使用者的 workspace 完全隔離 +- ✅ 敏感信息(GitHub token)以環境變數形式傳遞,不儲存 + +--- + +## 📞 需要幫助? + +1. **查看 Logs** → Dashboard → Workspace → Logs +2. **Coder 官方文檔** → https://coder.com/docs +3. **code-server 文檔** → https://github.com/coder/code-server +4. **聯繫管理員** → 提供 Workspace 名稱和錯誤信息 + +--- + +## 📝 版本資訊 + +- **Coder** v2.0+ +- **code-server** module ~> 1.0 +- **jetbrains** module ~> 1.1 +- **Terraform** 0.13+ + +上次更新:2025-11-17 diff --git a/vs-code-server/template/variables.tf b/vs-code-server/template/variables.tf new file mode 100644 index 0000000..0224831 --- /dev/null +++ b/vs-code-server/template/variables.tf @@ -0,0 +1,26 @@ +# 此文件定義 template 的可配置變數 +# 使用者在建立 Workspace 時可以填入這些參數 + +variable "github_token" { + description = "GitHub Personal Access Token for GitHub Copilot authentication (optional, will auto-use OIDC if not provided)" + type = string + sensitive = true + default = "" + + # 使用者提示 + validation { + condition = length(var.github_token) == 0 || startswith(var.github_token, "ghp_") + error_message = "GitHub token should start with 'ghp_' or be empty." + } +} + +# 未來可擴展的變數(示例,目前不需要): +# variable "extensions" { +# description = "VSCode extensions to auto-install" +# type = list(string) +# default = [ +# "github.copilot", +# "ms-vscode.cpptools", +# "ms-python.python" +# ] +# }