企业官网建设流程全解析

Onlook 可视化编辑器快速落地：3 条路径跑通你的 React 设计-代码同步环境

【免费下载链接】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 应用，改动同步回真实代码，还带 AI 生成。按下面这份清单操作，你今天就能在自己机器上跑起一套可用的环境。

先看这张图，搞懂它怎么转起来

四件事记住就够了：

• 你创建的项目代码跑在 Web 容器里，由容器负责运行并吐出一个预览地址；
• 编辑器把这个地址装进 iFrame（在页面里嵌一个小窗口的技术）里展示，你在里面点选、拖拽；
• 系统给代码打了"桩"，把 iFrame 里的每个 DOM 元素映射回源码位置——所以你在画面上改字，改的是代码；
• AI 对话同样能读写代码，它不是只出建议，而是直接落刀。

三条路径，先选再动手

三条路径都跑在 docker-compose.yml 和根目录 package.json 定义的脚本上，差别只在最后一步怎么起服务。

路径一：本地开发环境 5 步起全栈

🔧 准备清单：装好 Bun、Node（v20.16.0+，别用 v20.11.0）和 Docker；准备好 CodeSandbox、OpenRouter 两把密钥，再加 Morph 或 Relace 其中一把用于 AI 应用代码。

git clone https://gitcode.com/GitHub_Trending/on/onlook.git cd onlook && bun install

bun run setup:env # 交互式写环境变量，生成 apps/web/client/.env bun backend:start # 用 Docker 起本地 Supabase：认证+数据库+存储 bun db:push # 推送数据库表结构 bun db:seed # 灌入测试用户和项目 bun dev # 启动开发服务器

📸 跑起来后的样子：浏览器打开http://localhost:3000，就是这个界面——左侧画布、右侧代码实时联动。

一个小坑先说在前面：iFrame 里如果停在 CodeSandbox 的确认页，切到预览模式点一下"proceed to preview"再切回来即可，文档见 troubleshooting.mdx。

路径二：容器化部署最小配置

📦 前置：一台 4 核+、8GB+ 内存、50GB+ 磁盘的机器，Docker 20.10+。

bun install && bun run setup:env bun backend:start && bun db:push docker compose up -d --build

docker-compose.yml里只定义了一个web-client服务：镜像由根 Dockerfile 构建，内部执行 Next.js standalone 构建；network_mode: host让容器直接复用宿主机网络，去连bun backend:start拉起来的本地 Supabase（API 在 127.0.0.1:54321）。镜像自带健康检查，挂了自动拉起重试，restart: unless-stopped兜底。验证方式：docker compose ps看状态，curl http://localhost:3000应返回页面。

路径三：单台服务器的生产构建

🚀 步骤与路径二几乎一致，只是最后不走容器：

bun run build # 产出 standalone 版本 bun .next/standalone/apps/web/client/server.js # 启动生产服务器 pm2 start .next/standalone/apps/web/client/server.js --name onlook

用 PM2 托管可以白拿开机自启和崩溃重启，配置方法参考 single-machine.mdx。这条路径资源开销最小，适合不想引入容器编排的中小团队。

上线前必做的三件事

1. 密钥出本地副本：不要直接改仓库文件。setup:env生成的apps/web/client/.env是本地副本，上线前把它里的 Supabase 连接信息和三把 API 密钥替换为生产值，密钥托管交给系统环境变量或 secret 管理工具。
2. 套上 HTTPS 和反向代理：在 Nginx 这类反向代理层配 SSL 证书并缓存静态资源，浏览器端跨域与鉴权行为见 next.config.ts，路由与构建优化都以它为准。
3. 可维护性兜底：给进程加守护（PM2 或容器重启策略），给 Supabase 的 PostgreSQL 配每日备份——db:reset会清库，没有备份等于裸奔。

验收与排障

✅ 两条核心自查，过不了别往下走：

• 在画布里双击一段文字改内容，右侧代码区对应位置应立即出现同样的改动（可视化编辑-代码同步）；
• 在 AI 对话里输入"生成一个定价页"，新组件出现在预览中且导出代码可被编辑器识别。

| 刷新页面后登录态丢失 | Node 版本过旧（v20.11.0 有已知问题） | 升级到 v20.16.0+，重装依赖并清浏览器 Cookie | | 构建内存不足报错 | 构建期内存超限 | 设置NODE_OPTIONS=--max-old-space-size=4096后重试 |

跑通之后往哪走

下一步值得花时间的是模板化项目创建（把常用页面沉淀成模板）和读一遍 架构文档——理解元素映射机制后，你改编辑器会快很多。

• self-hosting 部署文档
• 贡献指南 CONTRIBUTING.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