Onlook 可视化编辑器部署实战：本地 5 分钟跑通，生产三步上线

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/onlook设计师改个圆角要等前端排期两天Onlook 想解决的就是这种来回折腾它是一个开源的可视化编辑器你在浏览器里拖元素、调样式React 代码自动同步生成。这篇文章带你把 Onlook 部署起来——先在本地跑通再放到服务器上给团队用最后顺手做点生产加固。 场景一本地 5 分钟跑通 Onlook动手前先用一句话了解它的结构前端、后端、数据库三块各管各的。前端是 Next.js TailwindCSS代码在 apps/web/client/后端由 Supabase 承担认证、数据库和存储配置见 apps/backend/supabase/config.toml。1. 装好前置工具四样东西装齐就能开工Git、Docker含 Docker Compose、Node.js v18、Bun 包管理器。2. 克隆仓库安装依赖git clone https://gitcode.com/GitHub_Trending/on/onlook cd onlook bun install第一条把代码拉下来第二条进目录最后用 Bun 一次装齐所有工作区的依赖不用逐个包手动装。3. 准备环境变量cp apps/web/client/.env.example apps/web/client/.env cp apps/backend/.env.example apps/backend/.env模板里已经列好要填的项重点是 Supabase 的连接信息和 API Key逐项抄进新生成的 .env 即可。4. 启动开发服务器bun run dev打开 http://localhost:3000 就能看到编辑器点一下画布上的元素对应代码位置立刻高亮改完代码预览实时刷新不用手动刷新页面。 场景二用 Docker Compose 把 Onlook 放到服务器自己玩没问题给别人用建议容器化。根目录的 docker-compose.yml 只定义了一个 web-client 服务几个关键设置对外监听 3000 端口、host 网络模式让容器间通信更简单、unless-stopped 策略保证容器挂了自动拉起。按顺序敲这三条docker compose build # 构建镜像 docker compose up -d # 后台启动 docker compose ps # 确认容器在运行构建可能要几分钟等ps里状态变绿再访问 http://服务器IP:3000。上线后顺手验证三件事确认没装错在画布上拖一拖元素、改改文字样式预览应即时生效让 AI 按一句描述生成组件AI 相关逻辑都在 packages/ai/出问题往这个方向查导出一次项目代码产出走的是 packages/file-system/ 里的文件规范。️ 场景三生产环境三步加固正式给团队用之前花十分钟把这三件事做了管好密钥Supabase 的 URL、各类 API Key 只写在服务器上的 .env 里别提交进仓库企业级配置建议参考 enterprise.mdx。上 HTTPS前面挂一层 Nginx 反代终结 SSL3000 端口交给代理不要直接暴露公网具体步骤见 自托管文档。核对数据库连接连接串由 SUPABASE_DATABASE_URL 决定默认逻辑在 packages/db/drizzle.config.ts把它指向你自己的 Supabase 或 PostgreSQL 实例。 出问题怎么办Onlook 部署常见故障排查部署卡住别慌绝大多数是这三类按顺序排查就行容器起不来、端口打不开先docker compose logs -f看实时日志十有八九是 .env 里 Supabase 相关项没填全。连不上数据库核对 apps/backend/supabase/config.toml 与 .env 里的连接参数本地开发时数据库默认在 127.0.0.1:54322。依赖或构建异常本地环境重新bun install一次Docker 场景直接bun run docker:restart它会重建镜像并重启。 想继续深入二次开发与常用资源跑起来只是开始。想读懂架构或参与开发开发者文档 里有完整资料前后端通信的接口层在 packages/rpc/。平时用git pull更新代码顺手看看 README.md 的更新说明就能跟上新功能和安全补丁遇到疑难杂症可以提交 issue也欢迎按社区流程贡献代码。【免费下载链接】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），仅供参考