如何在单台服务器上部署 Onlook 独立构建并用 PM2 托管进程【免费下载链接】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本文的目标是在一台虚拟机或物理服务器上用 standalone 独立构建部署 Onlook一个 AI 优先的 React 可视化设计工具不使用 Docker最后用 PM2 托管独立构建生成的 Node.js 服务器进程实现开机自启。该方式面向 5–20 人的小团队、希望避开容器复杂性的单机生产环境。部署前提服务器系统与软件要求单机构建方式对服务器的要求如下来自 单机构建部署文档4 核以上 CPU8GB 以上内存推荐 16GB50GB 以上可用磁盘空间软件方面需要安装三个组件Bun包管理器兼运行时仓库声明bun1.3.1Node.js v20.16.0 或更高版本文档明确要求避开 v20.11.0Git克隆仓库并安装依赖git clone https://github.com/onlook-dev/onlook.git cd onlook # 安装依赖 bun install配置环境变量在仓库根目录运行交互式环境配置脚本bun run setup:env文档列出三项必需配置Supabase生产数据库 URL 与 API 密钥OpenRouter API Key用于 AI 对话功能CodeSandbox Token用于开发容器如果交互式脚本运行遇到问题按 附录文档 手动配置在apps/web/client下复制.env.example为.env填入NEXT_PUBLIC_SUPABASE_URL、NEXT_PUBLIC_SUPABASE_ANON_KEY、SUPABASE_DATABASE_URL、SUPABASE_SERVICE_ROLE_KEY、OPENROUTER_API_KEY、CSB_API_KEY并在packages/db下同样从.env.example复制出.env填入SUPABASE_DATABASE_URL、SUPABASE_URL和 service role key。这些值来自下一步bun backend:start的输出。启动后端服务并初始化数据库在仓库根目录启动本地 Supabase包含 PostgreSQL、认证和存储服务bun backend:start启动后服务可用地址为Supabase APIhttp://127.0.0.1:54321PostgreSQLhttp://127.0.0.1:54322Supabase Dashboardhttp://127.0.0.1:54323后端就绪后推送数据库 schemabun db:push构建 standalone 生产版本standalone 构建脚本定义在 apps/web/client/package.json 中需要在该目录下执行。构建过程会执行STANDALONE_BUILDtrue next build随后把public/和.next/static复制到 standalone 输出目录生成一个自包含的生产构建独立 Node.js 服务器、打包好的静态资源、面向生产环境的优化产物。cd apps/web/client bun run build:standalone注意bun run preview:standalone等价于build:standalone start:standalone即构建后会直接前台启动服务器不适合用于托管式部署。生产部署只执行构建启动交给下一步的 PM2。构建完成后确认产物存在ls -la .next/standalone/apps/web/client/目录中应有server.js及public、.next/static等内容说明 standalone 构建成功。用 PM2 托管 standalone 服务器文档推荐生产环境使用 PM2 做进程管理自动重启。安装并启动# 安装 PM2bun 全局安装方式文档给出的命令 bun add -g pm2 # 在 apps/web/client 目录下启动进程命名为 onlook pm2 start .next/standalone/apps/web/client/server.js --name onlook # 保存 PM2 配置 pm2 save # 设置开机自启 pm2 startuppm2 startup会输出一条需要以管理员权限执行的命令按其提示执行后 Onlook 才能随服务器启动自动拉起。文档同时给出了不用 PM2 的替代启动方式适合临时验证# 直接运行前台进程 bun .next/standalone/apps/web/client/server.js # 或使用 bun 脚本 bun run start:standalone验证部署结果应用默认监听 3000 端口Supabase Dashboard 在 54323。文档给出的验证方式# 检查主应用 curl http://localhost:3000 # 检查 Supabase API curl http://localhost:54321/rest/v1/再访问 http://localhost:3000 应能看到 Onlook 应用界面http://localhost:54323 是 Supabase Dashboard。排查部署中的常见问题以下问题与处理方式均来自 单机构建部署文档 的 Troubleshooting 部分端口冲突3000、54321、54322 任一被占用时在配置中修改对应端口。构建失败执行rm -rf node_modules bun install重装依赖后重试构建。该命令会删除项目内 node_modules 目录重装依赖后即可恢复执行前确认没有未保存的本地改动依赖。数据库连接异常确认bun backend:start已正常完成Supabase 服务在运行。standalone 服务器无法启动用ls -la .next/standalone/apps/web/client/确认构建是否完成产物是否齐全。内存问题通过NODE_OPTIONS--max-old-space-size4096提高 Node.js 内存上限。另外故障排查文档 提到如果出现 “Column not found” 错误说明数据库与 schema 不同步先重新执行bun db:push仍无效时可执行bun db:reset——该命令会清空数据库中全部数据并重新执行迁移务必确认可以丢弃数据后再运行。限制与下一步单机部署是单点故障扩容需要手动完成备份与恢复也需要自行处理适合成本敏感、追求简单部署路径的团队。如果需要更高可用性文档建议改用 Docker Compose 或 云部署 方案。文档同时建议为生产实例配置 Nginx/Apache 反向代理用于 SSL 和缓存并优先使用 SSD 存储以获得更好的 I/O 性能。【免费下载链接】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），仅供参考
如何在单台服务器上部署 Onlook 独立构建并用 PM2 托管进程？
如何在单台服务器上部署 Onlook 独立构建并用 PM2 托管进程【免费下载链接】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本文的目标是在一台虚拟机或物理服务器上用 standalone 独立构建部署 Onlook一个 AI 优先的 React 可视化设计工具不使用 Docker最后用 PM2 托管独立构建生成的 Node.js 服务器进程实现开机自启。该方式面向 5–20 人的小团队、希望避开容器复杂性的单机生产环境。部署前提服务器系统与软件要求单机构建方式对服务器的要求如下来自 单机构建部署文档4 核以上 CPU8GB 以上内存推荐 16GB50GB 以上可用磁盘空间软件方面需要安装三个组件Bun包管理器兼运行时仓库声明bun1.3.1Node.js v20.16.0 或更高版本文档明确要求避开 v20.11.0Git克隆仓库并安装依赖git clone https://github.com/onlook-dev/onlook.git cd onlook # 安装依赖 bun install配置环境变量在仓库根目录运行交互式环境配置脚本bun run setup:env文档列出三项必需配置Supabase生产数据库 URL 与 API 密钥OpenRouter API Key用于 AI 对话功能CodeSandbox Token用于开发容器如果交互式脚本运行遇到问题按 附录文档 手动配置在apps/web/client下复制.env.example为.env填入NEXT_PUBLIC_SUPABASE_URL、NEXT_PUBLIC_SUPABASE_ANON_KEY、SUPABASE_DATABASE_URL、SUPABASE_SERVICE_ROLE_KEY、OPENROUTER_API_KEY、CSB_API_KEY并在packages/db下同样从.env.example复制出.env填入SUPABASE_DATABASE_URL、SUPABASE_URL和 service role key。这些值来自下一步bun backend:start的输出。启动后端服务并初始化数据库在仓库根目录启动本地 Supabase包含 PostgreSQL、认证和存储服务bun backend:start启动后服务可用地址为Supabase APIhttp://127.0.0.1:54321PostgreSQLhttp://127.0.0.1:54322Supabase Dashboardhttp://127.0.0.1:54323后端就绪后推送数据库 schemabun db:push构建 standalone 生产版本standalone 构建脚本定义在 apps/web/client/package.json 中需要在该目录下执行。构建过程会执行STANDALONE_BUILDtrue next build随后把public/和.next/static复制到 standalone 输出目录生成一个自包含的生产构建独立 Node.js 服务器、打包好的静态资源、面向生产环境的优化产物。cd apps/web/client bun run build:standalone注意bun run preview:standalone等价于build:standalone start:standalone即构建后会直接前台启动服务器不适合用于托管式部署。生产部署只执行构建启动交给下一步的 PM2。构建完成后确认产物存在ls -la .next/standalone/apps/web/client/目录中应有server.js及public、.next/static等内容说明 standalone 构建成功。用 PM2 托管 standalone 服务器文档推荐生产环境使用 PM2 做进程管理自动重启。安装并启动# 安装 PM2bun 全局安装方式文档给出的命令 bun add -g pm2 # 在 apps/web/client 目录下启动进程命名为 onlook pm2 start .next/standalone/apps/web/client/server.js --name onlook # 保存 PM2 配置 pm2 save # 设置开机自启 pm2 startuppm2 startup会输出一条需要以管理员权限执行的命令按其提示执行后 Onlook 才能随服务器启动自动拉起。文档同时给出了不用 PM2 的替代启动方式适合临时验证# 直接运行前台进程 bun .next/standalone/apps/web/client/server.js # 或使用 bun 脚本 bun run start:standalone验证部署结果应用默认监听 3000 端口Supabase Dashboard 在 54323。文档给出的验证方式# 检查主应用 curl http://localhost:3000 # 检查 Supabase API curl http://localhost:54321/rest/v1/再访问 http://localhost:3000 应能看到 Onlook 应用界面http://localhost:54323 是 Supabase Dashboard。排查部署中的常见问题以下问题与处理方式均来自 单机构建部署文档 的 Troubleshooting 部分端口冲突3000、54321、54322 任一被占用时在配置中修改对应端口。构建失败执行rm -rf node_modules bun install重装依赖后重试构建。该命令会删除项目内 node_modules 目录重装依赖后即可恢复执行前确认没有未保存的本地改动依赖。数据库连接异常确认bun backend:start已正常完成Supabase 服务在运行。standalone 服务器无法启动用ls -la .next/standalone/apps/web/client/确认构建是否完成产物是否齐全。内存问题通过NODE_OPTIONS--max-old-space-size4096提高 Node.js 内存上限。另外故障排查文档 提到如果出现 “Column not found” 错误说明数据库与 schema 不同步先重新执行bun db:push仍无效时可执行bun db:reset——该命令会清空数据库中全部数据并重新执行迁移务必确认可以丢弃数据后再运行。限制与下一步单机部署是单点故障扩容需要手动完成备份与恢复也需要自行处理适合成本敏感、追求简单部署路径的团队。如果需要更高可用性文档建议改用 Docker Compose 或 云部署 方案。文档同时建议为生产实例配置 Nginx/Apache 反向代理用于 SSL 和缓存并优先使用 SSD 存储以获得更好的 I/O 性能。【免费下载链接】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），仅供参考