Onlook 部署完整指南30 分钟把可视化编辑器跑上服务器【免费下载链接】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设计稿还原成前端代码要对齐半天设计师想改一个像素又得排队提需求。Onlook 解决的就是这个痛点它是一个开源的可视化编辑器让你在 Next.js TailwindCSS 项目里直接拖拽、改样式编辑实时生成代码。你只需 30 分钟就能完成一次完整的 Onlook 部署从本地跑通到上线服务器跟着走就行。先看清 Onlook 的三层分工一句话定位Onlook 是一个面向设计师的 AI 优先开源编辑器视觉改动与代码双向同步。前端Next.js TailwindCSS 的编辑器应用源码在 apps/web/client/沙箱项目代码跑在 Web 容器里编辑器通过 iFrame 加载预览并把 DOM 元素映射回代码位置数据层Supabase 提供认证、数据库和存储配置在 apps/backend/supabase/config.toml编辑一个元素时编辑器先改 iFrame 里的页面再同步改写容器中的代码AI 对话也共享同一份代码上下文。30 分钟跑通本地环境先看环境要求缺什么装什么工具版本要求用途Bun1.3monorepo 管理与脚本运行Node.jsv20.16.0避开 v20.11.0本地运行Docker Compose20.10 / 2.0跑 Supabase 后端Git任意新版拉取代码服务器配置建议 4 核、8GB 内存16GB 更稳、50GB 磁盘。第 1 步拉代码并装依赖git clone https://gitcode.com/GitHub_Trending/on/onlook cd onlook bun install装完会看到根目录出现node_modules说明 monorepo 依赖就绪。第 2 步启动 Supabase 后端bun backend:start命令输出里会打印anon key和service role key先复制下来下一步要用。第 3 步交互式配置环境变量填入 Supabase 密钥、CodeSandbox 令牌、OpenRouter 的 AI 模型密钥bun run setup:env跑完后 apps/web/client/.env 会自动生成后面 Docker 部署也复用它。第 4 步初始化并填充测试数据bun db:push bun db:seeddb:push同步表结构db:seed写入测试用户和项目。第 5 步启动开发服务器bun dev浏览器打开 http://localhost:3000能看到登录页和项目列表本地就跑通了。用 Docker 把它送上服务器生产部署走单容器方案编排定义在 docker-compose.ymlweb-client服务暴露 3000 端口host网络模式失败自动重启。确认服务器上已有第 3 步生成的apps/web/client/.env这是容器的全部配置来源构建并启动docker compose build docker compose up -d docker compose psps里容器状态为Up (healthy)即构建内置健康检查已通过。浏览器访问http://服务器IP:3000验证页面正常上 HTTPS在前面挂一层 Nginx 反向代理并配置证书把 443 转发到 3000细节可参考 docs/content/docs/self-hosting/敏感信息只放在.env里不要写进镜像密钥定期轮换跑通后先验这 3 件事AI 生成页面新建项目用文字描述一个落地页看代码是否实时出现、预览是否同步渲染可视化改样式点击任意文本用工具栏改颜色、字号、布局改完刷新页面确认代码里真的变了效果如下元素与代码联动右键页面上任一元素右侧代码面板会跳到对应 JSX 位置确认 DOM 到代码的映射正常三项都通过说明沙箱、预览和代码索引链路全部打通。✅高频坑一次排完现象原因解法预览卡在加载不出页面CodeSandbox 容器在等确认切到 Preview 模式点 Yes, proceed to preview再切回来启动报Column not found数据库与 schema 不同步先跑bun db:push仍不行再bun db:reset会清空数据刷新后频繁掉登录Node 版本过旧尤其 v20.11.0升到 v20.16.0重装依赖并重启必要时清浏览器 cookies端口 3000 被占用其他服务占了端口停掉占用方或改 docker-compose.yml 里的端口映射docker compose build失败磁盘不足或镜像缓存损坏docker system prune后重新构建预览卡加载时的确认界面长这样更多细节见 docs/content/docs/developers/troubleshooting.mdx。进阶定制只给你指个入口换 AI 模型提供商在 packages/ai/src/chat/providers.ts 按已有格式加 provider再把对应密钥写进.env改沙箱注入脚本预加载脚本源码在 apps/web/preload/script/改完同步到项目的 public 目录即可生效扩展接口层tRPC 路由定义在 packages/rpc/src/trpc/新增能力从这里入手收尾资源与下一步官方文档docs/content/docs/部署细节在 self-hosting 目录开发指南与架构说明docs/content/docs/developers/参与社区CONTRIBUTING.md遇到问题可以提 issue 或提交 PR建议现在就执行第一步先在本机把bun dev跑起来验证 3 项核心功能再原样复制到服务器上做一次docker compose up -d你就有了一个团队共用的可视化开发环境。【免费下载链接】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），仅供参考