跳到主要内容

云原生开发进阶：自定义环境与客户端接入

第 5 篇只是"能打开"。这篇讲怎么把它配成你顺手的开发机。

一、三种接入方式​

方式是什么适合
WebIDE浏览器里的 VS Code（code-server）临时改代码、换设备、演示
VS Code / Cursor本地客户端 Remote-SSH 连接日常开发主力
JetBrains GatewayGoLand、IDEA、PyCharm 等Java / Go / PHP 重度用户
CodeBuddy Web浏览器里的 AI 编码界面想用 AI 但不装客户端

CodeBuddy Web 有个前提：镜像里得有 codebuddy 命令，且版本 ≥ 2.137.0，否则入口不显示。

二、单容器还是双容器​

这是排查"为什么工具找不到"的第一现场。

  • 单容器模式：开发环境和 code-server 在同一个容器里
  • 双容器模式：两者分开放，/workspace 互通

什么时候会变双容器？你的镜像里没装 code-server 时，系统会自动补一个 code-server 容器。

双容器模式的三个后果：

  1. WebIDE / VSCode 实际连的是 code-server 容器，不是你的开发环境容器
  2. 默认终端（名为 CNB）才连到开发环境；git 不在开发环境里就切到另一个终端
  3. VSCode 插件装在 code-server 容器里，可能访问不到开发环境容器，Debug 类功能会受影响

所以：推荐单容器，在你的镜像是装好 code-server。

三、自定义开发环境​

两种方式，和构建环境一样：

.cnb.yml
$:
  vscode:
    - docker:
        image: node:22
      services:
        - vscode
        - docker

或者用 .ide/Dockerfile：

.ide/Dockerfile
FROM node:22

# 装 SSH，让 VSCode / Cursor / JetBrains 能连
RUN apt-get update && apt-get install -y openssh-server git curl

# 装 code-server，走单容器模式，并预装插件
RUN curl -fsSL https://code-server.dev/install.sh | sh \
    && code-server --install-extension cnbcool.cnb-welcome \
    && code-server --install-extension redhat.vscode-yaml

ENV LANG C.UTF-8

:::tip JetBrains 的特殊要求 JetBrains 系列必须装在 /ide_cnb 目录，系统靠这个路径识别已安装的 IDE。~/.vscode-server 则是 VSCode 客户端用的。 :::

四、打开环境时自动做点什么​

.cnb.yml
$:
  vscode:
    - services:
        - vscode
      env:
        CNB_WELCOME_CMD: bash /workspace/setup.sh

CNB_WELCOME_CMD 是 Shell 命令，进入环境时在终端自动执行一次。多步操作就写进脚本再调用。

五、业务端口预览​

起了前端 dev server 想看效果，两种方法：

方法一：PORTS 面板——WebIDE 左侧 PORTS 加端口映射，自动生成 URL

方法二：拼 URL——环境变量 CNB_VSCODE_PROXY_URI 里有 {{port}} 占位符：

node app.js    # 记得监听 0.0.0.0
echo "$CNB_VSCODE_PROXY_URI" | sed "s/{{port}}/3000/"

客户端用户直接用 VS Code 的 Port Forward 就行。

六、个人环境变量：跨仓库复用同一份密钥​

按仓库 imports 有个痛点：10 个仓库要配 10 次。个人环境变量解决这个：

进 个人设置 → 云原生开发 → 个人环境变量，按 YAML 数组填：

- imports: https://cnb.cool/my/secrets/-/blob/main/npm.yml
  use_in_slugs:
    - my-group/**
- imports:
    - https://cnb.cool/my/secrets/-/blob/main/k8s.yml
  use_in_slugs:
    - my-group/project-a
    - my-group/project-b

三个要点：

  • use_in_slugs 必填，不填就不注入（防泄漏）
  • 只对云原生开发生效，不影响普通构建
  • 支持 glob，** 跨目录

七、文件漫游：配置跟着你走​

环境销毁重建后，这些会自动恢复：

  • ~/.gitconfig（如果容器里已存在则跳过）
  • WebIDE 用户级 settings.json：~/.local/share/code-server/User/settings.json
  • 你自定义的漫游目录

想团队共享编辑器配置，用机器级：~/.local/share/code-server/Machine/settings.json，在 .ide/Dockerfile 里写好即可。

仓库级配置就是 .vscode/settings.json，跟着仓库走。

八、顺手记几个 WebIDE 小技巧​

问题解法
粘贴弹剪贴板授权Windows Shift + Insert，macOS Shift + Command + V；或在 chrome://settings/content/clipboard 永久授权
终端弹字体授权在 chrome://settings/content/localFonts 里允许对应域名
快捷键和浏览器冲突换本地客户端

九、仅预览模式（beta）​

只想"看看跑起来什么样"，不想进 IDE：点按钮直接开预览页。

.cnb.yml
$:
  vscode:
    - docker:
        build: .ide/Dockerfile
      services:
        - name: vscode
          options:
            onlyPreview: true
            launch: node index.js

代价是：没有 WebIDE、不支持代理（CNB_VSCODE_PROXY_URI 无效）、要 SSH 得自己装 openssh。beta 阶段，配置可能变。