使用 GitHub Codespaces 快速搭建 Mesop 开发环境从创建到运行示例的完整指南【免费下载链接】mesopRapidly build AI apps in Python项目地址: https://gitcode.com/GitHub_Trending/me/mesop本文面向希望快速参与 Mesop 内部开发internal development的开发者。Mesop 是使用 Python 快速构建 AI 应用的开源框架其仓库同时包含 Python 后端、Angular 前端、Bazel 构建脚本与 Playwright 测试等复杂工程结构。本文以仓库文档 docs/internal/codespaces.md 为主线结合仓库内 .devcontainer/devcontainer.json、scripts/devcontainer_setup.sh 与 Dockerfile 等实际配置讲解如何通过 GitHub Codespaces 一键获得开箱即用的完整开发环境并最终在浏览器中启动 Mesop 开发服务器、预览全部 demo 页面。为什么用 Codespaces 开发 MesopMesop 的开发环境并非“装个 Python 包”那么简单它依赖 Bazel 构建系统管理 Python 与 Angular 两套产物、ibazel 增量编译、Node.js/nvm、Playwright 浏览器以及大量第三方 Python 依赖。手动在本地搭建需要花费大量时间排查安装问题。GitHub Codespaces 提供了一种“点击按钮即获得完整工作区”的方式省去了安装排障环节。仓库中的 docs/internal/codespaces.md 明确指出GitHub Free 与 Pro 计划均提供免费额度free tier因此 Codespaces 非常适合用来编写和快速测试补丁quick patches。需要注意文档同时给出提示如果使用免费额度由于 CPU 资源有限Codespace 的完整搭建过程可能需要 2030 分钟这是由云环境资源配额决定的预期等待时间并非异常。Codespaces 开发环境的底层构成在开始操作前先了解 Codespaces 容器内的环境是如何定义的这有助于理解后续每个步骤的耗时与产物。仓库根目录的 .devcontainer/devcontainer.json 是 VS Code 开发容器的入口配置关键字段如下dockerComposeFile: ../docker-compose.yml基于 docker-compose.yml 启动容器service指向mesopworkspaceFolder: /workspaces/mesop仓库挂载为工作区目录postCreateCommand: bash scripts/devcontainer_setup.sh容器创建后执行初始化脚本这是整个搭建过程的核心customizations.vscode预装 VS Code 扩展Prettier、Python、Pylance、Ruff并配置files.autoSave、formatOnSave以及搜索排除项bazel-bin/**、bazel-out/**、bazel-mesop/**等还通过python.analysis.extraPaths: [./bazel-bin]让 Pylance 识别由 Bazel 生成的 Python 桩文件。docker-compose.yml 中端口映射为32123:32123与 Mesop 开发服务器端口一致node_modules被单独放在 Docker 卷中既提升性能又避免 bind mount 覆盖宿主机已安装的 node_modules。开发容器的镜像由仓库根目录 Dockerfile 定义基础镜像为python:3.10.15-bullseye预装 curl、locales、tmux、vim、sudo 等通用工具以及 Playwright 所需的系统库通过 nvm 安装 Node.js 18.19.1全局安装yarn、bazel/bazelisk与bazel/ibazel最后创建非 root 用户mesop-dev并赋予免密 sudo 权限容器默认以mesop-dev身份工作。第一步创建 GitHub Codespace你可以在 Mesop 的 GitHub 仓库页面mesop-dev/mesop上点击Code → Codespaces → Create codespace创建开发环境无需任何本地配置创建后GitHub 会按照 .devcontainer/devcontainer.json 的定义构建容器并在容器就绪后自动执行postCreateCommand。此时工作区还不能立即使用必须等待初始化脚本执行完毕。第二步等待 postCreateCommand 完成postCreateCommand执行的是仓库内的 scripts/devcontainer_setup.sh其内容决定了“开箱即用”的完整度具体步骤包括修正 node_modules 属主由于 node_modules 存放在 Docker 卷上卷创建时属主为 root脚本先用sudo chown mesop-dev:mesop-dev node_modules使其可写更新第三方 Python 依赖bazel run //build_defs:pip_requirements.update按 build_defs/requirements.txt / requirements_lock.txt 同步依赖创建虚拟环境bazel run //mesop/cli:cli.venv生成.cli.venv虚拟环境供 VS Code 与终端使用这也是下一步选择 Python 解释器的来源让 VS Code 识别第三方依赖在 venv 中pip install -r build_defs/requirements_lock.txt让 VS Code 识别 proto 生成的 Python 模块执行 scripts/setup_proto_py_modules.sh该脚本通过bazel info bazel-bin找到 Bazel 输出目录并为其下mesop/、mesop/protos/、mesop/components/等目录补建__init__.py使 Pylance 能够对生成的 proto 桩代码做类型检查安装 Git pre-commit 钩子安装pre-commit3.7.1并执行pre-commit install安装 Playwrightyarn playwright install下载浏览器二进制供端到端测试使用。你可以随时查看该脚本的实时输出按Cmd/Ctrl Shift P打开命令面板选择View Creation Log即可查看创建日志从日志中可以看到 Bazel 拉取依赖、编译 proto、安装 Playwright 等耗时步骤这也解释了免费额度下 2030 分钟的总耗时来源。第三步为 Codespace 设置 Python 环境在执行postCreateCommand的过程中VS Code 会弹出提示询问是否为该 Codespace 设置新的 Python 解释器此时应选择Yes以便使用脚本创建的.cli.venv虚拟环境。选择后VS Code 的 Python 插件Pylance才能正确解析第三方依赖与 Bazel 生成的 proto 桩代码从而提供类型检查、补全等 IDE 能力。第四步启动 Mesop 开发服务器当postCreateCommand执行完毕即可在终端启动 Mesop./scripts/cli.shscripts/cli.sh 是开发专用入口其实现为# Uses editor_cli which provides a faster development cycle than the regular cli target. (lsof -t -i:32123 | xargs kill) || true \ ibazel run //mesop/cli:editor_cli -- --pathmesop/mesop/example_index.py --reload_demo_modules逐行解读先用lsof -t -i:32123找到占用 32123 端口的旧进程并杀掉首次运行时该命令失败也不影响|| true保证继续执行再通过ibazel run运行//mesop/cli:editor_cli这个 Bazel 目标并传入--pathmesop/mesop/example_index.py --reload_demo_modules。其中editor_cli是 mesop/cli/BUILD 中定义的py_binary目标它加载了//mesop/web/src/app/editor:web_package编辑器前端产物并带有ibazel_notify_changes标签使 ibazel 在源码变更时自动触发增量构建——这就是“比常规 cli 目标更快的开发循环”的底层机制。注释中还提到路径必须是mesop/下的最低公共祖先因为 mesop/example_index.py 需要同时加载mesop.examples与各组件的 e2e 模块热重载hot reload才能正常工作。首次运行./scripts/cli.sh需要较长时间因为 ibazel 需要完成前端的首次编译。启动过程中终端会打印一些 warning 消息文档明确说明这些警告可以安全忽略包括截图所示的提示信息也无需处理从 mesop/cli/cli.py 的源码结构看CLI 会通过configure_flask_app配置 Flask 应用调用log_startup输出启动日志最终执行flask_app.run(hostget_public_host(), portport(), use_reloaderFalse)启动服务器其中port()来自 mesop/server/flags.py 的 flag 定义默认 32123get_public_host来自 mesop/utils/host_util.py用于在容器/云环境中正确暴露主机地址。第五步通过 PORTS 面板查看 Mesop demos开发服务器启动成功后你可以在 VS Code 的PORTS面板中看到 32123 端口点击“Open in Browser”即可在浏览器中打开 Mesop 应用由于启动时传入了--pathmesop/mesop/example_index.py打开的页面会加载 mesop/example_index.py 中注册的全部示例包括mesop.examples下的大量示例应用以及 text、box、checkbox、markdown、input、tooltip、badge、divider、icon、progress_bar、progress_spinner、slide_toggle、radio、select、slider、image、audio、video、sidenav、table、embed、uploader、html、link、autocomplete、datepicker、date_range_picker、button_toggle、expansion_panel、card 等组件的 e2e 页面。借助 ibazel 的热重载你可以一边修改demo/下的源码一边在浏览器中实时观察效果。常见问题与排查建议等待时间过长免费额度下构建需要 2030 分钟期间请持续观察View Creation Log确认脚本推进到哪个步骤忘记选择 Python 解释器可在 VS Code 命令面板中执行Python: Select Interpreter手动选择.cli.venv端口无法访问确认./scripts/cli.sh已完全启动ibazel 首次编译需要时间并在 PORTS 面板中确认 32123 端口状态为 ForwardedVS Code 无法识别依赖确认 scripts/devcontainer_setup.sh 已完整执行pip install -r build_defs/requirements_lock.txt与 scripts/setup_proto_py_modules.sh 两步缺一不可。小结借助 GitHub Codespaces 与仓库自带的 .devcontainer/devcontainer.json、scripts/devcontainer_setup.sh 与 Dockerfile开发者可以在数十分钟内获得一套完整可用的 Mesop 内部开发环境Bazel 构建链、Angular 前端、Python 虚拟环境、proto 类型桩与 Playwright 测试工具一应俱全。之后只需运行./scripts/cli.sh启动 editor CLI即可在浏览器中浏览全部 demo 并利用热重载快速验证补丁将精力聚焦在功能开发本身。【免费下载链接】mesopRapidly build AI apps in Python项目地址: https://gitcode.com/GitHub_Trending/me/mesop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考