7.4 部署上线：让世界看到它
代码写好了，设计也打磨了。现在到了最激动人心的一步——把它放到互联网上，让所有人能用。
第一步：推送到 GitHub
在部署之前，先把代码保存到 GitHub。
1.1 创建 GitHub 仓库
- 打开 github.com，登录
- 点击右上角 "+" → "New repository"
- 仓库名填
daily-focus - 选 Public（如果你想让别人看到你的代码）
- 不要勾选 "Add a README"（我们已经有了）
- 点击 "Create repository"
1.2 初始化 Git 并推送
在项目目录运行：
git init
git add .
git commit -m "feat: AI 每日聚焦助手 MVP 完成"
git branch -M main
git remote add origin https://github.com/你的用户名/daily-focus.git
git push -u origin main
重要：确保 .env.local 没有被提交！ 检查 .gitignore 文件是否包含 .env.local。Next.js 默认会帮你加，但最好确认一下。泄露 API Key 会导致你的账户被别人盗用。
如果 .env.local 不小心被提交了：
# 从 git 历史中删除
git rm --cached .env.local
git commit -m "remove env file"
git push
然后立刻去 OpenAI 和 Supabase 后台重新生成 Key。
第二步：连接 Vercel 部署
Vercel 是 Next.js 的母公司，部署 Next.js 项目只需要点几下。
2.1 注册 Vercel
- 打开 vercel.com
- 点击 "Sign Up"，选择用 GitHub 账号登录
- 授权 Vercel 访问你的 GitHub 仓库
2.2 导入项目
- 在 Vercel 控制台，点击 "Add New..." → "Project"
- 找到
daily-focus仓库，点击 "Import" - Vercel 会自动识别这是 Next.js 项目，不需要改任何设置
- 先别点 Deploy——我们还要设置环境变量
2.3 设置环境变量
在同一个页面，展开 "Environment Variables" 部分，添加：
| Name | Value |
|---|---|
NEXT_PUBLIC_SUPABASE_URL | 你的 Supabase 项目 URL |
NEXT_PUBLIC_SUPABASE_ANON_KEY | 你的 Supabase anon key |
OPENAI_API_KEY | 你的 OpenAI API Key |
每个变量添加后点击 "Add"。确保三个都加了。
现在点击 "Deploy"。等 1-2 分钟，你会看到一个绿色的 ✅，配一行字："Congratulations!"
你的应用上线了。
Vercel 会给你一个域名，类似 daily-focus-xxx.vercel.app。点击它，你的应用就打开了。
2.4 每次更新自动部署
以后你只需要 git push，Vercel 会自动检测到代码变更，自动重新部署。这就是 CI/CD（持续集成/持续部署）——你不需要做任何额外设置。
第三步：自定义域名（可选）
daily-focus-xxx.vercel.app 这个域名不太好记。如果你有自己的域名，可以绑定上去。
3.1 买一个域名
推荐在 Namesilo 或 Cloudflare 购买，.com 域名一年大概 60-80 元人民币。
3.2 在 Vercel 绑定
- 进入 Vercel 项目 → Settings → Domains
- 输入你的域名（比如
dailyfocus.app） - 点击 "Add"
- Vercel 会告诉你需要配置哪些 DNS 记录
3.3 配置 DNS
去你买域名的网站，找到 DNS 管理，添加 Vercel 告诉你的记录（通常是一个 CNAME 记录指向 cname.vercel-dns.com）。
等 5-30 分钟 DNS 生效，你就可以用自己的域名访问了。
Vercel 会自动帮你配置 HTTPS（SSL 证书），不用你操心。
第四步：添加数据分析
应用上线了，你想知道有没有人用。加个简单的访问统计。
方案一：Vercel Analytics（最简单）
- 在 Vercel 项目 → Analytics → 点击 "Enable"
- 安装依赖：
npm install @vercel/analytics - 在
src/app/layout.tsx中添加：
import { Analytics } from "@vercel/analytics/react";
// 在 body 标签内，children 下面加：
<Analytics />
- 推送代码，等自动部署完成
- 回到 Vercel Analytics 页面，你就能看到访问量了
方案二：Plausible（更注重隐私）
如果你在意隐私，可以用 Plausible。它不追踪个人信息，只看整体数据。在 layout.tsx 的 <head> 里加一行 script 标签就行。
第五步：分享给第一批用户
你的应用在线了，现在要找人来用。
分享渠道
-
朋友圈/微信群——最直接，发一段话配截图
"花了一个周末用 AI 做了一个小工具，每天早上设定 3 个最重要的任务，还有 AI 给你加油打气。试试看：你的域名.com"
-
V2EX / 少数派 / 即刻——程序员社区用户更愿意尝鲜新产品 标题写清楚"是什么 + 为什么做 + 技术栈"，附上链接
-
Twitter/X——用英文发也可以触达更多人
"Built a simple focus tool in a weekend with AI coding. Set 3 daily priorities, get AI motivation. Try it: your-domain.com"
-
小红书——截图好看的话效果不错
分享时注意
- 一定要配上截图或录屏，纯文字没人看
- 说清楚"这个东西解决什么问题"，而不是"我用了什么技术"
- 不要期待很多人用，能有 10-20 个人试试就已经很好了
第六步：收集反馈
第一批用户来了，听他们说什么。
问这几个问题：
- 你看得懂这个页面是干什么的吗？（测理解度）
- 你能顺利完成"设定任务 → 保存 → 获取鼓励"这个流程吗？（测可用性）
- 有什么让你觉得困惑或不方便的地方？（找痛点）
- 你会每天打开用吗？为什么？（测留存意愿）
工具：
- 最简单：直接微信聊天问
- 正式一点：用 Typeform 或腾讯问卷做一个简短的调查问卷
- 进阶：加一个页面底部的反馈按钮，用 Formspree 收集
第七步：基于反馈迭代
收集到反馈后，分三个优先级处理：
| 优先级 | 处理方式 | 例子 |
|---|---|---|
| 紧急 Bug | 立刻修 | 保存按钮点不了、页面白屏 |
| 高频需求 | 这周加 | "能不能设置提醒？""想看一周的统计" |
| 锦上添花 | 记下来，以后再说 | "能不能加番茄钟？""想加背景音乐" |
不要用户说什么就做什么。 先观察：如果 5 个人里有 3 个人都提到同一个问题，那才是真需求。
🎉 庆祝时刻
停下来，认真地对自己说：
"我做了一个产品，它在线上运行，有人在用它。"
不管你有多少不足，不管你写了多少 bug，不管你代码写得有多"丑"——
你做到了。从一个想法，到一个能用的产品。
很多学了三年编程的人都没做到这件事。而你做到了，用了一个周末。
本节小结
| 步骤 | 说明 |
|---|---|
| 推送 GitHub | 代码版本管理，注意不要泄露 .env.local |
| Vercel 部署 | 一键部署，设置环境变量，自动生成域名 |
| 自定义域名 | 可选，但更专业 |
| 数据分析 | Vercel Analytics 最简单，一行代码搞定 |
| 分享推广 | 朋友圈 + 技术社区 + 社交媒体 |
| 收集反馈 | 问对问题，找到真正的需求 |
| 迭代改进 | 先修 Bug，再做高频需求，最后才是锦上添花 |
你不仅做了一个产品，你还走完了完整的"做产品"流程。 这个经验比任何教程都值钱。