OpaceDigitalAgency/task-smasher

# 使用 Netlify Functions 的 OpenAI 代理 本项目使用 Netlify Functions 实现了一个安全的 OpenAI API 代理，并带有速率限制（每个 IP 每小时 5 次请求）。 ## 功能 - ✅ 安全地将请求代理到 OpenAI API - 🔒 在服务器端保护您的 API key 安全 - ⏱️ 速率限制：每个 IP 地址每小时 5 次请求 - 📊 在响应 header 中返回速率限制信息 - 🛡️ 错误处理与验证 ## 项目结构 ``` ├── netlify/ │ └── functions/ │ ├── openai-proxy.ts # Netlify function that proxies OpenAI requests │ └── README.md # Detailed function documentation ├── src/ │ ├── components/ │ │ └── OpenAIExample.tsx # Example React component using the proxy │ └── utils/ │ └── openaiService.ts # Client utility for interacting with the proxy ├── netlify.toml # Netlify configuration └── .env.example # Template for environment variables ``` ## 设置说明 ### 1. 环境变量 基于 `.env.example` 模板创建一个 `.env` 文件： ``` OPENAI_API_KEY=your_openai_api_key_here ``` 在生产环境部署时，请将您的 OpenAI API key 添加到您的 Netlify 环境变量中： 1. 进入您的 Netlify 站点仪表板 2. 导航至 Site settings > Environment variables 3. 添加一个新变量： - Key：`OPENAI_API_KEY` - Value：您的 OpenAI API key ### 2. 本地开发 安装依赖： ``` npm install ``` 启动开发服务器： ``` npm run dev ``` 这将同时启动 Vite 开发服务器和 Netlify Functions 开发服务器。 ### 3. 部署 部署到 Netlify： ``` npm run build netlify deploy --prod ``` ## 用法 ### 客户端集成 在您的组件中导入 OpenAIService 工具： ``` import OpenAIService from '../utils/openaiService'; // Simple completion const response = await OpenAIService.getCompletion('Your prompt here'); // Advanced usage const { data, rateLimit } = await OpenAIService.createChatCompletion({ model: 'gpt-3.5-turbo', messages: [{ role: 'user', content: 'Your prompt here' }], }); ``` ### 示例组件 本项目包含一个 `OpenAIExample` 组件，用于演示如何使用 OpenAI 代理。您可以在您的应用程序中导入并使用该组件： ``` import OpenAIExample from './components/OpenAIExample'; function App() { return ( ); } ``` ## 速率限制 该代理实现了每个 IP 地址每小时 5 次请求的速率限制。这是通过 Netlify 函数中的内存存储来实现的。 速率限制信息会在响应 header 中返回： - `X-RateLimit-Limit`：每小时允许的最大请求数 (5) - `X-RateLimit-Remaining`：当前时间窗口内剩余的请求数 - `X-RateLimit-Reset`：速率限制重置的 ISO 时间戳 了解更多详情，请参阅 [函数文档](netlify/functions/README.md)。 ## 安全注意事项 - 您的 OpenAI API key 作为环境变量被安全存储，绝不会暴露给客户端 - 所有请求在转发到 OpenAI 之前都会进行验证 - 速率限制有助于防止滥用和产生过高的费用 ## 自定义 要修改速率限制设置，请编辑 `netlify/functions/openai-proxy.ts` 中的常量： ``` const RATE_LIMIT = 5; // Number of requests per window const RATE_LIMIT_WINDOW = 60 * 60 * 1000; // Window size in milliseconds (1 hour) ``` 对于具有大流量的生产环境，建议考虑使用 Redis 或 DynamoDB 来实现更持久的速率限制解决方案。 ### 我们的服务 - **网页设计与开发** - 专业、响应式的网站 - **Next.js 与 React 开发** - 现代化的 Web 应用程序 - **前端开发** - 前沿的用户界面 - **WordPress 开发** - 定制主题与插件 - **电子商务解决方案** - 可扩展的在线商店 ### 联系我们 - 🌐 网站：[opace.agency](https://opace.agency) - 📧 服务：[网页设计与开发](https://opace.agency/services/web-design) - 💼 GitHub：[@OpaceDigitalAgency](https://github.com/OpaceDigitalAgency) - 📍 位置：英国，伯明翰

标签：API网关, Netlify Functions, OpenAI, React, Syscall, Syscalls, TypeScript, Web开发, 代理服务, 内存规避, 安全插件, 自动化攻击, 限流