- Cloudflare D1 作为数据库
- 使用 Cloudflare Pages 部署前端
- 使用 Cloudflare Workers 部署后端
D1
是Cloudflare
的原生无服务器数据库。Pages
是Cloudflare
的静态网站托管服务, 速度超快,始终保持最新状态。Workers
是Cloudflare
的serverless
应用服务,可以在全球 300 个数据中心运行代码, 而无需配置或维护基础架构。Cloudflare Email Routing
可以处理域名的所有电子邮件流量,而无需管理电子邮件服务器。
安装 wrangler
npm install wrangler -g
克隆项目
git clone https://github.com/dreamhunter2333/fans_count_history.git
第一次执行登录 wrangler 命令时,会提示登录, 按提示操作即可
# 创建 D1 并执行 schema.sql
wrangler d1 create dev
wrangler d1 execute dev --file=db/schema.sql
创建完成后,我们在 cloudflare 的控制台可以看到 D1 数据库
初始化项目
cd worker
pnpm install
cp wrangler.toml.template wrangler.toml
修改 wrangler.toml
文件
name = "fans_history"
main = "src/worker.js"
compatibility_date = "2023-08-14"
node_compat = true
[triggers]
crons = [ "0 0 * * *" ]
[vars]
JWT_SECRET = "xxx" # 用于生成 jwt 的密钥
[[d1_databases]]
binding = "DB"
database_name = "xxx" # D1 数据库名称
database_id = "xxx" # D1 数据库 ID
部署
pnpm run deploy
部署成功之后再路由中可以看到 worker
的 url
,控制台也会输出 worker
的 url
cd frontend
pnpm install
cp .env.example .env.local
修改 .env.local
文件, 将 VITE_API_BASE
修改为 worker
的 url
, 不要在末尾加 /
例如: VITE_API_BASE=https://xxx.xxx.workers.dev
pnpm build --emptyOutDir
# 根据提示创建 pages
pnpm run deploy