VibeVibe 基础篇第 6 章实战：把个人主页与数字分身从本地项目变成公网可访问的真实作品

文档教程Vibe Coding示例工程【免费下载链接】vibe-vibeThe First Systematic Vibe Coding Open-Source Tutorial | From Zero to Full-Stack, Empowering Everyone to Build Products with AI | Live at: www.vibevibe.cn 首个系统化 Vibe Coding 开源教程 | 零基础到全栈实战让人人都能用 AI 开发产品 | 在线地址www.vibevibe.cn项目地址https://gitcode.com/datawhalechina/vibe-vibe点击查看免费下载这一章是 VibeVibe 基础篇围绕个人主页 数字分身连续案例的收束章节核心主题是完成从只在你电脑里存在的项目到别人也能访问、也会给你反馈的真实链接的完整上线闭环。读完本章你将掌握一条最小可用的发布路径本地项目进远程仓库、远程仓库连 EdgeOne Pages 部署平台、拿到公网链接后做真实环境自测、再收集第一轮外部反馈并明确自己下一步可以继续迭代或进入进阶版深造的方向。第 6 章在做什么把门真正打开做到这里你已经不只是有一个想法也不只是有一个能跑的页面。你已经有了一个逐步长出来的作品它能展示你是谁有自己的风格也有一个开始更像你的数字分身。现在差的最后一步是把它从只在你电脑里存在的项目变成别人也能访问的作品。很多人会在这里犹豫觉得是不是还可以再改改、再等等、再准备充分一点。也可以但基础版故意把上线放在最后不是为了拖而是为了让你把前面几章做出来的东西真正送到真实世界。因为一旦它有了一个公网链接事情就会发生变化你不再只是对自己解释这个作品而是开始接受别人怎么理解它、怎么使用它、怎么给你反馈。如果说前面几章一直在做内部工作那第 6 章就是把这个作品真正推向外部。它会让你第一次明显感觉到原来做出来还不只是把代码跑通还包括把它交出去让别人真的可以打开、使用、评价它。只有到这一步基础版才算真正完成了从想法到作品的第一次闭环。本章导航如下小节你会完成什么6.1 为什么把上线放在最后以及上线前检查确认现在这个版本已经值得公开给别人看6.2 把代码推到远程仓库并用 EdgeOne Pages 完成部署完成从本地到公网链接的最小发布闭环6.3 上线后自测并收集第一轮真实反馈确认作品在真实环境里也能用并得到第一批外部线索6.4 基础版收束你已经从有想法走到了有作品回看这一路的变化也知道接下来能往哪里走为什么不是第 1 章做完就立刻发出去第 1 章做完时你当然已经可以预览一个版本但那个阶段更像原型。第 1 章解决的是先让它出现不是它已经准备好接受别人访问。一个原型能预览不代表它已经值得公开。很多东西都还在早期内容可能太空手机端可能还不稳聊天入口可能还不够清楚数字分身也可能还不够像你。到了第 6 章再上线反而是对整个项目更负责的节奏。你不是在拖延而是在等它长到一个值得被别人认真看一眼的状态。从源码结构看这个节奏也体现在仓库的示例演进上基础版案例是个人主页 数字分身而 demos/README.md 里对应的进阶示例如demo-01-todo要到第 7-9 章才引入数据库 CRUD 与测试。也就是说基础版的上线目标并不是一个完整后端系统而是一个能展示、能对话、能联系我的最小作品。上线前先做一次很朴素的自查所以上线前最重要的不是马上点部署按钮而是先做一次很朴素的自查。它不需要变成正式测试体系但至少要保证你不是把一个明显还没准备好的版本直接公开出去。一个很够用的上线前清单是页面能正常打开没有明显报错手机端阅读没有严重错位数字分身可以正常回复你的名字、介绍、作品、联系方式已经不是空白API Key 没有写死在代码里环境变量位置正确其中最后一条需要特别留意.env文件通常被.gitignore排除不会上传到仓库因此密钥一旦写死在代码里就意味着会被推到公网仓库并永久留在 Git 历史里。基础篇第 4 章引入的最小 Git 闭环存一次、看历史、退回来正是为了让你在上线前能安心自查——这个版本是值得留下的而不是需要回退的。上线不是额外附加任务而是作品闭环的一部分。它不是顺手发一下而是这个版本现在已经值得进入真实环境了。记住这条最小发布路径部署这件事最容易把人吓到的地方是它表面上涉及很多词仓库、远程、构建、平台、环境变量、日志。其实对基础版来说你只需要先把闭环跑通。先记住这条最小路径就够了本地项目 - 远程仓库 - 部署平台 - 公网链接这条链路一旦跑通你的作品就不再只活在自己电脑里了。为什么要先推到远程仓库很多新手会问我明明已经在本地有代码了为什么还要先去 GitHub 或 Gitee原因很简单远程仓库在这里同时承担两件事它是你的代码备份它也是部署平台读取代码的来源所以这一步不是多余动作而是发布链路的一部分。对应到进阶版 12.1 部署到 EdgeOne Pages 里的部署前三个确认第一条就是代码已经推到 GitHub——部署平台需要从 GitHub 拉取你的代码如果代码只在本地平台拿不到。第一次部署只求跑通这里最重要的不是理解所有底层细节而是别把自己困在等我全懂了再部署。很多默认值本来就是可以先用的。基础版不要求你在这里进入协作工作流也不需要现在就学分支策略、PR、团队流程。你只需要完成最小路径创建远程仓库把本地代码推上去在 EdgeOne Pages 连接仓库使用默认构建配置先跑一次拿到第一个可访问链接到这里这个作品就已经真正离开了你的电脑。用 EdgeOne Pages 完成部署三个确认与五项配置进阶版 12.1 部署到 EdgeOne Pages 把同一件事展开了讲其中有两个确认和基础版直接相关值得在上线前核对第一本地pnpm build能成功。这是最重要的一步。如果本地构建都跑不通云端一定也跑不通——云端做的事和你本地一模一样。以仓库中的 demos/demo-01-todo/package.json 为例Next.js 项目的标准脚本是build: next build、dev: next dev --turbopack、start: next start本地先跑一次pnpm build看到构建完成就说明没问题。第二记录好.env里的环境变量。.env文件被.gitignore排除不会上传到 GitHub这意味着部署平台拉到的代码里没有数据库密码、没有认证密钥——你需要在平台上手动配置这些变量。现在打开本地的.env文件确认你知道里面有哪些变量、每个变量的值是什么。连接 GitHub 后进入 EdgeOne Pages 的构建设置页面通常只需确认五项配置框架预设选择 Next.js。选了之后平台会自动帮你填好构建命令和输出目录。根目录保持默认的./。如果你的项目代码不在仓库根目录比如在apps/web/子目录下才需要改这个。构建命令pnpm build或npm run build。这就是你在本地跑过的那个命令——平台在云端执行完全一样的操作。输出目录.next。这是 Next.js 构建后生成文件的位置平台需要知道去哪里找构建产物。Node 版本EdgeOne 通常默认是 Node 22大多数 Next.js 项目直接用默认值就能构建通过。一般先不改只有当日志里出现 Node 版本不兼容报错时再改成和你本地一致的版本。在构建设置页面下方还有环境变量区域。.env文件没有上传到 GitHub所以需要在这里手动把变量填进来EdgeOne Pages 支持批量导入——直接把.env文件的内容粘贴进去平台会自动解析成键值对。以进阶版 auth demo 为例典型变量包括DATABASE_URLpostgresql://... # 数据库连接字符串没有它应用连不上数据库 BETTER_AUTH_SECRETxxx # 认证密钥没有它登录功能会报错 BETTER_AUTH_URLhttps://你的域名 # 认证回调地址先留空部署成功拿到链接后再改每个变量都有它的作用DATABASE_URL缺了应用启动时就会报 Cannot connect to databaseBETTER_AUTH_SECRET缺了用户登录会直接 500 错误。如果你不确定需要哪些变量打开本地的.env文件里面有的这里都要有。注意修改环境变量不会自动生效需要点击重新部署平台才会用新的变量值重新构建。最后是选择加速区域这是国内部署平台特有的一步和 ICP 备案有关。如果你选了包含中国大陆的加速区域就需要 ICP 备案选择全球不含中国大陆则不需要备案部署后立刻就能用。虽然名字里说不含中国大陆但绑定自定义域名后国内也能正常访问——域名配置的事留到进阶版第十三章再说。如果部署失败先看日志再交给 AI如果中间失败也不要立刻怀疑自己是不是哪里根本不会。构建日志是最重要的信息源——答案通常在最后几行。先看日志再把日志贴给 AI让它帮你判断是构建命令、环境变量还是平台设置的问题。这和第 2 章本地跑项目时的思路其实是一样的先看现象再收窄范围。你可以直接这样问 AI这是我在部署平台看到的构建日志。 请先帮我判断最可能的失败原因是什么。 只告诉我下一步先改哪一项不要一次给太多方案。进阶版 12.1 整理了最常见的几类构建失败按日志关键词对号入座即可报错关键词原因解决方案engine node is incompatibleNode 版本不匹配在设置里调整 Node 版本Cannot find module依赖没装上检查package.json和锁文件是否提交到 GitHubDATABASE_URL is not defined环境变量没配在环境变量页面添加Build failed 无具体信息构建命令错误确认构建命令和本地一致ENOENT: no such file路径错误检查根目录配置比如error engine node is incompatible with this module表示 Node 版本不兼容处理方式很简单回到构建设置把 Node 版本改成和项目要求一致然后点击重新部署。重新部署后通常就会顺利走到绿色的 Success。部署成功拿到第一个公网链接构建成功后平台会生成一个预览链接格式类似xxx.edgeone.dev。你点开链接看到自己的作品——和本地一模一样但这次是在公网上。你可以把链接发给朋友朋友秒开页面。这是整个教程到目前为止最有成就感的时刻你写的代码现在全世界都能访问了。不过要注意预览链接的限制如果你选的是全球不含中国大陆加速区域默认域名可能有访问限制3 小时有效期绑定自定义域名后就没有这个限制了。自定义域名、DNS 解析与 HTTPS 证书的完整配置见进阶版 13.1 域名购买与 DNS 配置。推送即部署你已经无意中在用 CI/CD连接 GitHub 后每次你git push到主分支EdgeOne Pages 会自动触发重新部署——你不需要手动操作这就是 CI/CD 的雏形。用进阶版 12.3 CI/CD 与自动化 里的话说平台在 GitHub 上注册了一个 webhook每次你git pushGitHub 主动通知平台有新代码了平台收到通知后自动拉取代码、安装依赖、执行构建、发布上线。这个仓库本身的部署配置就是一个真实范例.cnb.yml 中定义了master分支推送时依次执行pnpm install --frozen-lockfile、pnpm build最后用npx -y edgeone pages deploy部署到 EdgeOne PagesPR 创建时则只做pr-build验证。这段配置展示了完整的多环境 CI/CD 思路——你的个人项目不需要这么复杂但当项目成长到需要自动测试、多环境部署时这就是一个可参考的模板。上线后先自己走一遍真实环境部署成功不等于作品真的可以用了。很多差异只有在真实环境里才会出现本地正常的样式上线后可能有点错位本地能跑的聊天到了线上可能因为环境变量漏配而失效你自己看得懂的结构别人第一次打开时却可能根本不知道该看哪里。所以链接出来之后别急着只顾着高兴先做一轮真实环境自测。重点不在严谨测试流程而在不要把部署成功误以为作品已经完全没问题。你可以先按这个顺序看链接能不能正常打开首屏和主要内容区有没有明显错位手机端读起来顺不顺数字分身能不能正常回复联系方式和作品信息是不是完整可见进阶版 16.1 面对真实用户 用一句话点明了这轮自测的深层意义数据告诉你发生了什么用户反馈才能告诉你为什么发生。你自己点开链接只能发现有没有坏而接下来要找的真人反馈才能告诉你为什么。再找 2 到 3 个人拿第一轮外部反馈如果可以再发给两三个人请他们真的点开看一眼、问一两个问题。你会很快发现真实反馈和自我感觉经常完全不一样。别人卡住的地方、忽略的地方、第一眼理解错的地方往往就是下一轮迭代最有价值的线索。你不需要设计复杂问卷甚至可以只问三件事你打开后第一眼觉得我是做什么的你知不知道该点哪里、该问什么有没有哪里让你卡住或者觉得不太自然这三问已经很够用了。它的背后是进阶版 16.1 提到的开发者视角与用户视角的鸿沟你太熟悉自己的产品了——你知道每个按钮在哪里每个功能怎么用但用户是第一次接触。你觉得设置在侧边栏第三项用户看到的是我找不到设置。不是用户的每个需求都是对的但用户的感受一定是真实的如果用户说找不到那就是找不到——不管你觉得入口有多明显。所以反馈不是否定也不是别人来挑刺而是作品进入真实世界之后最自然会出现的下一批素材。很多很值钱的改进线索只有别人真的点开链接之后才会出现。基础版走到这里真正重要的已经不是再证明自己会不会操作而是开始学会看见别人怎么使用你做出来的东西。基础版收束你已经从有想法走到了有作品如果你从第 0 章一路走到这里再回头看会发现这本基础篇其实一直只在做一件事把一个原本停留在脑子里的想法慢慢变成一个真正存在、可以运行、可以修改、可以上线、也可以被别人看到的作品。第 1 章让第一个版本出现第 2 章把它带回你的工作台第 3 章让它开始像一个作品第 4 章让它更完整也更可回退第 5 章让数字分身更像你第 6 章则把它送到了真实世界里。这条路最重要的意义不只是你学会了几个工具、几个操作、几个说法而是你已经做完了第一次完整闭环。你不再只是有想法的人而已经是一个把想法做成作品的人。因为你手里现在有东西了有链接了有作品了也有下一轮可以继续改进的方向了。验收清单我已经完成第一次从想法到作品的完整闭环我有一个别人可以访问的真实链接我知道这个作品下一步还可以继续往哪里改我知道自己可以继续留在当前项目里迭代也可以进入进阶版系统学习想继续往下走接下来你有两个很自然的选择。你可以继续迭代这个项目把它打磨得更完整也可以进入进阶版把环境、调试、UI/UX、API、安全、部署这些话题系统补起来。与本章直接衔接的进阶内容系统理解部署平台、构建流程和 CI/CD第十二章无服务器部署与 CI/CD 自动化部署到 EdgeOne Pages、部署到类 Vercel 平台、CI/CD 与自动化系统理解域名、DNS 与 HTTPS第十三章域名解析与接入域名购买与 DNS 配置系统理解真实用户反馈与产品迭代第十六章用户反馈与产品迭代面对真实用户无论你选哪一条基础版最该完成的事其实已经完成了你已经做出了自己的个人主页和数字分身也把它带回本地、持续修改、优化视觉、补充内容、校准回答最后正式上线。你不仅拿到了一个作品也拿到了一套以后还能继续迁移到别的项目上的方法。从本章开始你可以放心地对别人说这是我做的东西点开就能看。赞分享文档教程Vibe Coding示例工程【免费下载链接】vibe-vibeThe First Systematic Vibe Coding Open-Source Tutorial | From Zero to Full-Stack, Empowering Everyone to Build Products with AI | Live at: www.vibevibe.cn 首个系统化 Vibe Coding 开源教程 | 零基础到全栈实战让人人都能用 AI 开发产品 | 在线地址www.vibevibe.cn项目地址https://gitcode.com/datawhalechina/vibe-vibe点击查看免费下载相关推荐网络编程终极指南揭秘TCP/IP与Socket通信的完整实现方案网络编程终极指南揭秘TCP/IP与Socket通信的完整实现方案 在当今互联网时代网络编程已成为每个开发者必须掌握的核心技能。TCP/IP协议栈和Socke零基础部署Lucky手把手教你搭建个人公网访问神器零基础部署Lucky手把手教你搭建个人公网访问神器 还在为复杂的网络配置而头疼吗想要轻松实现公网访问却不知从何下手本文将用最简单的方式带你从零开始部署L后端网络通信番茄农场 PWA 实战用 Vibe Coding 把网页变成可安装、可离线的本地应用番茄农场 PWA 实战用 Vibe Coding 把网页变成可安装、可离线的本地应用 导读 本指南带你完成一个完整的闭环从普通 React 网页起步逐步加教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考