Onlook 可视化编辑器：本地到生产完整部署实战

Onlook 可视化编辑器本地到生产完整部署实战【免费下载链接】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 是一款开源的视觉优先代码编辑器让你在 Next.js TailwindCSS 项目里用 Figma 式界面直接拖拽、调样式改动实时同步回代码还能用 AI 对话生成页面。本文带你走完环境准备、最小化本地部署到 Docker 生产上线的完整流程。 技术栈速览组件名职责对应路径Next.js Tailwind前端框架与样式apps/web/client/tRPC服务端类型安全接口packages/rpc/Supabase认证、数据库、存储apps/backend/supabase/DrizzleORM 与迁移packages/db/AI SDK OpenRouterAI 对话与代码应用packages/ai/CodeSandbox开发沙箱容器packages/code-provider/Bun Docker运行时、包管理与容器化docker-compose.yml 前置准备与依赖安装按清单核对环境缺失项先补齐操作系统Linux / macOS / WindowsWSL2Bun包管理器兼运行时推荐 1.3Node.jsv20.16.0避开 v20.11.0Git版本管理Docker 20.10 与 Docker Compose 2.0硬件4 核 CPU、8GB 内存建议 16GB、50GB 磁盘环境就绪后拉代码装依赖git clone https://gitcode.com/GitHub_Trending/on/onlook.git cd onlook bun install # 安装 monorepo 全部依赖 最小化部署路径三步跑通最小部署先跑通再深入。配置环境变量bun run setup:env # 交互式写入 .envSupabase/OpenRouter/CodeSandbox 密钥密钥取自supabase start输出与 OpenRouter、CodeSandbox 控制台手动填写见 appendix.mdx。启动服务bun backend:start # 启动本地 SupabaseDB/认证/存储 bun db:push # 推送数据库 schema bun db:seed # 写入测试用户与项目 bun dev # 启动开发服务器访问验证curl http://localhost:3000 # 返回 HTML 即主应用就绪服务启动后浏览器打开 http://localhost:3000Supabase 控制台在 http://localhost:54323。 容器化生产部署docker-compose.yml 只编排一个web-client服务生产级 Next.js 构建映射3000:3000端口。这里用network_mode: host网络模式因为容器要直连宿主机上的 Supabase127.0.0.1:54321host 模式省去端口转发restart: unless-stopped保证崩溃后自动拉起。docker compose build # 构建镜像 docker compose up -d # 后台启动 docker compose ps # 查看运行状态部署完成后访问http://服务器IP:3000验证生产实例。⚙️ 生产调优三板斧性能开启 standalone 构建next.config.ts 设STANDALONE_BUILDnext.config.tsNginx 反向代理加速缓存重定向在 vercel.json连接串集中在 drizzle.config.ts 的SUPABASE_DATABASE_URL安全密钥只放.env加密管理模板见 appendix.mdx跨域拦截改 proxy.ts 边缘逻辑Nginx 挂 SSL 证书启用 HTTPS可观测性容器日志跟踪docker compose logs -f单机用 PM2 守护自动重启single-machine.mdx健康检查由 compose 内置异常看docker compose ps 部署验证与排错指南按序验证核心功能可视化编辑拖拽元素调 Tailwind 样式画布即时刷新AI 生成代码聊天把描述转组件确认改动落盘项目导出导出代码结构符合 fs.ts 规范认证登录Supabase 邮箱登录/注册正常沙箱预览新建项目能在 iFrame 中实时运行高频坑点按「现象 → 排查方向 → 关键文件」定位端口 3000 被占用 → 停占用服务或改端口 → docker-compose.yml容器连不上 Supabase → 确认backend:start已运行且 host 模式生效 → config.toml镜像构建失败 → 执行docker system prune清缓存后重试 → Dockerfile 二次开发指引扩展入口点到即止教程展开见文档AI 供应商扩展在 providers.ts 按现有格式加 provider沙箱提供方code-provider/插件与 RPC 接口packages/rpc/src/trpc/完整开发文档docs/content/docs/developers/ 附录关键路径索引官方文档docs/content/docs/架构文档architecture.mdx本地运行running-locally.mdx故障排查troubleshooting.mdx自托管总览index.mdx贡献指南CONTRIBUTING.mdAPI 参考packages/rpc/src/trpc/【免费下载链接】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），仅供参考