🎨 从 0 到 1 上线 AI 图片站实战教程 (小白专用)

写在前面: 这是一个完整的实战项目教程,教你如何用 Vercel + Cloudflare R2 + Supabase 白嫖方案,从零开始搭建一个可以对外访问、可被搜索引擎收录的 AI 图片站。总成本只需要域名费用(约 $10-17/年),其他全部免费!

案例项目: Pet Emoji Generator (宠物表情包生成器)

• 功能: 上传宠物照片 → AI 生成 9 宫格表情包
• 成本: $17/年 (仅域名费用)
• 用时: 半天 ~ 1 天
• 访问: www.petemojimaker.com

📌 重要! 理解技术方案和成本 (小白必读)

完整技术栈

小白必读:

• ❌ 错误: 所有配置都在 Vercel 完成
• ✅ 正确: 域名在 Namecheap 购买,图片存 R2,数据存 Supabase,网站部署到 Vercel
• 总成本 = 域名费用($10-17/年) + 其他全免费!

🏗️ 一、架构总览

1.1 完整链路图

用户访问
    ↓
自定义域名 (example.com)
    ↓
Vercel (Next.js SSR/静态页面)
    ↓
┌─────────────────┬──────────────────┐
│                 │                  │
Cloudflare R2     Supabase          AI API
(图片存储)        (数据库)          (图片生成)
│                 │                  │
img.example.com   生成记录/点赞      ComfyUI/Replicate

1.2 技术方案说明

前端:

• Next.js 提供静态/SSR 页面
• Tailwind CSS 样式
• React 组件

后端:

• Vercel Serverless Functions (Next.js API Routes)
• Supabase 数据库 (PostgreSQL)

存储:

• Cloudflare R2 存储图片 (S3 兼容)
• 自定义域名访问 (如 img.example.com)

部署:

• GitHub 代码托管
• Vercel 自动部署
• 全球 CDN 加速

🚀 二、完整开发流程 (5 大步骤)

流程总览

Step 1: 购买域名 (Namecheap)
    ↓
Step 2: 开发项目 (Next.js + Cursor)
    ↓
Step 3: 部署到 Vercel + 绑定域名
    ↓
Step 4: 配置 Cloudflare R2 图片存储
    ↓
Step 5: 配置 Supabase 数据库 + SEO 优化

📦 Step 1: 购买域名 (Namecheap)

1.1 为什么要买域名?

Vercel 默认域名 vs 自定义域名:

1.2 推荐域名注册商

1.3 购买步骤 (以 Namecheap 为例)

第1步: 访问 Namecheap.com
    ↓
第2步: 搜索域名 (如 petemojimaker.com)
    ↓
第3步: 加入购物车 → 结账
    ↓
第4步: 完成支付
    ↓
第5步: 域名显示在 Domain List

域名选择建议:

• ✅ 简短易记 (如 petmaker.com)
• ✅ 优先 .com / .io / .app
• ✅ 避免数字和连字符
• ✅ 与产品功能相关

💻 Step 2: 开发项目 (Next.js + Cursor)

2.1 技术栈

# 前端框架
Next.js 14 (App Router)
React 18
Tailwind CSS
TypeScript

# 图片处理
Sharp (压缩)
Next/Image (优化)

# AI 集成
ComfyUI / Replicate API

2.2 项目初始化

# 创建 Next.js 项目
npx create-next-app@latest pet-emoji-generator

# 选择配置
✅ TypeScript
✅ ESLint
✅ Tailwind CSS
✅ App Router
✅ src/ directory
❌ Turbopack

# 进入项目
cd pet-emoji-generator

# 安装依赖
npm install @supabase/supabase-js @aws-sdk/client-s3

2.3 核心功能实现 (使用 Cursor)

功能清单:

• 用户上传图片
• AI 生成 9 宫格表情包
• 图片保存到 R2
• 生成记录存入 Supabase
• 点赞/下载统计
• SEO 优化

Cursor 开发提示词示例:

需求: 实现宠物表情包生成器

技术栈:
- Next.js 14 (App Router)
- Supabase 数据库
- Cloudflare R2 存储
- Tailwind CSS

功能:
1. 首页: 上传宠物照片
2. 调用 AI API 生成 9 宫格表情包
3. 将生成的图片上传到 R2
4. 记录生成信息到 Supabase
5. 展示生成结果,支持下载
6. 统计点赞和下载次数

请生成完整代码结构

2.4 项目结构

pet-emoji-generator/
├── src/
│   ├── app/
│   │   ├── page.tsx          # 首页
│   │   ├── api/
│   │   │   ├── generate/route.ts  # AI 生成 API
│   │   │   ├── upload/route.ts    # R2 上传 API
│   │   │   └── stats/route.ts     # 统计 API
│   │   ├── gallery/page.tsx  # 作品画廊
│   │   └── layout.tsx
│   ├── components/
│   │   ├── UploadForm.tsx
│   │   ├── ImageGrid.tsx
│   │   └── DownloadButton.tsx
│   └── lib/
│       ├── supabase.ts       # Supabase 客户端
│       └── r2.ts             # R2 客户端
├── .env.local                # 环境变量
└── package.json

🌐 Step 3: 部署到 Vercel + 绑定域名

3.1 推送代码到 GitHub

# 初始化 Git
git init
git add .
git commit -m "Initial commit: Pet Emoji Generator"

# 创建 GitHub 仓库后
git remote add origin https://github.com/你的用户名/pet-emoji-generator.git
git branch -M main
git push -u origin main

3.2 部署到 Vercel

步骤 1: 导入 GitHub 仓库

访问 Vercel.com → 登录
    ↓
点击 "Add New..." → "Project"
    ↓
选择 "Import Git Repository" → "GitHub"
    ↓
找到 pet-emoji-generator → "Import"

步骤 2: 配置项目

步骤 3: 添加环境变量

现在先跳过,后续配置完 R2 和 Supabase 后再添加

步骤 4: 部署

点击 "Deploy"
    ↓
等待 1-3 分钟
    ↓
获得 Vercel 默认域名: https://pet-emoji-generator.vercel.app

3.3 绑定自定义域名到 Vercel

步骤 1: 在 Vercel 添加域名

Vercel Dashboard → 选择项目 → Settings → Domains
    ↓
点击 "Add" 按钮
    ↓
输入域名: petemojimaker.com (或 www.petemojimaker.com)
    ↓
点击 "Add"

Vercel 会提示需要配置的 DNS 记录,类似:

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

步骤 2: 在 Namecheap 配置 DNS

登录 Namecheap → Domain List
    ↓
选择域名 → Manage → Advanced DNS
    ↓
添加 DNS 记录:

保存
    ↓
等待 10-30 分钟 DNS 生效
    ↓
回到 Vercel,域名状态变为 "Valid Configuration"

步骤 3: HTTPS 自动启用

Vercel 会自动申请 Let’s Encrypt SSL 证书,无需手动配置。

验证:

• 访问 https://petemojimaker.com
• 看到浏览器小绿锁 🔒

🖼️ Step 4: 配置 Cloudflare R2 图片存储

4.1 为什么用 R2?

Vercel 内置存储 vs Cloudflare R2:

4.2 创建 R2 Bucket

步骤 1: 注册 Cloudflare

访问 Cloudflare.com → 注册/登录
    ↓
验证邮箱

步骤 2: 创建 Bucket

Cloudflare Dashboard → R2 → "Create bucket"
    ↓
Bucket name: pet-emojis (只能小写字母、数字、连字符)
    ↓
Location: Automatic (或选择离用户最近的区域)
    ↓
点击 "Create bucket"

步骤 3: 开启公开访问

进入 Bucket → Settings → Public access
    ↓
点击 "Allow Access" (允许公开访问)
    ↓
确认

4.3 绑定自定义域名到 R2

为什么要绑定域名?

• ✅ 更专业 (img.example.com vs xxx.r2.cloudflarestorage.com)
• ✅ 更好的 SEO
• ✅ 防盗链控制

前提条件: 将域名托管到 Cloudflare

如果域名在 Namecheap:

第1步: Cloudflare Dashboard → "添加站点"
    ↓
第2步: 输入域名 petemojimaker.com → "添加站点"
    ↓
第3步: 选择 "Free" 免费计划 → "继续"
    ↓
第4步: Cloudflare 扫描 DNS 记录 → "继续"
    ↓
第5步: Cloudflare 给你两个 Nameserver 地址:
    amber.ns.cloudflare.com
    logan.ns.cloudflare.com

在 Namecheap 修改 Nameservers:

Namecheap → Domain List → Manage
    ↓
Domain → Nameservers → "Custom DNS"
    ↓
删除默认的 Nameservers
    ↓
添加 Cloudflare 的两个地址:
    amber.ns.cloudflare.com
    logan.ns.cloudflare.com
    ↓
保存 → 等待 10 分钟 - 24 小时生效

等待 Cloudflare 邮件确认: “Your site is active on Cloudflare”

绑定子域名到 R2

Cloudflare Dashboard → R2 → 选择 Bucket (pet-emojis)
    ↓
Custom Domains → "Connect domain"
    ↓
输入子域名: img.petemojimaker.com
    ↓
点击 "Continue"
    ↓
Cloudflare 自动添加 DNS 记录
    ↓
等待 5-15 分钟生效

验证:

• 访问 https://img.petemojimaker.com/test.png (上传测试文件后)
• 能正常访问即成功

4.4 获取 R2 API 凭证

用于代码上传文件到 R2:

Cloudflare Dashboard → R2 → Overview
    ↓
"Manage R2 API Tokens" → "Create API token"
    ↓
Token name: pet-emoji-uploader
    ↓
Permissions: "Object Read & Write"
    ↓
点击 "Create API Token"
    ↓
复制保存:
    - Access Key ID
    - Secret Access Key
    - Endpoint (S3 兼容端点)

保存到 .env.local:

# Cloudflare R2
R2_ACCOUNT_ID=你的账号ID
R2_ACCESS_KEY_ID=复制的 Access Key ID
R2_SECRET_ACCESS_KEY=复制的 Secret Access Key
R2_BUCKET_NAME=pet-emojis
R2_PUBLIC_URL=https://img.petemojimaker.com

🗄️ Step 5: 配置 Supabase 数据库

5.1 创建 Supabase 项目

访问 Supabase.com → 注册/登录
    ↓
"New project"
    ↓
填写信息:
    Project name: pet-emoji-generator
    Database Password: 生成强密码 (保存!)
    Region: Southeast Asia (Singapore) - 离中国最近
    ↓
选择 "Free" 免费计划
    ↓
点击 "Create new project"
    ↓
等待 2-3 分钟创建完成

5.2 创建数据表

进入 SQL Editor:

Supabase Dashboard → SQL Editor → "New query"

执行 SQL:

-- 创建表: 记录图片生成信息
create table if not exists emoji_generations (
  id uuid primary key default gen_random_uuid(),
  image_url text not null,
  prompt text,
  ip varchar(64),
  created_at timestamp with time zone default now(),
  likes int default 0,
  downloads int default 0
);

-- 创建索引: 加速查询
create index idx_created_at on emoji_generations(created_at desc);

-- 启用行级安全 (RLS)
alter table emoji_generations enable row level security;

-- 创建策略: 允许所有人读取
create policy "Allow public read access"
  on emoji_generations
  for select
  using (true);

-- 创建策略: 允许所有人插入 (实际应该限制)
create policy "Allow public insert"
  on emoji_generations
  for insert
  with check (true);

点击 “Run” 执行。

5.3 获取 Supabase API Keys

Supabase Dashboard → Settings → API
    ↓
复制以下信息:

保存到 .env.local:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...
SUPABASE_SERVICE_KEY=eyJhbGc...  # 仅后端使用!

🔧 Step 6: 完整环境变量配置

6.1 本地开发环境变量

创建 .env.local 文件:

# Vercel 部署
NEXT_PUBLIC_SITE_URL=https://petemojimaker.com

# Supabase 数据库
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...
SUPABASE_SERVICE_KEY=eyJhbGc...

# Cloudflare R2 存储
R2_ACCOUNT_ID=你的账号ID
R2_ACCESS_KEY_ID=xxx
R2_SECRET_ACCESS_KEY=xxx
R2_BUCKET_NAME=pet-emojis
R2_PUBLIC_URL=https://img.petemojimaker.com

# AI API (示例: Replicate)
REPLICATE_API_TOKEN=r8_xxx

6.2 在 Vercel 添加环境变量

Vercel Dashboard → 选择项目 → Settings → Environment Variables
    ↓
逐个添加上述变量:

添加方法:

1. Name: NEXT_PUBLIC_SUPABASE_URL
2. Value: https://xxxxx.supabase.co
3. Environment: 选择 Production, Preview, Development
4. 点击 “Save”

重复添加所有变量

重新部署:

Deployments → 最新部署 → "Redeploy"

📊 Step 7: SEO 优化 (免费流量!)

7.1 为什么要做 SEO?

SEO = 免费的持续流量来源

7.2 SEO 清单 (必做 7 项)

✅ 1. 生成 sitemap.xml

Next.js App Router: 创建 src/app/sitemap.ts

import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://petemojimaker.com',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    {
      url: 'https://petemojimaker.com/gallery',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.8,
    },
  ]
}

访问: https://petemojimaker.com/sitemap.xml

✅ 2. 生成 robots.txt

创建 src/app/robots.ts:

import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/api/',
    },
    sitemap: 'https://petemojimaker.com/sitemap.xml',
  }
}

访问: https://petemojimaker.com/robots.txt

✅ 3. 优化页面元数据

首页 src/app/page.tsx:

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Pet Emoji Generator - Turn Your Pet into 9-Grid Emojis',
  description: 'Free AI-powered tool to transform your pet photos into adorable 9-grid emoji packs. Upload, generate, and download instantly!',
  keywords: ['pet emoji', 'emoji generator', 'pet stickers', 'AI pet'],
  openGraph: {
    title: 'Pet Emoji Generator',
    description: 'Turn your pet into cute emojis!',
    url: 'https://petemojimaker.com',
    siteName: 'Pet Emoji Maker',
    images: [
      {
        url: 'https://img.petemojimaker.com/og-image.png',
        width: 1200,
        height: 630,
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Pet Emoji Generator',
    description: 'Turn your pet into cute emojis!',
    images: ['https://img.petemojimaker.com/og-image.png'],
  },
}

✅ 4. 语义化 HTML

{/* ❌ 错误 */}
<div className="title">Pet Emoji Generator</div>

{/* ✅ 正确 */}
<h1>Pet Emoji Generator</h1>
<h2>How It Works</h2>
<h3>Step 1: Upload Photo</h3>

{/* 图片添加有意义的 alt */}
<Image
  src="/example.jpg"
  alt="Cute dog emoji generated by AI"
  width={300}
  height={300}
/>

✅ 5. 提交到 Google Search Console

访问 Google Search Console:
https://search.google.com/search-console
    ↓
"添加资源" → 输入 petemojimaker.com
    ↓
验证所有权 (选择 "HTML 标记" 方式):
    复制 meta 标签 → 添加到 layout.tsx <head>
    ↓
点击 "验证"
    ↓
提交 Sitemap:
    左侧菜单 "站点地图" → 输入 sitemap.xml → "提交"

✅ 6. 提交到 Bing Webmaster Tools

访问 Bing Webmaster Tools:
https://www.bing.com/webmasters
    ↓
"添加站点" → 输入 petemojimaker.com
    ↓
验证方式: "从 Google Search Console 导入"
    ↓
提交 Sitemap: sitemap.xml

✅ 7. 性能优化

{/* 图片懒加载 */}
<Image
  src="/image.jpg"
  loading="lazy"
  alt="..."
/>

{/* 压缩图片 */}
// 使用 webp/avif 格式
// 适当的尺寸 (不要加载 4K 图片显示 300px)

7.3 推广建议 (获取外链)

在这些平台发布:

• ✅ Product Hunt - 科技产品
• ✅ V2EX - 程序员社区
• ✅ Twitter/X - 社交媒体
• ✅ Reddit - 相关 subreddit
• ✅ Hacker News - 技术新闻

发布策略:

1. 标题: 简洁、吸引人
2. 内容: 突出痛点和解决方案
3. 截图: 展示实际效果
4. 链接: 放在评论区或简介

❓ 常见问题 (FAQ)

Q1: R2 自定义域为什么一直验证不通过?

原因: 域名 DNS 未托管到 Cloudflare。

解决方案:

1. 确认域名 Nameservers 已改为 Cloudflare
2. 等待 DNS 生效 (10 分钟 - 24 小时)
3. 在 Cloudflare 看到 “Active” 状态后再绑定 R2

Q2: Vercel 需要自己配置 SSL 吗?

答: 不需要。

Vercel 自动申请 Let’s Encrypt 证书并续期,域名 DNS 生效后会自动开启 HTTPS。

Q3: Supabase 的 key 会不会泄露?

答: 分情况。

• ✅ ANON_KEY 可以放前端,但务必配置 RLS (行级安全)
• ❌ SERVICE_ROLE_KEY 绝对不能暴露,只能在服务端使用

最佳实践:

// ✅ 前端: 使用 ANON_KEY
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

// ✅ 服务端: 使用 SERVICE_ROLE_KEY
const supabaseAdmin = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_KEY! // 仅服务端环境变量
)

Q4: 免费额度够用吗?

答: 早期完全够用!

超出后怎么办?

• Vercel: 升级 Pro ($20/月)
• R2: 超出后 $0.015/GB/月 (很便宜)
• Supabase: 升级 Pro ($25/月)

Q5: 为什么不用 Vercel 自带的存储?

答: 太贵了!

结论: R2 便宜 10 倍以上!

Q6: 如何防止恶意上传?

解决方案:

1. 限制文件大小:

// 最大 5MB
if (file.size > 5 * 1024 * 1024) {
  throw new Error('File too large')
}

2. 限制文件类型:

const allowedTypes = ['image/jpeg', 'image/png', 'image/webp']
if (!allowedTypes.includes(file.type)) {
  throw new Error('Invalid file type')
}

3. IP 限流:

// 使用 Upstash Redis 或 Vercel KV
// 限制每个 IP 每小时 10 次

4. 图片内容审核:

// 使用 Cloudflare AI 或 Google Vision API
// 检测不当内容

Q7: 国内访问 Vercel 慢怎么办?

解决方案:

1. 使用 Cloudflare CDN 加速 (见域名配置教程 3.3 节)
2. 图片走 R2 自定义域 (已经是 Cloudflare CDN)
3. 考虑备选方案:
   • Netlify (类似 Vercel)
   • Cloudflare Pages (国内速度更快)

📊 成本总结

开发成本

总计: $10-17/年 (仅域名费用)

时间成本

总计: 半天 ~ 1 天

🎯 总结

你学到了什么?

下一步建议

1. 数据分析: 接入 Google Analytics 或 Cloudflare Web Analytics
2. 用户反馈: 添加评论/评分功能
3. 变现探索:
   • 广告 (Google AdSense)
   • 付费功能 (Stripe)
   • 会员订阅
4. 持续优化: 根据用户反馈迭代功能
5. 推广: 定期在社交媒体分享

📖 相关教程

• Vercel 配置详解
• 域名配置详解
• Supabase 配置详解
• Stripe 支付配置

记住:

• 先做出最小可用版本 (MVP)
• 让真实用户用起来
• 根据反馈快速迭代
• 持续优化体验与变现

用 Vercel + Cloudflare R2 + Supabase,个人也能在 0 预算内把图片站跑起来!

🎉 开始你的 AI 图片站之旅吧! 🎉

💡 Vibe Coding 心法: 不要追求完美!先用 Cursor 快速搭建 MVP,部署上线让真实用户使用,然后根据反馈快速迭代。完美的产品是迭代出来的,不是一开始设计出来的!