{"schema_version":1,"id":"article:ai-pm-deploy-mvp","kind":"article","slug":"ai-pm-deploy-mvp","title":"入门AI PM——实践篇：AI应用部署上线，选择最快路径，避开那些不必要的坑","author":"晨旭","url":"https://chenxu.xin/writing/ai-pm-deploy-mvp","date":"2025-09-06","updated":"2025-09-06","description":"从本地跑通的玩具到任何人都能访问的云端产品，中间这一公里怎么走：前后端与 Dify 的架构分工、最快 MVP 上线路径，以及传统部署路径的四条避坑经验。","position":null,"group":null,"series":"入门系列文章","tags":["ai-pm","hands-on"],"publication_status":"public","maturity":"evergreen","body_sha256":"8965be4ceccd85df6bd65c5cb3220b11ae98ec28048becbd3d804f3fb6396f0f","paragraph_rule":"src/lib/paragraphs.mjs@1","paragraphs":[{"id":"p1","kind":"paragraph","text":"在上一篇《实践篇》中，我分享了如何从零开始，用「Vibe Coding」的方式搭建我的第一个 AI 应用——PRD For AI。当我在自己电脑上看着应用跑起来的那一刻，这种兴奋感是难以言喻的。","raw":"在上一篇《实践篇》中，我分享了如何从零开始，用「Vibe Coding」的方式搭建我的第一个 AI 应用——PRD For AI。当我在自己电脑上看着应用跑起来的那一刻，这种兴奋感是难以言喻的。"},{"id":"p2","kind":"paragraph","text":"但这时它还只是一个活跃在我本地电脑上的一个小玩具。我想让朋友们体验，想把它真正发布出去，这又该怎么做呢？从一个本地运行的「玩具」，到一个任何人都可以通过链接访问的「云端产品」，这中间的距离，就是部署上线。","raw":"但这时它还只是一个活跃在我本地电脑上的一个小玩具。我想让朋友们体验，想把它真正发布出去，这又该怎么做呢？从一个本地运行的「玩具」，到一个任何人都可以通过链接访问的「云端产品」，这中间的距离，就是部署上线。"},{"id":"p3","kind":"paragraph","text":"这最后的一公里路，看似简单，却布满了各种意想不到的「坑」。这篇文章，就是我踩坑之后，总结出的「AI 产品上线避坑地图」。希望能为你撑一把伞，让你在落地 AI 产品的路上，走得更快、更稳。","raw":"这最后的一公里路，看似简单，却布满了各种意想不到的「坑」。这篇文章，就是我踩坑之后，总结出的「AI 产品上线避坑地图」。希望能为你撑一把伞，让你在落地 AI 产品的路上，走得更快、更稳。"},{"id":"p4","kind":"heading","text":"理清架构蓝图","raw":"## 理清架构蓝图"},{"id":"p5","kind":"paragraph","text":"动手部署前，我们必须再次理清前端、后端、数据库和我们 AI「大脑」（Dify）之间的关系。","raw":"动手部署前，我们必须再次理清前端、后端、数据库和我们 AI「大脑」（Dify）之间的关系。"},{"id":"p6","kind":"paragraph","text":"（1）前端：负责用户界面和用户体验","raw":"**（1）前端：负责用户界面和用户体验**"},{"id":"p7","kind":"list","text":"- 展示所有用户能看到和交互的界面。\n- 捕捉用户的交互，把用户的指令清晰地发给后端。\n- 接受后端返回的数据，渲染成友好的格式。","raw":"- 展示所有用户能看到和交互的界面。\n- 捕捉用户的交互，把用户的指令清晰地发给后端。\n- 接受后端返回的数据，渲染成友好的格式。"},{"id":"p8","kind":"paragraph","text":"重点：前端不应直接调用 Dify 的 API，所有 API 密钥必须放在后端。","raw":"重点：前端不应直接调用 Dify 的 API，所有 API 密钥必须放在后端。"},{"id":"p9","kind":"paragraph","text":"（2）后端：业务逻辑核心和安全网关","raw":"**（2）后端：业务逻辑核心和安全网关**"},{"id":"p10","kind":"list","text":"- 处理业务逻辑：实现注册、登录、权限管理、数据处理等非 AI 核心功能。\n- 充当「桥梁」：接收来自前端的请求，代表前端去调用 Dify 的 API。\n- API 安全：安全地存储和管理各种 API 密钥。\n- 与数据库交互：负责所有对数据库的读写操作。","raw":"- **处理业务逻辑**：实现注册、登录、权限管理、数据处理等非 AI 核心功能。\n- **充当「桥梁」**：接收来自前端的请求，代表前端去调用 Dify 的 API。\n- **API 安全**：安全地存储和管理各种 API 密钥。\n- **与数据库交互**：负责所有对数据库的读写操作。"},{"id":"p11","kind":"paragraph","text":"后端就是整个项目运行的工程支柱，负责系统的稳定性和可靠性。","raw":"后端就是整个项目运行的工程支柱，负责系统的稳定性和可靠性。"},{"id":"p12","kind":"paragraph","text":"（3）数据库：数据持久化存储中心","raw":"**（3）数据库：数据持久化存储中心**"},{"id":"p13","kind":"paragraph","text":"负责持久化存储所有关键信息，比如用户信息、对话历史等。","raw":"负责持久化存储所有关键信息，比如用户信息、对话历史等。"},{"id":"p14","kind":"paragraph","text":"（4）Dify：AI 工作流引擎","raw":"**（4）Dify：AI 工作流引擎**"},{"id":"p15","kind":"paragraph","text":"通过 Prompt 工程、RAG、工具调用等方式（上下文工程），精心编排出 AI 的核心工作流，并将其打包成一个标准的 API，供后端调用。","raw":"通过 Prompt 工程、RAG、工具调用等方式（上下文工程），精心编排出 AI 的核心工作流，并将其打包成一个标准的 API，供后端调用。"},{"id":"p16","kind":"paragraph","text":"理解了这张蓝图，下面就让我们来揭晓这个最快 MVP 上线路径。","raw":"理解了这张蓝图，下面就让我们来揭晓这个最快 MVP 上线路径。"},{"id":"p17","kind":"heading","text":"最快 MVP 上线路径","raw":"## 最快 MVP 上线路径"},{"id":"p18","kind":"paragraph","text":"在 AI 时代，最宝贵的资源是时间和认知。对于 AI PM，快速验证想法、获得用户反馈，形成产品闭环，比追求一个完美的架构重要得多。","raw":"在 AI 时代，最宝贵的资源是时间和认知。对于 AI PM，快速验证想法、获得用户反馈，形成产品闭环，比追求一个完美的架构重要得多。"},{"id":"p19","kind":"paragraph","text":"下面通过我的「血泪史」和与训练营其他同学的交流，总结出了一个最快 MVP 上线路径：","raw":"下面通过我的「血泪史」和与训练营其他同学的交流，总结出了一个最快 MVP 上线路径："},{"id":"p20","kind":"code","text":"Dify 搭建工作流\n  -> Lovable 生成前端页面（产品官网 + 对话页面 + 登录页面）\n  -> 直接使用 Supabase 作为后端\n  -> 连通 Dify 和前端","raw":"```text\nDify 搭建工作流\n  -> Lovable 生成前端页面（产品官网 + 对话页面 + 登录页面）\n  -> 直接使用 Supabase 作为后端\n  -> 连通 Dify 和前端\n```"},{"id":"p21","kind":"paragraph","text":"这样数据流会变得更加精简：","raw":"这样数据流会变得更加精简："},{"id":"p22","kind":"code","text":"用户（前端） <=> Supabase（认证、Edge Function、数据库） <=> Dify","raw":"```text\n用户（前端） <=> Supabase（认证、Edge Function、数据库） <=> Dify\n```"},{"id":"p23","kind":"list","text":"- 前端：Lovable 分配地址，无需自己部署。\n- 后端和数据库：无需额外部署，一并托管在 Supabase。\n- 自带用户系统：注册、登录、第三方授权，Supabase 都内置好了。","raw":"- **前端**：Lovable 分配地址，无需自己部署。\n- **后端和数据库**：无需额外部署，一并托管在 Supabase。\n- **自带用户系统**：注册、登录、第三方授权，Supabase 都内置好了。"},{"id":"p24","kind":"paragraph","text":"这是一条「小步快跑，快速迭代」的精益产品路线，可以用极低的时间成本，将想法变为现实，去市场上获取最真实的反馈。这不仅是 AI 产品经理的必备技能，也是传统互联网产品经理应有的能力。","raw":"这是一条「小步快跑，快速迭代」的精益产品路线，可以用极低的时间成本，将想法变为现实，去市场上获取最真实的反馈。这不仅是 AI 产品经理的必备技能，也是传统互联网产品经理应有的能力。"},{"id":"p25","kind":"paragraph","text":"一个 MVP 至少要包含：产品官网，讲清产品用途，用于后续宣传和招募内测用户；登录页面，记录用户数据，方便后台查看和邮件联系内测用户、获得反馈。麻雀虽小，五脏俱全。","raw":"一个 MVP 至少要包含：**产品官网**，讲清产品用途，用于后续宣传和招募内测用户；**登录页面**，记录用户数据，方便后台查看和邮件联系内测用户、获得反馈。麻雀虽小，五脏俱全。"},{"id":"p26","kind":"heading","text":"传统部署路径避坑 tips","raw":"## 传统部署路径避坑 tips"},{"id":"p27","kind":"paragraph","text":"适用场景：","raw":"适用场景："},{"id":"p28","kind":"list","text":"- 产品通过了 MVP 验证，准备长期运营，需要更强的定制性和扩展性。\n- 希望深入理解软件工程的全貌，为未来管理更复杂的项目打下基础。","raw":"- 产品通过了 MVP 验证，准备长期运营，需要更强的定制性和扩展性。\n- 希望深入理解软件工程的全貌，为未来管理更复杂的项目打下基础。"},{"id":"p29","kind":"paragraph","text":"根据我的踩坑经验，以及和研发同学的交流，提供了以下几个建议，希望帮助你少走弯路。","raw":"根据我的踩坑经验，以及和研发同学的交流，提供了以下几个建议，希望帮助你少走弯路。"},{"id":"p30","kind":"heading","text":"1. 前后端文件分离","raw":"### 1. 前后端文件分离"},{"id":"p31","kind":"paragraph","text":"前端页面写好之后，转到 Claude Code / Cursor 进行本地开发。在写后端之前你就告诉它，把前端和后端的代码放在两个独立的文件夹里，项目架构类似：","raw":"前端页面写好之后，转到 Claude Code / Cursor 进行本地开发。在写后端之前你就告诉它，把前端和后端的代码放在两个独立的文件夹里，项目架构类似："},{"id":"p32","kind":"code","text":"your_project_name/\n├── frontend/                 # 前端项目\n│   ├── src/\n│   ├── public/\n│   ├── package.json\n│   ├── vite.config.ts\n│   ├── tailwind.config.ts\n│   └── README.md\n├── backend/                  # 后端项目\n│   ├── main.py\n│   ├── db_mysql.py\n│   ├── auth.py\n│   ├── requirements.txt\n│   ├── start.py\n│   ├── .env\n│   └── README.md\n└── README.md                 # 总项目说明","raw":"```text\nyour_project_name/\n├── frontend/                 # 前端项目\n│   ├── src/\n│   ├── public/\n│   ├── package.json\n│   ├── vite.config.ts\n│   ├── tailwind.config.ts\n│   └── README.md\n├── backend/                  # 后端项目\n│   ├── main.py\n│   ├── db_mysql.py\n│   ├── auth.py\n│   ├── requirements.txt\n│   ├── start.py\n│   ├── .env\n│   └── README.md\n└── README.md                 # 总项目说明\n```"},{"id":"p33","kind":"paragraph","text":"这不仅仅是为了整洁，更是为之后的部署减少难题。","raw":"这不仅仅是为了整洁，更是为之后的部署减少难题。"},{"id":"p34","kind":"heading","text":"2. 优先使用 Supabase","raw":"### 2. 优先使用 Supabase"},{"id":"p35","kind":"paragraph","text":"传统的后端开发意味着你要自己处理用户认证、数据库配置、编写大量业务逻辑接口。而 Supabase 作为后端即服务（Backend-as-a-Service）平台，几乎帮你搞定了一切。","raw":"传统的后端开发意味着你要自己处理用户认证、数据库配置、编写大量业务逻辑接口。而 Supabase 作为后端即服务（Backend-as-a-Service）平台，几乎帮你搞定了一切。"},{"id":"p36","kind":"paragraph","text":"一开始就可以告诉 Claude Code / Cursor 使用 Supabase 进行本地开发，基本 80% 的后端服务都能实现。确实无法实现的，再让它帮助写自定义后端代码，然后再单独部署自定义后端。","raw":"一开始就可以告诉 Claude Code / Cursor 使用 Supabase 进行本地开发，基本 80% 的后端服务都能实现。确实无法实现的，再让它帮助写自定义后端代码，然后再单独部署自定义后端。"},{"id":"p37","kind":"heading","text":"3. 本地先行，云端同步","raw":"### 3. 本地先行，云端同步"},{"id":"p38","kind":"paragraph","text":"在把任何东西部署到云端之前，确保它在你的本地电脑上能完美运行。尤其是数据库。先在本地完成所有数据表结构的设计、字段的增删改逻辑等，因为在本地，Cursor 可以很方便地帮你生成代码、连接、测试。当本地数据模型稳定后，再推送云端，将本地的结构迁移上去。一旦上了云，调试的难度和成本会直线上升。","raw":"在把任何东西部署到云端之前，确保它在你的本地电脑上能完美运行。尤其是数据库。先在本地完成所有数据表结构的设计、字段的增删改逻辑等，因为在本地，Cursor 可以很方便地帮你生成代码、连接、测试。当本地数据模型稳定后，再推送云端，将本地的结构迁移上去。一旦上了云，调试的难度和成本会直线上升。"},{"id":"p39","kind":"heading","text":"4. 一定要使用 git，它是唯一后悔药","raw":"### 4. 一定要使用 git，它是唯一后悔药"},{"id":"p40","kind":"paragraph","text":"在写下第一行代码之前，就要初始化 git，提交 GitHub 仓库，并定时提交修改，保存为固定版本。它是代码的安全网，让你敢于尝试、敢于犯错，因为你永远可以回到上一个正常的版本。","raw":"在写下第一行代码之前，就要初始化 git，提交 GitHub 仓库，并定时提交修改，保存为固定版本。它是代码的安全网，让你敢于尝试、敢于犯错，因为你永远可以回到上一个正常的版本。"},{"id":"p41","kind":"heading","text":"AI PM 的新工作范式","raw":"## AI PM 的新工作范式"},{"id":"p42","kind":"paragraph","text":"对于 AI PM，亲手将一个 AI 产品从 0 到 1 上线，带给你的远不止是技术上的成就感，更是一种全新的产品思维范式——「两周 MVP 冲刺」。","raw":"对于 AI PM，亲手将一个 AI 产品从 0 到 1 上线，带给你的远不止是技术上的成就感，更是一种全新的产品思维范式——「两周 MVP 冲刺」。"},{"id":"p43","kind":"code","text":"有一个产品想法\n  -> 马上搭建 Dify 工作流（大脑）\n  -> 用 Vibe Coding 快速搭建前后端（身体）\n  -> 连通 API（神经）\n  -> 形成一个可用的产品 MVP","raw":"```text\n有一个产品想法\n  -> 马上搭建 Dify 工作流（大脑）\n  -> 用 Vibe Coding 快速搭建前后端（身体）\n  -> 连通 API（神经）\n  -> 形成一个可用的产品 MVP\n```"},{"id":"p44","kind":"paragraph","text":"拿着这个 MVP，你就可以立刻去招募内测用户，获得最真实的用户反馈，来验证和迭代你的产品想法。这大大缩短了从「想法」到「价值验证」的周期，让你能够高效训练自己的 AI 战略素养。","raw":"拿着这个 MVP，你就可以立刻去招募内测用户，获得最真实的用户反馈，来验证和迭代你的产品想法。这大大缩短了从「想法」到「价值验证」的周期，让你能够高效训练自己的 AI 战略素养。"},{"id":"p45","kind":"paragraph","text":"一旦产品被验证可行，研发团队就可以介入进行专业开发。而你，作为 AI PM，则可以回归评测，聚焦于优化产品的「大脑」——Prompt、RAG、工具使用等，真正形成「开发-评测-迭代」的飞轮。","raw":"一旦产品被验证可行，研发团队就可以介入进行专业开发。而你，作为 AI PM，则可以回归评测，聚焦于优化产品的「大脑」——Prompt、RAG、工具使用等，真正形成「开发-评测-迭代」的飞轮。"},{"id":"p46","kind":"heading","text":"结尾","raw":"## 结尾"},{"id":"p47","kind":"paragraph","text":"未来，我会在「入门系列文章」中继续探讨战略素养篇和基础知识篇。成为 AI PM，终究还是要回归对市场、用户和 AI 本身的深刻理解。","raw":"未来，我会在「入门系列文章」中继续探讨战略素养篇和基础知识篇。成为 AI PM，终究还是要回归对市场、用户和 AI 本身的深刻理解。"},{"id":"p48","kind":"paragraph","text":"而我的那个小应用 PRD For AI 也在这个过程中不断进化。我希望它未来能帮你更好地规划你的产品蓝图（Product Roadmap），将你的想法，更结构化地变成一个可执行的应用搭建流程。","raw":"而我的那个小应用 PRD For AI 也在这个过程中不断进化。我希望它未来能帮你更好地规划你的产品蓝图（Product Roadmap），将你的想法，更结构化地变成一个可执行的应用搭建流程。"},{"id":"p49","kind":"paragraph","text":"最后，我想说，在写这篇文章的过程中，我才真正理解张老师让我们亲手上线一个 AI 产品的深意。","raw":"最后，我想说，在写这篇文章的过程中，我才真正理解张老师让我们亲手上线一个 AI 产品的深意。"}],"authored_claims":[{"id":"frontend-must-not-call-dify-directly","text":"前端不应直接调用 Dify 的 API，所有 API 密钥必须放在后端。后端要同时充当业务逻辑核心和安全网关。","stance":"judgment","confidence":"high","supersedes":null,"note":null,"formed_at":"2025-09-06"},{"id":"fastest-mvp-path","text":"最快的 MVP 上线路径是 Dify 搭工作流、Lovable 生成前端、Supabase 直接做后端和数据库，前端和后端都不用自己部署。","stance":"judgment","confidence":null,"supersedes":null,"note":null,"formed_at":"2025-09-06"},{"id":"local-first-then-cloud","text":"任何东西部署到云端之前，先确保本地能完美运行，数据库尤其如此。一旦上了云，调试的难度和成本会直线上升。","stance":"judgment","confidence":"high","supersedes":null,"note":null,"formed_at":"2025-09-06"},{"id":"git-is-the-only-undo","text":"在写下第一行代码之前就要初始化 git。它是唯一的后悔药，让你敢于尝试和犯错，因为永远可以回到上一个正常版本。","stance":"judgment","confidence":null,"supersedes":null,"note":null,"formed_at":"2025-09-06"},{"id":"two-week-mvp-sprint","text":"快速验证想法、拿到用户反馈、形成产品闭环，比追求一个完美的架构重要得多。这就是 AI PM 的「两周 MVP 冲刺」范式。","stance":"judgment","confidence":null,"supersedes":null,"note":null,"formed_at":"2025-09-06"}],"claim_ids":["frontend-must-not-call-dify-directly","fastest-mvp-path","local-first-then-cloud","git-is-the-only-undo","two-week-mvp-sprint"],"revision":"00654ade9d65160988c56953525d4771f490ee3cf2f05919c50a5d16b9ccb646"}