3分钟免费部署一个为你定制的在线Vibe/开发环境，放心的给ClaudeCode所有权限
下午好大佬们，这篇帖子分享一下在 **cnb**（这个平台目前额度非常慷慨，**每月1600免费核时**，参加活动还能拿20260每月核时的永久权益）免费部署 (https://github.com/XyzenSun/vibespace) 的方法。这个项目的具体介绍大家可以看GitHub，vibespace是在vibespace vibe出来的，纯前端，目前来看还是太受限了，后面会用go开发一下后端，让它更一键！
**小白也可以直接翻到最后看部署，三个文件直接用我这个**
***
**Dockerfile**
```dockerfile
FROM ubuntu:24.04
ENV LANG=C.UTF-8 \
LANGUAGE=C.UTF-8 \
GOLANG_VERSION=1.23.6 \
GOPATH=/root/go \
PATH=$PATH:/usr/local/go/bin:/root/go/bin:/root/.local/bin:/root/.cargo/bin
# 层1: 系统包 + 基础工具
RUN apt-get update \
&& apt-get install -y --no-install-recommends \
build-essential ca-certificates cmake curl g++ gcc git make nano openjdk-21-jdk openssh-client openssh-server python3 python3-pip unzip vim wget \
&& curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
&& apt-get install -y --no-install-recommends nodejs \
&& apt-get autoremove -y \
&& apt-get clean \
&& rm -rf /var/lib/apt/lists/*
# 层2: 语言运行时
RUN wget -q https://go.dev/dl/go${GOLANG_VERSION}.linux-amd64.tar.gz \
&& tar -C /usr/local -xzf go${GOLANG_VERSION}.linux-amd64.tar.gz \
&& rm -f go${GOLANG_VERSION}.linux-amd64.tar.gz \
&& curl --proto "=https" --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y \
&& echo 'source $HOME/.cargo/env' >> /root/.bashrc \
&& apt-get update && apt-get install -y --no-install-recommends python3-venv && apt-get clean && rm -rf /var/lib/apt/lists/*
# 层3: 全局 npm 包
RUN npm install -g typescript ts-node \
&& npm cache clean --force
# 层4: 语言开发工具
RUN go install -v golang.org/x/tools/gopls@latest \
&& go install -v github.com/go-delve/delve/cmd/dlv@latest \
&& go install -v honnef.co/go/tools/cmd/staticcheck@latest \
&& go clean -modcache \
&& go clean -cache
# 层5a: 安装 code-server
RUN curl -fsSL https://raw.githubusercontent.com/coder/code-server/main/install.sh | sh \
&& rm -rf /tmp/*
# 层5b: code-server 扩展
RUN code-server --install-extension MS-CEINTL.vscode-language-pack-zh-hans \
&& code-server --install-extension GitHub.github-vscode-theme \
&& code-server --install-extension DavidAnson.vscode-markdownlint \
&& code-server --install-extension g2developer.browser-in-vscode \
&& code-server --install-extension saltcoreyan.json-format-sortcore \
&& code-server --install-extension redhat.vscode-yaml \
&& code-server --install-extension Anthropic.claude-code \
&& code-server --install-extension golang.go \
&& code-server --install-extension streetsidesoftware.code-spell-checker \
&& code-server --install-extension FittenTech.Fitten-Code \
&& code-server --install-extension RooVeterinaryInc.roo-cline \
&& code-server --install-extension eamodio.gitlens \
&& code-server --install-extension ms-python.python \
&& rm -rf /tmp/* /root/.cache
# 层6: AI 工具
RUN npm install -g @anthropic-ai/claude-code@2.1.71 @cometix/ccline \
&& npm cache clean --force \
&& CC_SWITCH_FORCE=1 curl -fsSL https://github.com/SaladDay/cc-switch-cli/releases/latest/download/install.sh | bash
# 层6b: Claude Code 配置
RUN mkdir -p ~/.claude \
&& printf '%s' '{"statusLine":{"type":"command","command":"ccline","padding":0},"env":{"CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC":"1","DISABLE_AUTOUPDATER":"1"}}' > ~/.claude/settings.json \
&& mkdir -p ~/.claude/output-styles \
&& (claude config set outputStyle "default" -g 2>/dev/null || true) \
&& (claude mcp add-json -s user 'context7' '{"command":"npx","args":["-y","@upstash/context7-mcp@latest"]}' || true) \
&& (claude mcp add-json -s user 'mcp-deepwiki' '{"command":"npx","args":["-y","mcp-deepwiki@latest"]}' || true) \
&& mkdir -p ~/.claude/commands/zcf \
&& mkdir -p ~/.claude/agents/zcf \
&& (curl -sSL "https://raw.githubusercontent.com/UfoMiao/zcf/main/templates/claude-code/zh-CN/workflow/common/commands/init-project.md" -o ~/.claude/commands/zcf/init-project.md 2>/dev/null || true) \
&& mkdir -p ~/.claude/agents/zcf/common \
&& (curl -sSL "https://raw.githubusercontent.com/UfoMiao/zcf/main/templates/claude-code/zh-CN/workflow/common/agents/init-architect.md" -o ~/.claude/agents/zcf/common/init-architect.md 2>/dev/null || true) \
&& (curl -sSL "https://raw.githubusercontent.com/UfoMiao/zcf/main/templates/claude-code/zh-CN/workflow/common/agents/get-current-datetime.md" -o ~/.claude/agents/zcf/common/get-current-datetime.md 2>/dev/null || true) \
&& (curl -sSL "https://raw.githubusercontent.com/UfoMiao/zcf/main/templates/common/workflow/sixStep/zh-CN/workflow.md" -o ~/.claude/commands/zcf/workflow.md 2>/dev/null || true) \
&& (curl -sSL "https://raw.githubusercontent.com/UfoMiao/zcf/main/templates/claude-code/zh-CN/workflow/plan/commands/feat.md" -o ~/.claude/commands/zcf/feat.md 2>/dev/null || true) \
&& mkdir -p ~/.claude/agents/zcf/plan \
&& (curl -sSL "https://raw.githubusercontent.com/UfoMiao/zcf/main/templates/claude-code/zh-CN/workflow/plan/agents/planner.md" -o ~/.claude/agents/zcf/plan/planner.md 2>/dev/null || true) \
&& (curl -sSL "https://raw.githubusercontent.com/UfoMiao/zcf/main/templates/claude-code/zh-CN/workflow/plan/agents/ui-ux-designer.md" -o ~/.claude/agents/zcf/plan/ui-ux-designer.md 2>/dev/null || true) \
&& (curl -sSL "https://raw.githubusercontent.com/UfoMiao/zcf/main/templates/common/workflow/git/zh-CN/git-commit.md" -o ~/.claude/commands/zcf/git-commit.md 2>/dev/null || true) \
&& (curl -sSL "https://raw.githubusercontent.com/UfoMiao/zcf/main/templates/common/workflow/git/zh-CN/git-worktree.md" -o ~/.claude/commands/zcf/git-worktree.md 2>/dev/null || true) \
&& (curl -sSL "https://raw.githubusercontent.com/UfoMiao/zcf/main/templates/common/workflow/git/zh-CN/git-rollback.md" -o ~/.claude/commands/zcf/git-rollback.md 2>/dev/null || true) \
&& (curl -sSL "https://raw.githubusercontent.com/UfoMiao/zcf/main/templates/common/workflow/git/zh-CN/git-cleanBranches.md" -o ~/.claude/commands/zcf/git-cleanBranches.md 2>/dev/null || true) \
&& (curl -sSL "https://raw.githubusercontent.com/UfoMiao/zcf/main/templates/claude-code/zh-CN/workflow/bmad/commands/bmad-init.md" -o ~/.claude/commands/zcf/bmad-init.md 2>/dev/null || true)
# 层7: SSH 配置
RUN mkdir -p /run/sshd \
&& sed -i 's/^#*PermitRootLogin.*/PermitRootLogin yes/' /etc/ssh/sshd_config \
&& sed -i 's/^#*PasswordAuthentication.*/PasswordAuthentication yes/' /etc/ssh/sshd_config
# 备份 /root，防止 volume 挂载覆盖镜像内文件
RUN mkdir /root-defaults && cp -a /root /root-defaults
COPY entrypoint.sh /usr/local/bin/entrypoint.sh
RUN chmod +x /usr/local/bin/entrypoint.sh
WORKDIR /workspace
EXPOSE 8080 22
ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]
```
**entrypoint.sh**
```bash
#!/bin/bash
set -e
# --- 恢复 /root 默认文件 ---
cp -an /root-defaults/root/. /root/ 2>/dev/null || true
# --- Git ---
if [ -n "$GIT_USER_NAME" ]; then
git config --global user.name "$GIT_USER_NAME"
fi
if [ -n "$GIT_USER_EMAIL" ]; then
git config --global user.email "$GIT_USER_EMAIL"
fi
# --- SSH 密钥 ---
if [ -n "$SSH_PRIVATE_KEY" ]; then
mkdir -p ~/.ssh && chmod 700 ~/.ssh
echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
if [ -n "$SSH_PUBLIC_KEY" ]; then
echo "$SSH_PUBLIC_KEY" > ~/.ssh/id_rsa.pub
chmod 644 ~/.ssh/id_rsa.pub
fi
ssh-keyscan -t rsa github.com gitlab.com gitee.com >> ~/.ssh/known_hosts 2>/dev/null
chmod 644 ~/.ssh/known_hosts
fi
# --- SSH 密码 ---
echo "root:${ROOT_PASSWORD:-root123}" | chpasswd
# --- code-server 认证 ---
AUTH_ARGS="--auth none"
if [ -n "$CS_PASSWORD" ]; then
export PASSWORD="$CS_PASSWORD"
AUTH_ARGS="--auth password"
fi
# --- Vibe 快捷命令 ---
echo 'alias vibe="IS_SANDBOX=1 claude --dangerously-skip-permissions"' >> /root/.bashrc
source /root/.bashrc
# --- README ---
cat > /workspace/README.md << 'READMEEOF'
# Development Environment
## 已安装的工具
### 编程语言
- Node.js / Ts / npm
- Go
- C
- Python
- Rust
- Java
- C++
### AI 工具
- CC-Switch: ClaudeCode/Codex 提供商 MCP Skils管理工具
- Claude Code: Anthropic CLI 开发工具
- CCLine: Claude Code 状态行工具
### Claude Code 工作流
- ZCF 工作流: 来自 UfoMiao/zcf 项目，包含通用工具、六步开发、功能规划、Git 工作流、BMAD 企业级
> 使用方式: 在 Claude Code 中输入 `/zcf:命令名` 调用工作流
### Claude Code 输出样式
- **默认**: Claude Code 默认输出样式
### 快捷命令
输入 `vibe` 即可执行: `IS_SANDBOX=1 claude --dangerously-skip-permissions`
## 环境变量
- `ROOT_PASSWORD`: SSH root 密码 (默认: root123)
- `GIT_USER_NAME`: Git 用户名
- `GIT_USER_EMAIL`: Git 邮箱
- `SSH_PRIVATE_KEY`: SSH 私钥
- `SSH_PUBLIC_KEY`: SSH 公钥
- `CS_PASSWORD`: Code-Server 密码 (不设置则免密)
READMEEOF
# --- 启动 ---
/usr/sbin/sshd
exec code-server --bind-addr 0.0.0.0:8080 $AUTH_ARGS /workspace
```
**.cnb.yml**
```yaml
$:
vscode:
- runner:
# 在这里指定使用的CNB开发核心数，内存为核心数的2倍，最大64核心
cpus: 6
docker:
build:
dockerfile: Dockerfile
by:
- entrypoint.sh
env:
ROOT_PASSWORD: root123
GIT_USER_NAME:
GIT_USER_EMAIL:
services:
- docker
- name: vscode
# 这里为容器存活时间，当超过此时间且无操作，容器自动关闭，请根据需要自行修改
options:
keepAliveTimeout: 60m
stages:
- name: 数据持久化配置链接
# CNB禁止挂载整个ROOT目录，workspace目录会自动挂载
# 所有需要持久化的目录，建立软连接到 /root/.cnb/ 目录，此目录CNB会自动持久化
# 项目名称「vibesapce」用于数据隔离，路径: /root/.cnb/vibesapce
# 如需持久化其他目录（如语言运行时配置），请参照下面的格式自行添加
script: |
mkdir -p /root/.cnb/vibesapce/.claude /root/.cnb/vibesapce/.cc-switch /root/.cnb/vibesapce/.vscode-server
ln -sfn /root/.cnb/vibesapce/.claude /root/.claude
ln -sfn /root/.cnb/vibesapce/.cc-switch /root/.cc-switch
ln -sfn /root/.cnb/vibesapce/.vscode-server /root/.vscode-server
```
## 生成部署所需的配置文件，Dockerfile等
首先将 (https://github.com/XyzenSun/vibespace) clone代码到本地后，打开index.html 或直接使用我搭建好的 https://vibespace.xyzen.de 然后下面我对每一步做一下说明
第一步：宿主机地区，在cnb部署建议用国际源，cnb里已经内置了开发相关的站点的代理，如果是在自己的服务器部署，根据地区选择即可
第二步：在cnb部署，保持原样即可，如果你要用ssh协议去操作git，可以把自己的密钥填进去，扩展列表我推荐全选，git用户名和邮箱可以不填，cnb内置，如果要push到其他仓库，可以填上，cnb有gpg验证。
第三步：编程语言大家根据自己的喜好选择即可，如果是小白，想体验vibecoding，自己并没有代码基础的，直接全选并且保持默认，让ai在做项目时选择合适的语言使用就可以
第四步：ai工具目前只做了Claudecode的选项，因为codex和opencode我还没用明白，欢迎大佬们pr完善， 这里的cc-switch是cc-switch-cli，安装后在终端 cc-switch 即可用tui配置Claudecode ，claudecode，如果是小白，推荐用2.1.71 ，并且禁止遥测与更新，这个版本不需要去解决A/ 的一些奇葩操作，mcp工具推荐全选，后面我也会加一些好用的mcp到预设中。ccline是哈雷大佬开发的，强推，建议不论是否了解都选上，非常好用，用了后你肯定会喜欢的
!(https://osspub.xyzen.de/img/deployVibespaceToCNB/1.png)
下面的工作流和输出风格来自zcf 项目，是一个比较热门的工作流程吧，在Claudecode中用/zcf： xxx 去调用zcf项目中设置的工作流，这个我用的比较少，但社区反馈挺好用
输出风格就是Claude和你对话时的风格，*比如说自己是猫娘*
第五步：其他工具这里，在cnb平台部署其实不用怎么改，唯一要注意的就是CNB 项目名称，cnb本身持久化数据是持久化了/root/.cnb和 /workspace目录（存疑，没找到明确说明，但目前观察来看是做了持久化的），在cnb.yml中配置docker挂载卷/绑定目录是不能实现持久化的，除非你每次启动开发环境，cnb分给你的都是同一个宿主机，这不太可能，所以我做了一个处理 把需要持久化的数据，软连接到 /root/.cnb ，这里的问题是，这个目录是所有开发环境共享的，比如说你做了个A开发环境用来写py脚本，在root目录里加了个 hello.py ，如果不做隔离，你的B开发环境，用来写Java的，也能看到root目录中的hello.py，好处坏处都有，不隔离的话，你可以所有环境都用同一套Claudecode的配置，不用每次都配置，坏处就是数据会比较混乱吧
!(https://osspub.xyzen.de/img/deployVibespaceToCNB/2.png)
第六步：自定义层，这步的设计主要是给大家用来安装你的编程语言的框架的，很多语言我不知道大家会需要哪些框架，所以需要大家自定义，不过也可以不管，先略过，后面让ai装，然后做好数据的持久化就好，在最后的cnb.yml中按照注释的说明配置就好
```yml
stages:
- name: 数据持久化配置链接
# CNB禁止挂载整个ROOT目录，workspace目录会自动挂载
# 所有需要持久化的目录，建立软连接到 /root/.cnb/ 目录，此目录CNB会自动持久化
# 项目名称「vibesapce」用于数据隔离，路径: /root/.cnb/vibesapce
# 如需持久化其他目录（如语言运行时配置），请参照下面的格式自行添加
script: |
mkdir -p /root/.cnb/vibesapce/.claude /root/.cnb/vibesapce/.cc-switch /root/.cnb/vibesapce/.vscode-server
ln -sfn /root/.cnb/vibesapce/.claude /root/.claude
ln -sfn /root/.cnb/vibesapce/.cc-switch /root/.cc-switch
ln -sfn /root/.cnb/vibesapce/.vscode-server /root/.vscode-server
```
## 免费部署到cnb
1. 到(https://cnb.cool/new/repos) 注册一个账号，然后创建仓库，然后点击新建文件（可以用git，但对于小白来说，这样更简单）
2.上传刚才生成的dockerfile entrypoint.sh .cnb.yml
3. 根据自己的需求，修改.cnb.yml，注释中注明了一些可以修改的地方，比如 `指定使用的CNB开发核心数，内存为核心数的2倍，最大64核心`CNB目前免费额度是1600核时每天，CPU数肯定是越多性能越好，但为了每天都能用，可以根据 1600 / 31 / 平均每天使用的时长 来计算出适合你的cpu核心数，如果不需要高性能，设置2核，一个月一直开着也没事
`keepAliveTimeout: 60m` 为你希望你的开发环境自动保活多久，也就是说，在不超过这里定义的时间范围 内，你的开发环境不会因为闲置而关闭，最大是18小时，设置大于18小时的时长也会被限制到18小时。
4. 点击右上角的云原生开发，等待构建完成，选择你喜欢的方式连接，这里以web为例，进入后ctrl+shift+c 唤出终端，如果你选了cc-switch 输入cc-switch配置Claude即可，如果没有，那就需要手动编辑/root/.claude/settings.json ，如果你是官方用户，直接登录就可以
5. 配置好后，使用`vibe` 指令，即可开始vibe，如果提示vibe指令不存在，使用`echo 'alias vibe="IS_SANDBOX=1 claude --dangerously-skip-permissions"' >> /root/.bashrc &&source /root/.bashrc` 后再用vibe指令即可，让Claude进入特权模式，不用啥都要确认，发挥你的创意，拷打AI，期待大家能做出些东西分享出来！ 你这名字！ 感谢分享 感谢感谢 mark了应该会用得到 已star
页:
[1]