Onlook 可视化编辑器部署实战三条路线选对5 分钟跑起来附避坑清单【免费下载链接】onlookThe Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI项目地址: https://gitcode.com/GitHub_Trending/on/onlookOnlook 是一款开源的可视化编辑器让你像在 Figma 里画稿一样直接编辑 React 应用DOM 改动与代码实时同步。本文帮你按场景选对部署路线用最少的命令把它跑起来并给出上生产前的性能与安全清单一次部署不踩坑。三种部署路线怎么选先看结论再解释本地开发bun run dev适合想先体验功能、做二次开发的读者。热更新、调试方便但不适合长期挂服务器。容器化Docker Compose适合团队已用 Docker、需要环境隔离的测试/预发环境。根目录的 docker-compose.yml 已经配好一条命令拉起。单机生产standalone build适合 550 人团队直接上一台 VM。最省心也是官方推荐的起步方案。三种路线的完整对比见官方文档docs/content/docs/self-hosting/index.mdx。最快路径跑起来的最小步骤先装好三个前置工具Bun包管理器、Node 20.16、Docker容器化路线才需要。然后在仓库根目录执行git clone https://gitcode.com/GitHub_Trending/on/onlook.git cd onlook bun install bun run setup:envsetup:env会交互式生成前端.env文件填好 Supabase、OpenRouter 等密钥即可。之后开两个终端一个跑bun backend:start启动本地 Supabase数据库、认证、存储另一个跑bun run dev。浏览器访问 http://localhost:3000看到编辑界面就成功了 ✅关键配置逐项拆解环境变量改哪个文件只改 apps/web/client/.env.example 复制出来的.env就够启动必填的只有三组NEXT_PUBLIC_SUPABASE_URL... # 数据库与认证入口 OPENROUTER_API_KEY... # AI 对话能力 CSB_API_KEY... # 代码沙箱运行环境其余PostHog 埋点、Resend 邮件、Stripe 等留空不影响启动。如果要用 Google/GitHub 登录再填 apps/backend/.env.example 里的 OAuth 密钥。端口不通先查这三处docker-compose.yml端口映射3000:3000换端口只改这里。network_mode: host容器借此直连宿主机上的 Supabase127.0.0.1:54321别删。Dockerfile镜像内写死PORT3000并带健康检查改端口时这里要同步。数据库连接池等参数在 packages/db/drizzle.config.ts 里调整。上生产性能与安全清单 上线前逐条过一遍每条一两行就够缓存确认 Next.js 的静态资源缓存策略改 apps/web/client/next.config.ts。CDN在应用前挂一层 CDN 加速静态资源apps/web/client/vercel.json 可作为路由规则参考。数据库连接按团队规模调整连接池参数见 packages/db/drizzle.config.ts。HTTPS用 Nginx 或 Caddy 做反向代理并挂 SSL 证书别裸跑 3000 端口。跨域在反向代理层收紧访问控制策略应用侧入口在 apps/web/client/src/proxy.ts按需限制来源域名。密钥管理生产密钥不要明文写进.env提交到仓库用密钥管理工具注入。常见坑与快速应对⚠️ 按「症状 → 原因 → 解法」自查3000 端口被占用本机有其它服务在跑 → 停掉它或改 docker-compose.yml 的端口映射。容器连不上 Supabase默认网络隔离访问不到 127.0.0.1 → 保留network_mode: host并用curl http://127.0.0.1:54321验证 Supabase 已启动。AI 对话报错OPENROUTER_API_KEY缺失或无效 → 重新填 apps/web/client/.env.example 中对应项并重启容器。页面报数据库错误schema 没初始化 → 先bun backend:start再执行bun db:push推送表结构。完整排查项参考docs/content/docs/self-hosting/docker-compose.mdx。定制入口与资源清单想扩展功能从这两个入口下手AI 工具新增编辑能力加在 packages/ai/src/tools/每个工具一个类。RPC 接口前后端通信契约在 packages/rpc/src/加接口时客户端类型自动同步。资源清单官方文档docs/content/docs/本地开发指南docs/content/docs/developers/running-locally.mdx参与贡献规范CONTRIBUTING.md管理面板docs/content/docs/self-hosting/admin-dashboard.mdxOnlook 迭代很快建议定期拉取更新并留意 README.md 的更新日志第一时间拿到新功能和关键安全补丁。【免费下载链接】onlookThe Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI项目地址: https://gitcode.com/GitHub_Trending/on/onlook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考