使用 VS Code Remote Container 搭建 Mesop 内部开发环境【免费下载链接】mesopRapidly build AI apps in Python项目地址: https://gitcode.com/GitHub_Trending/me/mesopVS Code Remote Container远程容器是 Mesop 仓库推荐的内部开发contributor 级开发快速上手方式只要本机安装了 VS Code 与 Docker Desktop即可一键拉起一个完全配置好的开发工作区免去手工排查依赖安装问题的烦恼直接开始开发与调试 Mesop 本身。读完本文你将掌握从 Fork 克隆仓库、共享 Git 凭据、在容器内打开项目、等待初始化脚本完成到启动./scripts/cli.sh开发服务器并在http://localhost:32123预览全部 demo 的完整流程同时理解背后.devcontainer/devcontainer.json、docker-compose.yml、Dockerfile与scripts/devcontainer_setup.sh的配置原理。前置条件安装 VS Code 与 DockerRemote Container 方案的本质是容器负责运行代码VS Code 负责编辑与调试。因此需要先在本机安装两样东西VS Code作为开发界面通过 Dev Containers 扩展与容器通信Docker Desktop安装后自带 Docker Engine 与 Docker Compose用于构建并运行容器Linux 用户也可使用其他 Docker 引擎。注意Remote Containers 会构建一个完整的 Mesop 开发环境因而对 Docker 与 VS Code 的版本有一定要求Docker Desktop 需处于运行状态且需允许其分配足够的内存/磁盘给容器。Fork 并克隆 Mesop 仓库在使用远程容器前首先要把 Mesop 仓库复制到自己的账号下并克隆到本地在 Mesop 仓库页面点击Fork创建自己的副本将 Fork 后的仓库git clone到本地目录遵循标准的 GitHub Fork 协作流程添加 upstream、创建功能分支、提交 Pull Request 等。重要建议不要在本地开发目录与远程容器中复用同一个文件夹。远程容器使用 bind mount 将宿主目录挂载进容器见 docker-compose.yml 中的- .:/workspaces/mesop如果本地同时用另一套工具链开发同一份代码容易产生文件冲突或状态错乱。正确做法是为 Remote Container 单独克隆一份仓库副本例如mesop-dev这样的独立目录。将 Git 凭据共享给容器容器内默认以普通用户mesop-dev运行见 Dockerfile 中的USER mesop-dev它需要读写 GitHub 凭据才能执行git pull、git push。Dev Containers 扩展提供了几种凭据共享方式HTTPS 克隆使用 GitHub CLI 或 Git Credential Manager 在宿主机缓存凭据Dev Containers 会自动将其转发进容器SSH 克隆宿主机上的ssh-agent会被自动转发到远程容器你只需在宿主机执行ssh-add添加为 GitHub 配置的 SSH 私钥即可。容器内以mesop-dev用户运行且该用户被授予免密sudo见 Dockerfile 中的echo mesop-dev ALL(root) NOPASSWD:ALL因此即便在初始化脚本里需要 root 权限操作如sudo chown也不会中断流程。在容器中打开文件夹启动流程非常简单打开 VS Code按Cmd/Ctrl Shift P打开命令面板选择Dev Containers: Open Folder in Container...如果命令不可见请先安装 Dev Containers 扩展选中刚才克隆的 Mesop 仓库目录。VS Code 会读取仓库根目录的 .devcontainer/devcontainer.json自动完成构建镜像 → 启动容器 → 将仓库挂载到/workspaces/mesop→ 安装扩展 → 执行初始化脚本。整个过程会新建一个远程容器工作区。devcontainer.json 做了什么从 .devcontainer/devcontainer.json 可以看到这套环境的完整定义dockerComposeFileservice复用仓库根目录的 docker-compose.yml以mesop服务作为开发容器workspaceFolder工作区固定为/workspaces/mesoppostCreateCommand容器创建后执行bash scripts/devcontainer_setup.sh这是环境初始化的核心下文详解customizations.vscode自动安装 4 个扩展 ——esbenp.prettier-vscodeTypeScript 格式化、ms-python.pythonms-python.vscode-pylancePython 语言服务、charliermarsh.ruffPython lint/format并预设编辑器设置files.autoSave: onFocusChange、editor.formatOnSave: true同时把bazel-bin等构建产物目录加入search.exclude避免搜索结果污染并为python.analysis.extraPaths添加./bazel-bin以便 Pylance 识别由 Bazel 生成的 Python 模块。docker-compose.yml 的关键设计docker-compose.yml 中除挂载工作目录外有两个值得注意的点node_modules存放在命名卷named volume中而不是 bind mount既提升 I/O 性能又避免覆盖宿主机器上安装的 node_modules端口映射32123:32123把容器内 Mesop 开发服务器端口暴露到宿主机这正是后文http://localhost:32123可访问的原因vscode_extensions卷单独存放.vscode-server/extensions保证容器重建后扩展缓存不丢失。而 Dockerfile 则基于python:3.10.15-bullseye预装了curl、tmux、vim、sudo等通用工具以及 Playwright 运行所需的libnss3等系统库用于 E2E 测试并通过 nvm 安装 Node.js 18.19.1、全局安装yarn、bazel/bazelisk与bazel/ibazel后者是 Mesop 热重载开发服务器所用工具。等待 postCreateCommand 完成容器创建后VS Code 会执行 .devcontainer/devcontainer.json 中配置的postCreateCommand即 scripts/devcontainer_setup.sh。在它跑完之前工作区不可用需要耐心等待。初始化脚本到底做了什么scripts/devcontainer_setup.sh 是一个多步骤引导脚本逐一完成修正 node_modules 权限由于 Docker 卷初始属主是 root先执行sudo chown mesop-dev:mesop-dev node_modules让开发用户可写更新第三方 Python 依赖bazel run //build_defs:pip_requirements.update同步build_defs/requirements.txt对应的锁定版本构建 CLI 虚拟环境bazel run //mesop/cli:cli.venv生成.cli.venv并激活这是运行 Mesop CLI 所用的 Python 环境安装锁定依赖pip install -r build_defs/requirements_lock.txt让 VS Code 的 Python 解释器能识别全部第三方依赖生成 proto 模块执行./scripts/setup_proto_py_modules.sh为mesop/components/*.proto生成可导入的 Python 模块保证 IDE 与运行时都能解析ui.proto等协议文件安装并启用 pre-commitpip install pre-commit3.7.1后执行pre-commit install把仓库的 Git 钩子接入提交流程安装 Playwright 浏览器yarn playwright install为 E2E 测试下载对应浏览器二进制。由于其中包含bazel run构建步骤首次执行耗时较长属正常现象初始化完成后状态栏会提示容器就绪。启动 Mesop 开发服务器初始化完成后在 VS Code 内置终端中运行./scripts/cli.shscripts/cli.sh 内部做了两件事先通过lsof -t -i:32123 | xargs kill清理占用 32123 端口的旧进程保证热重载重启干净再执行ibazel run //mesop/cli:editor_cli -- --pathmesop/mesop/example_index.py --reload_demo_modules。这里的关键点ibazelBazel 的 watch 模式会监听源码变化并自动重新构建、重启服务实现热重载开发循环--pathmesop/mesop/example_index.py指向 mesop/example_index.py该文件集中导入全部 demo 与组件 e2e 页面是热重载可用的最低公共祖先模块--reload_demo_modules开启 demo 模块的热重载。启动过程中会出现一些警告信息例如 Bazel 首次构建的输出、端口占用提示等忽略它们即可。当终端出现服务器就绪提示时说明 Mesop 服务已成功监听。补充若需要以生产模式运行无热重载仓库还提供了 scripts/cli_prod.sh其差异在于使用bazel run //mesop/cli -- --pathmesop/mesop/example_index.py --prod。日常迭代开发请使用./scripts/cli.sh。查看 Mesop demo./scripts/cli.sh启动成功后在宿主机浏览器打开http://localhost:32123即可访问 Mesop 的全部示例 demo按钮、图表、聊天、日期选择、表格等一应俱全并验证热重载效果修改任意 demo 源码页面会自动刷新。至此一套完整的 Mesop 内部开发环境搭建完成你可以在此基础上阅读源码、编写新组件或提交 PR。常见问题与排查思路端口无法访问确认docker-compose.yml中32123:32123映射存在且./scripts/cli.sh输出的就绪信息已出现容器内 git 操作失败按上文重新配置 HTTPS 凭据缓存或 SSH agent 转发Pylance 报模块找不到确认 scripts/devcontainer_setup.sh 已完整执行bazel-bin已生成且被加入python.analysis.extraPathsnode_modules 权限错误重新执行sudo chown mesop-dev:mesop-dev node_modules后重跑初始化脚本首次构建过慢属 Bazel 冷启动正常现象后续增量构建会明显加快。参考文件本文核心流程来自 docs/internal/vs-code-remote-container.md容器配置.devcontainer/devcontainer.json、docker-compose.yml、Dockerfile初始化脚本scripts/devcontainer_setup.sh启动脚本scripts/cli.sh、scripts/cli_prod.shDemo 入口mesop/example_index.py【免费下载链接】mesopRapidly build AI apps in Python项目地址: https://gitcode.com/GitHub_Trending/me/mesop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
使用 VS Code Remote Container 搭建 Mesop 内部开发环境
使用 VS Code Remote Container 搭建 Mesop 内部开发环境【免费下载链接】mesopRapidly build AI apps in Python项目地址: https://gitcode.com/GitHub_Trending/me/mesopVS Code Remote Container远程容器是 Mesop 仓库推荐的内部开发contributor 级开发快速上手方式只要本机安装了 VS Code 与 Docker Desktop即可一键拉起一个完全配置好的开发工作区免去手工排查依赖安装问题的烦恼直接开始开发与调试 Mesop 本身。读完本文你将掌握从 Fork 克隆仓库、共享 Git 凭据、在容器内打开项目、等待初始化脚本完成到启动./scripts/cli.sh开发服务器并在http://localhost:32123预览全部 demo 的完整流程同时理解背后.devcontainer/devcontainer.json、docker-compose.yml、Dockerfile与scripts/devcontainer_setup.sh的配置原理。前置条件安装 VS Code 与 DockerRemote Container 方案的本质是容器负责运行代码VS Code 负责编辑与调试。因此需要先在本机安装两样东西VS Code作为开发界面通过 Dev Containers 扩展与容器通信Docker Desktop安装后自带 Docker Engine 与 Docker Compose用于构建并运行容器Linux 用户也可使用其他 Docker 引擎。注意Remote Containers 会构建一个完整的 Mesop 开发环境因而对 Docker 与 VS Code 的版本有一定要求Docker Desktop 需处于运行状态且需允许其分配足够的内存/磁盘给容器。Fork 并克隆 Mesop 仓库在使用远程容器前首先要把 Mesop 仓库复制到自己的账号下并克隆到本地在 Mesop 仓库页面点击Fork创建自己的副本将 Fork 后的仓库git clone到本地目录遵循标准的 GitHub Fork 协作流程添加 upstream、创建功能分支、提交 Pull Request 等。重要建议不要在本地开发目录与远程容器中复用同一个文件夹。远程容器使用 bind mount 将宿主目录挂载进容器见 docker-compose.yml 中的- .:/workspaces/mesop如果本地同时用另一套工具链开发同一份代码容易产生文件冲突或状态错乱。正确做法是为 Remote Container 单独克隆一份仓库副本例如mesop-dev这样的独立目录。将 Git 凭据共享给容器容器内默认以普通用户mesop-dev运行见 Dockerfile 中的USER mesop-dev它需要读写 GitHub 凭据才能执行git pull、git push。Dev Containers 扩展提供了几种凭据共享方式HTTPS 克隆使用 GitHub CLI 或 Git Credential Manager 在宿主机缓存凭据Dev Containers 会自动将其转发进容器SSH 克隆宿主机上的ssh-agent会被自动转发到远程容器你只需在宿主机执行ssh-add添加为 GitHub 配置的 SSH 私钥即可。容器内以mesop-dev用户运行且该用户被授予免密sudo见 Dockerfile 中的echo mesop-dev ALL(root) NOPASSWD:ALL因此即便在初始化脚本里需要 root 权限操作如sudo chown也不会中断流程。在容器中打开文件夹启动流程非常简单打开 VS Code按Cmd/Ctrl Shift P打开命令面板选择Dev Containers: Open Folder in Container...如果命令不可见请先安装 Dev Containers 扩展选中刚才克隆的 Mesop 仓库目录。VS Code 会读取仓库根目录的 .devcontainer/devcontainer.json自动完成构建镜像 → 启动容器 → 将仓库挂载到/workspaces/mesop→ 安装扩展 → 执行初始化脚本。整个过程会新建一个远程容器工作区。devcontainer.json 做了什么从 .devcontainer/devcontainer.json 可以看到这套环境的完整定义dockerComposeFileservice复用仓库根目录的 docker-compose.yml以mesop服务作为开发容器workspaceFolder工作区固定为/workspaces/mesoppostCreateCommand容器创建后执行bash scripts/devcontainer_setup.sh这是环境初始化的核心下文详解customizations.vscode自动安装 4 个扩展 ——esbenp.prettier-vscodeTypeScript 格式化、ms-python.pythonms-python.vscode-pylancePython 语言服务、charliermarsh.ruffPython lint/format并预设编辑器设置files.autoSave: onFocusChange、editor.formatOnSave: true同时把bazel-bin等构建产物目录加入search.exclude避免搜索结果污染并为python.analysis.extraPaths添加./bazel-bin以便 Pylance 识别由 Bazel 生成的 Python 模块。docker-compose.yml 的关键设计docker-compose.yml 中除挂载工作目录外有两个值得注意的点node_modules存放在命名卷named volume中而不是 bind mount既提升 I/O 性能又避免覆盖宿主机器上安装的 node_modules端口映射32123:32123把容器内 Mesop 开发服务器端口暴露到宿主机这正是后文http://localhost:32123可访问的原因vscode_extensions卷单独存放.vscode-server/extensions保证容器重建后扩展缓存不丢失。而 Dockerfile 则基于python:3.10.15-bullseye预装了curl、tmux、vim、sudo等通用工具以及 Playwright 运行所需的libnss3等系统库用于 E2E 测试并通过 nvm 安装 Node.js 18.19.1、全局安装yarn、bazel/bazelisk与bazel/ibazel后者是 Mesop 热重载开发服务器所用工具。等待 postCreateCommand 完成容器创建后VS Code 会执行 .devcontainer/devcontainer.json 中配置的postCreateCommand即 scripts/devcontainer_setup.sh。在它跑完之前工作区不可用需要耐心等待。初始化脚本到底做了什么scripts/devcontainer_setup.sh 是一个多步骤引导脚本逐一完成修正 node_modules 权限由于 Docker 卷初始属主是 root先执行sudo chown mesop-dev:mesop-dev node_modules让开发用户可写更新第三方 Python 依赖bazel run //build_defs:pip_requirements.update同步build_defs/requirements.txt对应的锁定版本构建 CLI 虚拟环境bazel run //mesop/cli:cli.venv生成.cli.venv并激活这是运行 Mesop CLI 所用的 Python 环境安装锁定依赖pip install -r build_defs/requirements_lock.txt让 VS Code 的 Python 解释器能识别全部第三方依赖生成 proto 模块执行./scripts/setup_proto_py_modules.sh为mesop/components/*.proto生成可导入的 Python 模块保证 IDE 与运行时都能解析ui.proto等协议文件安装并启用 pre-commitpip install pre-commit3.7.1后执行pre-commit install把仓库的 Git 钩子接入提交流程安装 Playwright 浏览器yarn playwright install为 E2E 测试下载对应浏览器二进制。由于其中包含bazel run构建步骤首次执行耗时较长属正常现象初始化完成后状态栏会提示容器就绪。启动 Mesop 开发服务器初始化完成后在 VS Code 内置终端中运行./scripts/cli.shscripts/cli.sh 内部做了两件事先通过lsof -t -i:32123 | xargs kill清理占用 32123 端口的旧进程保证热重载重启干净再执行ibazel run //mesop/cli:editor_cli -- --pathmesop/mesop/example_index.py --reload_demo_modules。这里的关键点ibazelBazel 的 watch 模式会监听源码变化并自动重新构建、重启服务实现热重载开发循环--pathmesop/mesop/example_index.py指向 mesop/example_index.py该文件集中导入全部 demo 与组件 e2e 页面是热重载可用的最低公共祖先模块--reload_demo_modules开启 demo 模块的热重载。启动过程中会出现一些警告信息例如 Bazel 首次构建的输出、端口占用提示等忽略它们即可。当终端出现服务器就绪提示时说明 Mesop 服务已成功监听。补充若需要以生产模式运行无热重载仓库还提供了 scripts/cli_prod.sh其差异在于使用bazel run //mesop/cli -- --pathmesop/mesop/example_index.py --prod。日常迭代开发请使用./scripts/cli.sh。查看 Mesop demo./scripts/cli.sh启动成功后在宿主机浏览器打开http://localhost:32123即可访问 Mesop 的全部示例 demo按钮、图表、聊天、日期选择、表格等一应俱全并验证热重载效果修改任意 demo 源码页面会自动刷新。至此一套完整的 Mesop 内部开发环境搭建完成你可以在此基础上阅读源码、编写新组件或提交 PR。常见问题与排查思路端口无法访问确认docker-compose.yml中32123:32123映射存在且./scripts/cli.sh输出的就绪信息已出现容器内 git 操作失败按上文重新配置 HTTPS 凭据缓存或 SSH agent 转发Pylance 报模块找不到确认 scripts/devcontainer_setup.sh 已完整执行bazel-bin已生成且被加入python.analysis.extraPathsnode_modules 权限错误重新执行sudo chown mesop-dev:mesop-dev node_modules后重跑初始化脚本首次构建过慢属 Bazel 冷启动正常现象后续增量构建会明显加快。参考文件本文核心流程来自 docs/internal/vs-code-remote-container.md容器配置.devcontainer/devcontainer.json、docker-compose.yml、Dockerfile初始化脚本scripts/devcontainer_setup.sh启动脚本scripts/cli.sh、scripts/cli_prod.shDemo 入口mesop/example_index.py【免费下载链接】mesopRapidly build AI apps in Python项目地址: https://gitcode.com/GitHub_Trending/me/mesop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
