Files
record-app-next/document/AWS_S3_SETUP.md
2025-07-31 17:05:07 +08:00

142 lines
3.4 KiB
Markdown
Raw 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.

# AWS S3 配置指南
## 1. 创建 S3 Bucket
1. 登录 AWS 控制台
2. 进入 S3 服务
3. 点击"创建存储桶"
4. 输入存储桶名称(如:`my-audio-recordings`
5. 选择区域(建议选择离用户最近的区域)
6. 保持默认设置,点击"创建存储桶"
## 2. 配置 Bucket 权限(重要!)
### 必须配置公开读取权限
**当前问题:浏览器无法直接访问 S3 文件,需要配置公开读取权限**
1. 进入你的 S3 Bucket
2. 点击"权限"标签
3. **取消勾选"阻止公有访问"**
- 取消勾选"阻止公有访问"
- 点击"保存更改"
- 在确认对话框中输入 "confirm"
4. **添加存储桶策略**
- 在"存储桶策略"部分点击"编辑"
- 添加以下策略:
```json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-bucket-name/*"
}
]
}
```
**注意:**
-`your-bucket-name` 替换为你的实际 Bucket 名称
- 这个策略允许任何人读取 Bucket 中的文件
- 如果需要更严格的权限控制,可以考虑使用 CloudFront CDN
## 3. 配置 CORS重要
**必须配置 CORS 才能解决上传问题:**
1. 进入你的 S3 Bucket
2. 点击"权限"标签
3. 找到"CORS"部分,点击"编辑"
4. 添加以下 CORS 配置:
```json
[
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
"AllowedOrigins": ["http://localhost:3000", "https://your-domain.com"],
"ExposeHeaders": ["ETag"],
"MaxAgeSeconds": 3000
}
]
```
**注意:**
-`your-domain.com` 替换为你的实际域名
- 开发环境保留 `http://localhost:3000`
- 生产环境添加你的实际域名
## 4. 创建 IAM 用户
1. 进入 IAM 服务
2. 点击"用户" → "创建用户"
3. 输入用户名(如:`audio-recorder-app`
4. 选择"程序化访问"
5. 点击"下一步:权限"
6. 选择"直接附加策略"
7. 搜索并选择 `AmazonS3FullAccess`(或创建自定义策略)
8. 完成创建
## 5. 获取访问密钥
1. 点击创建的用户
2. 点击"安全凭据"标签
3. 点击"创建访问密钥"
4. 选择"应用程序运行在 AWS 外部"
5. 下载 CSV 文件或复制 Access Key ID 和 Secret Access Key
## 6. 配置环境变量
复制 `env.example``.env.local`,并填入你的配置:
```bash
# AWS S3 Configuration
AWS_ACCESS_KEY_ID="your-access-key-id"
AWS_SECRET_ACCESS_KEY="your-secret-access-key"
AWS_REGION="us-east-1" # 替换为你的区域
AWS_S3_BUCKET="your-bucket-name"
```
## 7. 自定义 IAM 策略(可选)
为了安全,建议创建自定义策略,只允许特定操作:
```json
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": ["s3:PutObject", "s3:GetObject", "s3:DeleteObject"],
"Resource": "arn:aws:s3:::your-bucket-name/recordings/*"
}
]
}
```
## 8. 测试配置
1. 启动开发服务器:`npm run dev`
2. 尝试录制并上传音频
3. 检查 S3 Bucket 中是否出现文件
4. 验证音频播放功能
## 注意事项
- 确保 S3 Bucket 名称全局唯一
- **重要:必须配置公开读取权限才能播放音频**
- **重要:必须配置 CORS 才能解决上传问题**
- 定期轮换访问密钥
- 监控 S3 使用量和费用
- 考虑设置生命周期策略自动清理旧文件
- 生产环境建议使用 CDN 加速音频播放