crush-level-web/docs/EnvironmentVariables.md

174 lines
4.4 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 环境变量配置说明
## 概述
本文档说明项目所需的环境变量配置。请在项目根目录创建 `.env.local` 文件并添加以下配置。
## 必需的环境变量
### 应用配置
```bash
# 应用的基础 URL
# 开发环境: http://localhost:3000
# 生产环境: https://test.crushlevel.ai 或您的域名
NEXT_PUBLIC_APP_URL=https://test.crushlevel.ai
```
### Discord OAuth 配置
```bash
# Discord OAuth 客户端 ID
# 从 Discord Developer Portal 获取
# https://discord.com/developers/applications
NEXT_PUBLIC_DISCORD_CLIENT_ID=your_discord_client_id_here
```
**获取步骤**:
1. 访问 [Discord Developer Portal](https://discord.com/developers/applications)
2. 创建或选择应用
3. 在 OAuth2 设置中配置回调 URL
- `https://test.crushlevel.ai/api/auth/discord/callback`
- `http://localhost:3000/api/auth/discord/callback` (开发环境)
4. 复制 Client ID
### Google OAuth 配置
```bash
# Google OAuth 客户端 ID
# 从 Google Cloud Console 获取
# https://console.cloud.google.com/
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id_here
```
**获取步骤**:
1. 访问 [Google Cloud Console](https://console.cloud.google.com/)
2. 创建或选择项目
3. 启用 Google+ API
4. 创建 OAuth 2.0 客户端 ID
5. 配置授权重定向 URI
- `https://test.crushlevel.ai/api/auth/google/callback`
- `http://localhost:3000/api/auth/google/callback` (开发环境)
6. 复制客户端 ID
## 环境变量文件示例
创建 `.env.local` 文件:
```bash
# .env.local
# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000
# Discord OAuth
NEXT_PUBLIC_DISCORD_CLIENT_ID=1234567890123456789
# Google OAuth
NEXT_PUBLIC_GOOGLE_CLIENT_ID=1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com
```
## 不同环境的配置
### 开发环境 (`.env.local`)
```bash
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_DISCORD_CLIENT_ID=dev_discord_client_id
NEXT_PUBLIC_GOOGLE_CLIENT_ID=dev_google_client_id
```
### 生产环境 (`.env.production`)
```bash
NEXT_PUBLIC_APP_URL=https://test.crushlevel.ai
NEXT_PUBLIC_DISCORD_CLIENT_ID=prod_discord_client_id
NEXT_PUBLIC_GOOGLE_CLIENT_ID=prod_google_client_id
```
## 安全注意事项
### ⚠️ 重要提醒
1. **不要提交敏感信息到 Git**
- `.env.local` 已在 `.gitignore`
- 不要将真实的密钥提交到代码库
2. **使用不同的凭据**
- 开发环境和生产环境使用不同的 OAuth 凭据
- 定期轮换生产环境的密钥
3. **限制回调 URL**
- 只添加必要的回调 URL
- 不要使用通配符
4. **环境变量前缀**
- `NEXT_PUBLIC_` 前缀的变量会暴露到浏览器
- 敏感的服务端密钥不要使用此前缀
## 验证配置
### 检查环境变量是否正确加载
在组件中添加调试代码(仅开发环境):
```typescript
console.log('App URL:', process.env.NEXT_PUBLIC_APP_URL)
console.log('Discord Client ID:', process.env.NEXT_PUBLIC_DISCORD_CLIENT_ID)
console.log('Google Client ID:', process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID)
```
### 常见问题
**问题 1**: 环境变量未生效
**解决方案**:
- 重启开发服务器 (`npm run dev`)
- 确保文件名正确 (`.env.local`)
- 检查变量名拼写
**问题 2**: OAuth 回调失败
**解决方案**:
- 检查 `NEXT_PUBLIC_APP_URL` 是否正确
- 确保回调 URL 在 OAuth 提供商处正确配置
- 开发环境使用 `http://localhost:3000`,生产环境使用实际域名
**问题 3**: 客户端 ID 无效
**解决方案**:
- 确认复制的是 Client ID 而不是 Client Secret
- 检查是否有多余的空格或换行符
- 确认 OAuth 应用状态为已发布/激活
## 添加新的环境变量
当添加新的环境变量时:
1.`.env.local` 中添加变量
2. 更新本文档
3. 通知团队成员更新他们的本地配置
4. 在部署平台Vercel/Netlify 等)配置生产环境变量
## 部署平台配置
### Vercel
1. 进入项目设置
2. 选择 "Environment Variables"
3. 添加所有 `NEXT_PUBLIC_*` 变量
4. 为不同环境Production/Preview/Development设置不同的值
### Netlify
1. 进入 Site settings
2. 选择 "Build & deploy" > "Environment"
3. 添加环境变量
## 相关文档
- [Next.js 环境变量文档](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables)
- [Discord OAuth 文档](https://discord.com/developers/docs/topics/oauth2)
- [Google OAuth 文档](https://developers.google.com/identity/protocols/oauth2)