一、VCompose介绍

1.1 VCompose简介

VCompose 是一款专为开发者打造的可视化 Docker Compose 编辑器，旨在彻底告别手动编写 YAML 文件时繁琐的缩进调整、镜像标签记忆及依赖关系核对。它提供了一个完全在浏览器端运行的可视化画布，支持拖拽服务、绘制连接即可生成生产级 YAML 配置，且全程无需注册、无后端服务器介入，确保所有数据绝对安全不泄露。

1.2 VCompose核心特点

• 可视化画布：支持拖拽操作，内置 111+ 种常用服务及 16 个开箱即用的预构建技术栈。
• 连线定义依赖：通过直观的画线连接服务，即可自动生成准确的 depends_on 依赖配置。
• 实时 YAML 预览：提供带有语法高亮功能的实时 YAML 输出面板，代码改动一目了然。
• AI 智能生成：支持使用自然语言描述需求，兼容 OpenAI、Anthropic、Gemini 等多种主流 AI 模型自动生成配置。
• MCP 深度集成：完美适配 MCP 协议，可直接在 Claude、Cursor 或其他兼容工具中无缝调用。
• YAML 反向导入：支持粘贴现有的 Docker Compose 文件，一键将其转换为可视化的拓扑图。
• 智能服务推荐：能根据当前选择自动推荐配套服务（例如为 PostgreSQL 自动推荐 pgAdmin）。
• 网络自动配置：当服务之间建立连接时，系统会自动将其分配至共享网络，免去手动配置烦恼。
• 完整撤销重做：支持标准的 Ctrl+Z / Ctrl+Y 快捷键，提供流畅的撤销与重做操作体验。
• 本地持久化存储：工作进度会自动保存至浏览器的本地存储（localStorage），防止意外丢失。

二、本次实践规划

2.1 本地环境规划

本次实践为个人测试环境，操作系统版本为 Ubuntu 24.04.2 LTS。

2.2 本次实践介绍

1.本次实践部署环境为个人测试环境，生产环境请谨慎；
2.在Docker环境下部署Docker compose管理工具VCompose。

三、本地环境检查

3.1 检查Docker服务状态

检查Docker服务是否正常运行，确保Docker正常运行。

root@jeven:~# systemctl status docker● docker.service - Docker Application Container Engine
     Loaded: loaded (/usr/lib/systemd/system/docker.service; enabled; preset: enabled)
     Active: active (running) since Wed 2026-05-13 20:00:35 CST; 1 week 1 day ago
TriggeredBy: ● docker.socket
       Docs: https://docs.docker.com
   Main PID: 755791 (dockerd)
      Tasks: 154
     Memory: 1.3G (peak: 2.5G)
        CPU: 17min 28.568s
     CGroup: /system.slice/docker.service

3.2 检查Docker版本

检查Docker版本

root@jeven:~# docker -vDocker version 28.5.0, build 887030f

3.3 检查docker compose 版本

检查Docker compose版本，确保2.0以上版本。

root@jeven:~# docker compose versionDocker Compose version v2.39.4

四、拉取VCompose镜像

下载VCompose镜像，执行以下命令：

root@jeven:~# docker pull ghcr.io/zbrave/vcompose:be6c093
be6c093: Pulling from zbrave/vcompose
589002ba0eae: Already exists
8892f80f46a0: Pull complete
91d1c9c22f2c: Pull complete
cf1159c696ee: Pull complete
3f4ad4352d4f: Pull complete
c2bd5ab17727: Pull complete
4d9d41f3822d: Pull complete
3370263bc02a: Pull complete
07b4536242a3: Pull complete
2ea2c0ff0e06: Pull complete
Digest: sha256:281802dfaedeb29bd9a905460b6ca7e3db89fe36bc1e02b7fbe3097b287e9fb8
Status: Downloaded newer image for ghcr.io/zbrave/vcompose:be6c093
ghcr.io/zbrave/vcompose:be6c093

五、部署VCompose服务

5.1 创建部署目录

• 创建部署目录

mkdir -p /data/vcompose  && cd /data/vcompose

5.2 docker-cli方式部署（可选）

如果想要使用docker-cli方式部署，可参考以下命令部署。（可选）

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

5.3 创建VCompose容器

本次实践我们采用 Docker Compose 方式进行部署，这也是我推荐的方式。首先我们需要创建并编辑 docker-compose.yaml 文件，请注意宿主机映射端口可根据您的实际情况自行设置，务必避免端口冲突。

vim docker-compose.yaml

version: '3'services:
  vcompose:
    image: ghcr.io/zbrave/vcompose:be6c093    container_name: vcompose    restart: always    ports:
      - "9900:80"

执行以下命令，创建VCompose容器。

docker compose up -d

5.4 查看VCompose容器状态

检查VCompose容器运行状态，确保VCompose容器正常启动。

root@jeven:/data/vcompose#  docker compose psWARN[0000] /data/vcompose/docker-compose.yaml: the attribute `version` is obsolete, it will be ignored, please remove it to avoid potential confusion
NAME       IMAGE                             COMMAND                   SERVICE    CREATED          STATUS          PORTS
vcompose   ghcr.io/zbrave/vcompose:be6c093   "/docker-entrypoint.…"   vcompose   27 seconds ago   Up 27 seconds   0.0.0.0:9900->80/tcp, [::]:9900->80/tcp

5.5 检查VCompose容器日志

检查容器运行日志，确保VCompose服务正常运行。

docker compose logs

六、访问VCompose服务

6.1 访问VCompose初始页

浏览器地址： http://<个人的服务器IP>:9900，访问VCompose初始页。如果无法访问，请确保宿主机的防火墙已关闭或已放行相关端口，对于云服务器还需配置相应的安全组规则。

6.2 进入VCompose首页

点击初始页最下方的【Open VCompose】选项，进入VCompose首页。

点击左侧的 Smart Home 示例，即可查看对应的 docker-compose.yaml 文件内容及其服务拓扑关系图。

七、总结

通过本次实践，我们成功在 Docker 环境下部署了可视化 Docker Compose 管理工具 VCompose。整个部署过程清晰明了，从环境检查、镜像拉取到容器编排，每一步都配有详细的命令和截图，便于读者复现。VCompose 以其直观的可视化画布、智能的 AI 生成和便捷的 YAML 反向导入功能，显著提升了 Docker Compose 配置的编写与管理效率。无论是个人学习还是团队协作，VCompose 都是一款值得尝试的现代化容器编排辅助工具。