出海技术栈集成教程(六):Upstash 集成 Redis 与请求限流器

我开发了 next.js saas 模板 Nexty.dev,很多用户告诉我文档太详细了,于是我决定把出海技术栈、海外第三方服务集成的文档发出来,希望帮到更多出海的朋友。👉 原文链接

本系列分享的内容包含:

  • 域名购买、解析与配置
  • Supabase 集成教程:登录与数据库
  • Stripe 集成教程:支付配置与开发
  • Resend 集成教程:邮件服务
  • 域名邮箱配置教程:域名邮箱
  • Upstash 集成教程:Redis 与限流器
  • Cloudflare R2集成教程:免费图片存储
  • Cloudflare Turnstile集成教程:免费人机检测

Upstash 是一项现代化的无服务器数据基础设施服务,专门为云原生应用设计。它提供 Redis 和 Kafka 的托管服务,具有以下核心特性:

主要优势

特性 传统 Redis Upstash Redis
计费模式 按时间计费 按请求计费
运维成本 需要维护服务器 零运维
扩展性 手动扩缩容 自动扩缩容
全球分布 需要自建 内置全球分布
冷启动 毫秒级冷启动

适用场景

  • 缓存系统:提升应用响应速度
  • 会话存储:用户登录状态管理
  • 限流器:API 访问频率控制
  • 计数器:实时统计数据
  • 消息队列:异步任务处理
  • 实时数据:聊天、通知等功能

Redis 在 SaaS 项目中的作用

在复杂商业化项目中,Redis 通常是必不可少的基础设施,主要应用场景包括:

1. 缓存层

javascript 复制代码
// 缓存用户数据
await redis.setex(`user:${userId}`, 3600, JSON.stringify(userData));

// 缓存 API 响应
await redis.setex(`api:posts:${page}`, 300, JSON.stringify(posts));

2. 限流器

javascript 复制代码
// API 限流
const key = `rate_limit:${userId}:${endpoint}`;
const current = await redis.incr(key);
if (current === 1) {
  await redis.expire(key, 60); // 1分钟窗口
}
if (current > 100) {
  throw new Error('Rate limit exceeded');
}

3. 会话管理

javascript 复制代码
// 存储用户会话
await redis.setex(`session:${sessionId}`, 86400, JSON.stringify({
  userId,
  permissions,
  lastActivity: Date.now()
}));

4. 实时计数

javascript 复制代码
// 文章浏览量
await redis.incr(`views:article:${articleId}`);

// 在线用户数
await redis.sadd('online_users', userId);

Nexty 模板中的 Redis 集成

为了满足不同使用场景,Nexty 模板对 Redis 和限流器进行了封装,并采用了灵活的兼容设计:

  • 如果配置了 Upstash 环境变量,则支持调用封装好的 Redis 和限流器方法
  • 如果未配置 Upstash 环境变量,相关功能会自动降级,不会影响其他业务逻辑

为了大家更快上手,模板在邮件订阅功能中集成了限流器示例,它会根据是否配置了 Upstash 环境变量,自动决定是否启用限流功能。

本章我们来完成 Upstash 的注册与配置。

注册与基础配置

  1. 访问 Upstash,使用邮箱注册账号

  2. 进入 Dashboard 页面,点击 Create database 按钮

  1. 进入数据库详情页面,在 REST API 模块复制 UPSTASH_REDIS_REST_URLUPSTASH_REDIS_REST_TOKEN 到环境变量

验证

现在你可以再次尝试提交邮件订阅,并查看 Upstash Redis 的 Data Browser 页面,有新增数据,则说明订阅的限流器生效了。

总结

出海技术栈集成系列文章会同步发布到我的掘金专栏,欢迎订阅关注。

同时也欢迎出海的朋友了解 Top3 的出海 Next.js SaaS 模板 Nexty.dev

相关推荐
JosieBook33 分钟前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛1 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端1 小时前
claude code 原理分析
前端
GalaxyMeteor1 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man1 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮1 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0071 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon2 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible2 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua2 小时前
setup函数相关【3】
前端·javascript·vue.js