关于白嫖 CF 免费存储空间做购物网站

互动交流
1

我制作了一个购物网站，利用 CF 的 pages 制作静态网站，将 CF 的 D1.R2.KV 都免费利用，这个网站现在已经运行了，正在补充数据内容，只是也耗费了我所有积分。这个软件是很好用也很方便，但是积分太少了不够用。完成这个网站我也用光了所有积分。

2 个赞
2

如果有过程截图之类的就更好了

3

有成品，没有截图，我可以将安装说明发送

三易智能科技平台 · 智能锁商城

基于 Cloudflare Pages + D1 + KV + R2 的智能锁在线销售系统，完全可以在免费额度内运行。

技术栈

  • 前端：原生 HTML + CSS + JS（移动端优先，零依赖）
  • 后端：Cloudflare Pages Functions（本质是 Worker）
  • 数据库：Cloudflare D1（SQLite）
  • 缓存/会话：Cloudflare KV
  • 图片存储：Cloudflare R2
  • 备份通知：Telegram Bot + Worker Cron

项目结构

sanyi-scaffold/
├── public/                      # 前端静态文件
│   ├── index.html               # 首页
│   ├── product.html             # 商品详情
│   ├── cart.html                # 购物车
│   ├── checkout.html            # 订单确认/支付
│   ├── orders.html              # 订单列表
│   ├── list.html                # 商品列表/搜索
│   ├── adapter.html             # 智能锁适配查询
│   ├── css/
│   │   └── style.css            # 移动端样式
│   └── js/
│       └── app.js               # 前端工具函数
├── functions/                   # Pages Functions（后端API）
│   ├── _middleware.js           # 全局中间件（CORS/限流/统计）
│   └── api/
│       ├── health.js            # 健康检查
│       ├── home.js              # 首页数据
│       ├── categories.js        # 分类列表
│       ├── products/
│       │   ├── index.js         # 商品列表
│       │   └── [id].js          # 商品详情
│       ├── cart.js              # 购物车
│       └── orders/
│           ├── index.js         # 创建订单/订单列表
│           ├── [id].js          # 订单详情
│           └── [id]/pay.js      # 提交付款凭证
├── migrations/
│   └── 0001_init.sql            # D1 数据库初始化脚本
├── backup-worker/               # 独立的备份 Worker
│   ├── wrangler.toml
│   └── src/
│       └── index.js             # 晨报 + 数据备份
└── wrangler.toml                # Pages 项目配置

快速部署

前置准备

  1. 注册 Cloudflare 账号：https://dash.cloudflare.com/signup

  2. 绑定信用卡（验证身份，免费额度够用，不扣费）

  3. 安装 Node.js 18+：https://nodejs.org

  4. 安装 Wrangler CLI：

    npm install -g wrangler

  5. 登录 Cloudflare：

    wrangler login

第 1 步：创建 D1 数据库

# 创建数据库
wrangler d1 create sanyi-db

把输出的 database_id 填到 wrangler.toml 里。

第 2 步：创建 KV 命名空间

wrangler kv:namespace create "sanyi-sessions"
wrangler kv:namespace create "sanyi-cache"
wrangler kv:namespace create "sanyi-config"
wrangler kv:namespace create "sanyi-adapter"

把每个的 id 填到 wrangler.toml 里。

第 3 步：创建 R2 存储桶

wrangler r2 bucket create sanyi-images

第 4 步：初始化数据库表

# 执行迁移
wrangler d1 migrations apply sanyi-db --remote --config wrangler.toml
# 或者直接执行 SQL
wrangler d1 execute sanyi-db --remote --file=migrations/0001_init.sql

第 5 步：部署 Pages 项目

# 在项目根目录执行
wrangler pages deploy public --project-name=sanyi-smart-lock

首次部署会自动创建 Pages 项目，部署完成后会给你一个 xxx.pages.dev 的域名。

第 6 步：配置 Pages 环境变量

在 Cloudflare Dashboard → Pages → 你的项目 → Settings → Variables & secrets：

普通变量：

  • ENV = production
  • SITE_NAME = 三易智能科技平台
  • FREE_SHIPPING_AMOUNT = 999
  • ORDER_AUTO_CANCEL_MINUTES = 30
  • TG_ADMIN_ID = 你的 Telegram 用户 ID

Secrets（敏感变量）：

  • TG_BOT_TOKEN = 你的 Telegram Bot Token
  • JWT_SECRET = 随便一串随机字符串（后面会用到）

第 7 步：绑定 D1、KV、R2 到 Pages

在 Pages 项目 Settings → Functions 里：

  • D1 database bindings：DB → 选择 sanyi-db
  • KV namespace bindings：
    • SESSIONS → sanyi-sessions
    • CACHE → sanyi-cache
    • CONFIG → sanyi-config
    • ADAPTER → sanyi-adapter
  • R2 bucket bindings：IMAGES → sanyi-images

第 8 步（可选）：部署备份 Worker

cd backup-worker
# 修改 wrangler.toml 里的 database_id 和 TG 配置
wrangler deploy

本地开发

# 启动本地开发服务器
wrangler pages dev public --d1=sanyi-db --kv=CACHE --kv=SESSIONS --kv=CONFIG --kv=ADAPTER

核心功能清单

已实现

  • :white_check_mark: 移动端首页（Banner、分类、热销、新品）
  • :white_check_mark: 商品列表（分类、搜索、排序、分页）
  • :white_check_mark: 商品详情（规格选择、加入购物车、立即购买）
  • :white_check_mark: 购物车（本地存储、增减数量、删除）
  • :white_check_mark: 订单确认（地址填写、金额计算、安装服务）
  • :white_check_mark: 提交订单（扣库存、生成订单号）
  • :white_check_mark: 个人收款码支付（上传凭证、待确认状态）
  • :white_check_mark: 订单列表（状态筛选）
  • :white_check_mark: 智能锁适配查询工具
  • :white_check_mark: 全局限流（IP 级，每分钟 60 次）
  • :white_check_mark: 用量统计（每日请求数）
  • :white_check_mark: KV 缓存（商品列表、详情、首页数据）
  • :white_check_mark: Telegram 新订单通知
  • :white_check_mark: Telegram 每日销售晨报
  • :white_check_mark: Telegram 每日数据备份（CSV）

后续可扩展

  • :black_square_button: 微信/支付宝官方支付（需要营业执照）
  • :black_square_button: 用户注册登录（微信 OAuth）
  • :black_square_button: 管理后台页面
  • :black_square_button: 图片上传到 R2
  • :black_square_button: 物流轨迹查询
  • :black_square_button: 分销推广系统
  • :black_square_button: 评价晒图系统
  • :black_square_button: 会员积分系统

免费额度使用情况

资源 免费额度 预估日用量 占用率
Worker 请求 10万/天 ~2,000 2%
D1 行读取 500万/天 ~50,000 1%
D1 行写入 10万/天 ~500 0.5%
KV 写入 1,000/天 ~100 10%
R2 存储 10GB/月 ~100MB 1%
Pages 托管 无限 全站 0%
Cron Trigger 5个/账户 2个 40%

完全在免费额度内，零成本运行。

默认管理员

  • 用户名：admin
  • 密码：admin123

:warning: 生产环境请立即修改密码！

Telegram Bot 配置

  1. 在 Telegram 找 @BotFatherBotFatherBotFatherBotFatherBotFatherBotFatherBotFatherBotFather 创建 Bot，获取 To@u@userinfoboterinfoboten
  2. 找 @userinfobot 获取自己的 User ID
  3. 把 Token 和 User ID 填到环境变量里
1 个赞
4

默认管理员的信息不要外泄