VCompose 實戰：拖拽式 Docker Compose 建構器，告別手寫 YAML

每次新建一個 self-hosted stack，最浪費時間的往往不是挑鏡像，也不是規劃網路，而是把 docker-compose.yml 從頭敲出來。縮排、depends_on 順序、environment 大小寫、port mapping 寫反左右——一個 typo 就要重跑一次 docker compose up，配合 NAS 慢慢拉鏡像，半小時就過去了。

最近翻到一個叫 VCompose 的開源工具，定位很單純：把寫 Compose 這件事變成在瀏覽器裡拖拽方塊、拉連線。畫布即所得，YAML 即時生成，按一下就能下載。它沒有後端、沒有資料庫，整套是純前端 SPA，連帳號都不用註冊。

實機跑了兩天之後，覺得它解決的痛點剛好踩在 self-hosted 玩家、Homelab 使用者、以及第一次學 Compose 的工程師中間，值得寫一篇筆記記錄。

VCompose 主畫面

圖片來源：VCompose 官方 README

一、為什麼需要 VCompose

寫 docker-compose.yml 看起來簡單，實際上有三件事一直在消耗精力：

YAML 對縮排極度敏感——多一個空白、用 tab 取代 space，整個 service 就會被吃掉。
depends_on 與網路關係難以一眼看清——當 stack 超過 5 個服務，光是腦補誰連誰就要回頭翻三次文件。
鏡像 tag 與環境變數要硬背——postgres:16-alpine 還是 postgres:alpine？POSTGRES_PASSWORD 還是 PG_PASSWORD？每次都要查 Docker Hub。

VCompose 的解法是把這些瑣事全部塞到 UI 裡：左邊側欄列好 100 多個常見服務（Postgres、Redis、Nginx、Traefik、Grafana ……），右邊是即時更新的 YAML 預覽，中間是畫布。拖一個 service 進來就有預設 image tag、預設 port、預設 env vars；連線兩個 service 自動產生 depends_on，加入同一個 network 也是自動的。

它不是一個新的容器編排引擎，而是「Compose 配置檔的圖形化編輯器」——產出物還是 100% 標準的 docker-compose.yml，可以直接餵給 docker compose up -d 跑，跟手寫的版本沒有任何相容性差異。

二、技術定位與相似工具

把 VCompose 跟現有工具放在同一條光譜上看會比較清楚：

圖 1

手寫 YAML：最原始、最彈性，但對新手不友善。
VCompose：純粹的「YAML 產生器」，產出後仍要自己 docker compose up。
Portainer / Dockge：偏「執行端」管理，可以直接從 UI 啟動 stack，但對 YAML 編輯體驗一般。
Kubernetes：另一個維度的問題了，跟單機 Compose 不是同一賽道。

VCompose 的定位很清楚：它只負責「把腦中架構轉成 YAML」這一段。生成完之後接哪個工具部署、放哪個 NAS、用什麼 reverse proxy，跟它都沒關係。這個邊界劃得乾淨，反而讓它在 Homelab 工作流裡不容易跟其他工具打架。

底層用的是 React 18 + TypeScript + React Flow v12 + Zustand + Tailwind，bundle 壓縮後 91KB，讀檔靠瀏覽器 localStorage，所有 AI 呼叫直接從瀏覽器發到第三方 API（OpenAI/Anthropic/Gemini/GLM）。

三、快速啟動

3.1 Docker 部署

最快的方式是直接拉官方 image：

docker run -d \
  --name=vcompose \
  --restart=unless-stopped \
  -p 7482:80 \
  ghcr.io/zbrave/vcompose:latest

或寫成 docker-compose.yml（沒錯，用 VCompose 來部署 VCompose 自己也行）：

version: '3.8'

services:
  vcompose:
    image: ghcr.io/zbrave/vcompose:latest
    container_name: vcompose
    restart: unless-stopped
    ports:
      - "7482:80"

接著：

mkdir -p /volume1/docker/vcompose
cd /volume1/docker/vcompose
# 把上面 yaml 存進來
docker-compose up -d

容器跑起來後，瀏覽器打開 http://<伺服器 IP>:7482 就是主畫面。整包 image 不到 50MB，因為它本質就是個 nginx 伺服 static files。

值得一提的是這個容器完全 stateless——沒有 volume、沒有環境變數、沒有資料庫。要備份你的 stack 設計，唯一的方式是匯出 YAML 檔案存起來，因為所有狀態都在瀏覽器 localStorage 裡。換瀏覽器或清快取就會消失。

3.2 直接用線上版

懶得自架的話，作者有提供官方線上版：vcompose.cc。打開就能用，前端 SPA 跑在自己瀏覽器，所以「資料不離開本地」這點即使用線上版也成立——畫布資料不會傳給作者的伺服器，只有當你按下「用 AI 生成」按鈕時，請求才會帶著你填的 API key 直發 LLM 廠商。

對只是想試一下、不打算長期使用的場景，線上版就夠了。要在公司內網或 NAS 上長期運作，再走 self-host 路線。

四、核心功能展示

4.1 拖拽建構

主畫面分三區：

區塊	內容
左側 Sidebar	`Stacks` 預編好的整套組合（如 Smart Home、LEMP、Monitoring）；`Marketplace` 列出 100+ 個常見單一服務
中間 Canvas	用 React Flow 實作的可拖拽畫布，支援滾輪縮放、拖曳平移、選取多節點
右側 YAML Preview	即時生成的 `docker-compose.yml`，帶語法高亮

操作流程是：

從側邊拖一個 service 到畫布
點開節點面板填 image tag、ports、volumes、environment
從一個 service 拉一條線到另一個——自動產生 depends_on
右側 YAML 面板按「Copy」或「Download」就能拿走成品

連線在 VCompose 裡面有兩個語意：依賴（depends_on）跟網路（同一條 network）。預設兩者同時建立，但可以分開設定。

值得稱讚的是節點面板的設計——每個 service 卡片把 image、ports、volumes、env、networks、restart 政策、healthcheck 都拆成獨立分頁。對新手特別友善的是 environment 欄位有自動補全：選了 postgres image 之後，下拉就會看到 POSTGRES_USER、POSTGRES_PASSWORD、POSTGRES_DB 三個建議值，不需要回頭翻官方文件。

Marketplace 區也允許自訂——按「Add Custom Image」可以自己定義一個 service template，把常用 image、預設 port、預設 env 一次填好，下次拖出來就帶完整設定。對於團隊內部有自建 image 的場景蠻實用。

4.2 即時預覽 YAML

這是 VCompose 對手寫派最有殺傷力的一點。每改一個欄位，右邊 YAML 立刻重繪——不用切視窗、不用 docker compose config 驗證。語法錯誤、port 衝突、volume 路徑寫錯，當下就看得到 diff。

反向操作也支援：把現有的 docker-compose.yml 貼進 import 視窗，會解析回畫布節點。對於要 review 別人寫的長 stack 特別好用——把一份 200 行的 YAML 丟進去，馬上能看到拓樸關係，比逐行讀 YAML 快很多。

4.3 LLM 整合（內建 OpenAI/Anthropic）

設定面板裡可以填 API key，支援 OpenAI、Anthropic、Gemini、GLM 四家。輸入自然語言描述（例如「我要一套 WordPress + MariaDB + phpMyAdmin，加 redis 快取」），LLM 會回傳完整 Compose YAML，再被前端解析成節點畫到畫布上。

它走的是 Vercel AI SDK，所以實際上是把 prompt 直發到 LLM 廠商，VCompose 自己沒有後端做 proxy。這點優缺點都很明顯：

優點：API key 只存在你的瀏覽器，作者拿不到
缺點：你的 API key 會以 client-side request 形式發出，意味著如果架在公開 URL 上要小心 XSS

如果只在內網或自己機器跑，就不是問題。線上版（vcompose.cc）也是同樣機制，作者在 README 反覆強調「No backend, no signup, no data leaves your browser」，從前端 source map 看下來確實如此——所有 LLM 呼叫都直發廠商 endpoint，沒有經過任何中間 proxy。

實際試了一段「用 Caddy 當 reverse proxy，後面接三個 Node.js 服務外加一組 PostgreSQL，要支援自動 HTTPS」的 prompt，回傳結果出乎意料地完整：Caddyfile 用 volume 掛進去、network 拓樸正確、depends_on 也按啟動順序排好。當骨架夠用了，改一改 image tag 跟 volume 路徑就能跑。線上版（vcompose.cc）也是同樣機制，作者在 README 反覆強調「No backend, no signup, no data leaves your browser」，從前端 source map 看下來確實如此——所有 LLM 呼叫都直發廠商 endpoint，沒有經過任何中間 proxy。

另一個值得提的是 MCP (Model Context Protocol) 整合——VCompose 暴露了四個 MCP tool（generate-compose / validate-compose / parse-compose / get-recommendations），讓 Claude Desktop、Cursor 之類的客戶端可以直接呼叫。文件路徑在 http://<host>:7482/mcp，但目前只支援 stdio transport，要在 IDE 裡用比在瀏覽器裡用稍微麻煩一點。

五、實測心得

實際丟了三個常用 stack 進去測：

Nextcloud + Postgres + Redis + Caddy——5 分鐘搞定，連結 4 條線，YAML 一行不用手改就能跑。
媒體中心（Jellyfin + Sonarr + Radarr + qBittorrent + Prowlarr）——Stacks 區直接有預設模板，拉出來改 volume 路徑就能用。
完整可觀測棧（Prometheus + Grafana + Loki + Promtail + Alertmanager）——這套需要寫不少 mount 跟 config 路徑，VCompose 的 volume 編輯介面有點擠，最後我還是切回 VS Code 收尾。

整體感覺：寫前 80% 的速度很快，最後 20% 細節調整還是 IDE 比較順。對於以下情境特別有價值：

開新 stack 時用它打草稿，把骨架搭出來再倒進 IDE
教學場合用 canvas 解釋服務拓樸，比 YAML 直觀
要 review 一份不熟悉的 stack 時，import 進來看圖比讀 YAML 快

不太適合的情境：

已經寫得很熟、有自己一套 lint/format 流程的進階使用者
需要大量自訂 deploy / healthcheck / configs 區塊的進階 Compose 特性
在 CI/CD pipeline 裡程式化生成 YAML（這時應該寫 script，不該開瀏覽器）

六、vs. 其他 Docker Compose 工具

把幾個常見競品攤開來對比：

工具	定位	編輯體驗	部署能力	後端	適用對象
VCompose	YAML 產生器	視覺化拖拽，即時 preview	無（純產生 YAML）	無	Homelab、新手、教學
Portainer	容器管理面板	Form-based，YAML editor	完整 stack 部署、監控	有	中小型 self-hosted 團隊
Dockge	Stack 管理工具	YAML 編輯器 + UI	直接啟停 stack	有（Node.js）	個人 NAS
Komodo	Multi-host 管理	YAML + GitOps	完整 CD pipeline	有	進階 Homelab
docker-compose-ui	老牌 UI	表單為主	基本啟停	有（Python）	已經幾乎不維護

VCompose 跟它們最大的差異是它不執行任何 docker 指令。Portainer、Dockge 那一派是「我幫你跑」，VCompose 是「我幫你寫」。看似功能少一截，但反而沒有 docker.sock 掛載的安全顧慮，純前端也意味著零維運成本。

我自己的工作流變成：

VCompose 起草 stack
    → 下載 docker-compose.yml
    → 進入 server 目錄調最後細節
    → docker compose up -d
    → Portainer 監控執行狀態

兩邊各做自己擅長的事。

七、適合與不適合的場景

適合：

第一次學 Docker Compose、想用視覺方式理解服務關係
Homelab 玩家頻繁試新 stack，需要快速產出可跑的 YAML
帶人 onboarding 時用 canvas 解釋既有架構
Review 不熟悉的長 Compose 檔，想看拓樸而非逐行讀

不適合：

已經對 Compose 很熟、有 Vim/VS Code snippet 的進階使用者
需要 GitOps / IaC 流程的場景（要的是版本控管，不是 GUI）
Production 環境的多機編排——這時應該看 Kubernetes 或 Swarm
需要進階 Compose 特性（profiles、configs、secrets、deploy）的精細調整

判斷準則很簡單：如果寫 YAML 是瓶頸，VCompose 救你；如果寫 YAML 不是瓶頸，VCompose 反而拖慢節奏。

另外有兩個小細節值得提：第一，VCompose 支援 Ctrl+Z / Ctrl+Y 全程式的 undo/redo，從拖節點到改欄位都進歷史佇列，這在試錯流程裡很救命；第二，作者把所有測試（124 個 unit test、Playwright E2E）寫在 repo 裡，CI 通過才會打 image，使用上的穩定度比預期好。

八、小結

VCompose 是那種典型「做一件事、做好一件事」的開源工具。它沒有試圖取代 Docker Compose，也沒有試圖變成另一個 Portainer，就只是把「把腦中架構翻譯成 YAML」這個動作從鍵盤搬到滑鼠。MIT 授權、純前端、單一 image 部署、resource footprint 接近於零——進入成本低到沒有理由不試。

對 self-hosted 玩家來說，它最大的價值不在「不用學 YAML」，而是讓 stack 設計這件事可被視覺化討論。下一次跟同事白板規劃服務拓樸時，與其拍照存到 Slack，直接在 VCompose 裡拉一遍，順便把 YAML 也產好，可能比較實在。

參考資料

原始介紹文章（杨浦老苏）：https://mp.weixin.qq.com/s/9F3DAhih7ep_ylQFDnp0Pg
VCompose GitHub Repo：https://github.com/zbrave/vcompose
Docker Image：https://ghcr.io/zbrave/vcompose
官方線上版：https://vcompose.cc
Vercel AI SDK：https://sdk.vercel.ai/
React Flow v12：https://reactflow.dev/