出海技术栈集成教程(六):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

相关推荐
含若飞16 小时前
Vue 中 `watch` 与 `this.$watch` 使用指南
前端·javascript·vue.js
无名小兵17 小时前
前端渲染大体积 多页面pdf
前端
c0detrend17 小时前
读诗的时候我却使用了自己研发的Chrome元素截图插件
前端·chrome
希冀12317 小时前
【Vue】第五篇
前端·javascript·vue.js
Moonbit17 小时前
你行你上!MoonBit LOGO 重构有奖征集令
前端·后端·设计
littleplayer17 小时前
Root-> A ->B -> C page, 当前C page, 如何返回B,又如何直接返回A page呢
前端
姝然_952718 小时前
Android Activity启动流程详细分析
前端
littleplayer18 小时前
SwiftUI 导航
前端
用户924262570073118 小时前
Vue 组件入门学习笔记:局部注册、全局注册与 Props 传值详解
前端
云枫晖18 小时前
Webpack系列-构建性能优化实战:从开发到生产
前端·webpack·性能优化