云原生构建

使用技巧

# 快捷键

# 浏览器剪贴板授权

浏览器中使用 ctrl/command + v 快捷键粘贴，可能会弹出剪贴板授权框， 可使用以下方法避免弹出授权框：

  • 使用以下快捷键粘贴，不会弹出 Chrome 的剪贴板授权框。

    • win: shift + insert
    • mac: shift + command + v

  • 浏览器设置中添加剪贴板授权

复制 chrome://settings/content/clipboard 到 chrome 浏览器中打开剪贴板设置， 添加网站域名到 允许查看您的剪贴板 列表中。

具体打开路径：设置 -> 隐私设置和安全 -> 权限（更多权限） -> 剪贴板 -> 允许查看您的剪贴板

# 解决快捷键冲突

当 WebIDE 快捷键跟浏览器快捷键冲突，如何解决：

  • 使用 VSCode 客户端开发

# VSCode/Cursor 客户端远程开发

云原生开发默认环境支持 WebIDE、VSCode 客户端、Cursor 客户端远程开发。

但开发者如果选择自定义开发环境，需做以下配置来支持 VSCode 客户端 和 Cursor 客户端远程开发：

# 如何支持 VSCode/Cursor 客户端

  • 开发环境中安装 openssh-server

自定义开发环境时可在 Dockerfile 文件中提前安装好 ssh 服务。

# .ide/Dockerfile
FROM your-image

# 注意：基础镜像不同，安装方式可能存在差异，可根据实际情况采用不同安装方式
apt-get update
apt-get install -y openssh-server
  • 下载 VSCode/Cursor 客户端，并安装 Remote-SSH 插件

# 解决 VSCode/Cursor 窗口覆盖问题

点击打开 VSCode 客户端按钮，可能会出现覆盖原有窗口问题。

可修改 VSCode/Cursor 设置解决问题：将 Open Folders In New Window 设置为 on 来实现每次打开新窗口。

设置路径如下：

  • Manage -> Settings -> User -> Window -> New Window -> Open Folders in New Window
  • 管理 -> 设置 -> 用户 -> 窗口 -> 新建窗口 -> Open Folders in New Window

# 文件漫游

远程开发支持部分配置文件漫游：环境销毁后，再次创建开发环境，漫游的文件可恢复到开发环境中。 最大漫游容量：64MB，超过最大容量将报错且无法漫游。

# 漫游内容

以下文件或文件夹会按用户维度进行漫游， 对所有项目有效果(~: 当前用户的主目录，一般是 /root 目录)：

  • ~/.*rc：bash、zsh 等配置
  • ~/.*profile：bash、zsh 等配置
  • ~/.local/share/code-server/User/settings.json：WebIDE 配置文件
  • ~/.vscode-server/data/Machine/settings.json：VSCode 客户端配置文件
  • ~/.local/share/code-server/User/snippets/*：：VSCode 相关配置
  • ~/.cnb: 用户可按需在该目录下新增个人环境所需配置文件。

关于 ~/.cnb 目录的使用说明：

  • 新增配置文件：如果仓库需要新增个人配置文件 .env.local， 用于存储仓库所需的个人环境变量，可在 ~/.cnb 目录下新增 .env.local 文件
  • 在环境启动后可配置脚本任务将 ~/.cnb/.env.local 复制或软链到工作目录（默认为/workspace）， Yaml 配置如下
  • 在 .gitignore 中新增忽略文件 .env.local，避免个人配置文件被提交到仓库

1、示例一，复制文件到工作目录：

要修改漫游的配置文件，需直接修改 /root/.cnb/.env.local

# .cnb.yml
$:
  vscode:
    - name: vscode
      services:
        - vscode
      stages:
        - name: 复制 .env.local 文件到工作目录（仓库根目录）
          # ./ 是工作目录，默认为 /workspace
          script: |
            if [ -e "/root/.cnb/.env.local" ]; then
                cp -f /root/.cnb/.env.local ./
            else
                echo "文件不存在"
            fi

2、示例二，软链文件到工作目录：

要修改漫游的配置文件，可修改工作目录的 /workspace/.env.local（软链方式会同步修改源文件）

# .cnb.yml
$:
  vscode:
    - name: vscode
      services:
        - vscode
      stages:
        - name: 软链 .env.local 文件到工作目录（仓库根目录）
          # ./ 是工作目录，默认为 /workspace
          script: |
            if [ -e "/root/.cnb/.env.local" ]; then
                ln -sf /root/.cnb/.env.local ./.env.local 
            else
                echo "文件不存在"
            fi

# 漫游原理和时机

漫游时机：

用户在开发环境修改配置（如 settings.json）后，不会立马漫游修改内容， 而是等到开发环境销毁时，再从开发环境中取出需漫游的文件进行持久化存储

如何恢复漫游文件：

重建开发环境时，会自动将漫游的文件恢复到开发环境中

如何验证文件是否漫游成功：

修改可漫游文件后如需验证修改效果，需等到开发环境销毁后，再创建/重建开发环境才能看到修改文件的漫游效果

# 如何访问业务端口

方法一：

可通过 VSCode/Cursor 客户端的 port forward 端口转发能力转发需要访问的业务端口到本地

方法二：

使用 WebIDE 时，假如启动服务 0.0.0.0:8080，WebIDE url 为 https://cnb-xxx-xxxxxx-001.cnb.xxx.com。 可使用 https://cnb-xxx-xxxxxx-001-8080.cnb.xxx.com （域名部分加上中划线端口号 -8080）访问业务端口启动的服务。

注意，启动在 localhost 或 127.0.0.1 上的服务，无法使用方法二访问

# VSCode 配置文件漫游

# 配置文件路径

WebIDE 的配置文件（settings.json）路径：

  • 用户维度：~/.local/share/code-server/User/settings.json
  • 机器纬度：~/.local/share/code-server/Machine/settings.json
  • 仓库维度：.vscode/settings.json。相对目录为当前工作区（默认为 /workspace），即仓库根目录

VSCode 客户端（Remote-SSH） 的配置文件（settings.json）路径：

  • 用户维度：存在用户本地，可自行配置
  • 机器纬度：~/.vscode-server/data/Machine/settings.json，将会被漫游
  • 仓库维度：.vscode/settings.json。相对目录为当前工作区（默认为 /workspace），即仓库根目录

# 更多共享策略

  • 用户维度共享：可实现同一个用户的配置共享，不同用户隔离

对于 WebIDE：用户纬度的配置文件（settings.json）会被自动漫游，且只对用户自己生效。 对于 VSCode/Cursor 客户端：由于用户纬度配置文件存在本地，因此机器纬度的配置文件（settings.json）会被自动漫游，且只对用户自己生效。

修改配置后，创建更多的开发环境，配置文件会被自动复制。

  • 仓库维度共享：可实现同一个仓库的配置共享，不同仓库隔离

如何在同一个仓库内共享配置：提交 .vscode/settings.json 文件到仓库即可

  • 环境维度共享：可实现跨仓库的环境共享

假设你已经有构建好的开发环境镜像，那么可以直接使用在 Yaml 配置中：









 

# .cnb.yml
$:
  vscode:
    - name: vscode
      services:
        - vscode
      docker:
        # 使用自定义镜像作为开发环境
        image: groupname/imagename:latest

# 工作区未提交代码如何保存

工作区存在未提交的代码，无需担心开发环境销毁时会丢失。

# 未提交代码如何保存

工作区未提交的代码不必担心会丢失， 开发环境销毁时，会自动将工作区未提交代码提交到远程不可见分支。

# 保存的代码如何恢复到工作区

重建开发环境时，会自动将上述保存内容恢复到开发环境。

# 如何安装 VSCode 扩展

自定义开发环境时可在 Dockerfile 中安装常用的 VSCode 扩展，方便复用，有以下两种安装方式。

# 通过扩展 id 安装

code-server --install-extension ${扩展 id}

扩展 id 如何查看：在 WebIDE 或 open-vsx 搜索插件，在插件详情页查看扩展 id。

# 通过 vsx 扩展文件安装

code-server --install-extension ms-python.python.vsx

说明：WebIDE 使用的扩展源是 open-vsx (开源)， 非 微软官方扩展源（闭源）， 如果 open-vsx 缺失某些插件，可在 微软官方扩展源 搜索插件， 在插件详情页下载 vsx 源文件安装。







 
 
 
 
 









# .ide/Dockerfile
FROM node:20

# 安装 code-server 和插件
# 方法一：通过 id 安装插件
RUN curl -fsSL https://code-server.dev/install.sh | sh \
  && code-server --install-extension redhat.vscode-yaml \
  && code-server --install-extension orta.vscode-jest \
  && code-server --install-extension dbaeumer.vscode-eslint \
  && code-server --install-extension eamodio.gitlens \
  && code-server --install-extension tencent-cloud.coding-copilot \
  && echo done

# 安装 ssh 服务，用于支持 VSCode 客户端通过 Remote-SSH 访问开发环境
RUN apt-get update && apt-get install -y wget unzip openssh-server

# 指定字符集支持命令行输入中文（根据需要选择字符集）
ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8

# 如何修改资源规格

支持定制开发环境 cpu 和内存配置。

目前默认配置是 cpus: 8核，内存：16G。

可通过定制 Yaml 配置修改 cpu 和内存配置。

← 推荐用法 →