📝 docs: update docs

docs/self-hosting/advanced/server-database.zh-CN.mdx

@@ -67,6 +67,16 @@ LobeChat 默认使用客户端数据库（IndexedDB），同时也支持使用
 
 </Tabs>
 
+### 添加 `KEY_VAULTS_SECRET` 环境变量
+
+在完成数据库 DATABASE_URL 环境变量添加后，需要添加一个 `KEY_VAULTS_SECRET` 环境变量。该变量用于加密用户存储的 apikey 等敏感信息。你可以使用 `openssl rand -base64 32` 生成一个随机的 32 位字符串作为密钥。
+
+```env
+KEY_VAULTS_SECRET=jgwsK28dspyVQoIf8/M3IIHl1h6LYYceSYNXeLpy6uk=
+```
+
+同样需要将其添加到 Vercel 环境变量中。
+
 </Steps>
 
 ## 二、 配置身份验证服务
@@ -138,66 +148,172 @@ CLERK_SECRET_KEY=sk_live_xxxxxxxxxxxxxxxxxxxxxx
   src={'https://github.com/lobehub/lobe-chat/assets/28616219/fab4abb2-584b-49de-9340-813382951635'}
 ></Image>
 
-  将这个秘钥所对应的环境变量名为 `CLERK_WEBHOOK_SECRET`，将其添加到 Vercel 的环境变量中：
+这个秘钥所对应的环境变量名为 `CLERK_WEBHOOK_SECRET`：
 
-  ```env
-  CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxx
-  ```
+```env
+CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxx
+```
+
+将其添加到 Vercel 的环境变量中：
 
-  <Image
-    alt={'在 Vercel 中 添加 Clerk Webhooks 秘钥'}
-    src={'https://github.com/lobehub/lobe-chat/assets/28616219/5fdc9479-007f-46ab-9d6e-a9603e949116'}
-  ></Image>
+<Image
+  alt={'在 Vercel 中 添加 Clerk Webhooks 秘钥'}
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/5fdc9479-007f-46ab-9d6e-a9603e949116'}
+></Image>
 
 </Steps>
 
-## 三. 配置 S3 存储服务
+这样，你已经成功配置了 Clerk 身份验证服务。接下来我们将配置 S3 存储服务。
+
+## 三、 配置 S3 存储服务
 
-LobeChat 在很早以前就支持了多模态 的 AI 会话，其中涉及到图片上传给 AI 的功能点。在客户端数据库方案中，图片文件是直接以二进制数据存储在本地数据库中的。但在服务端数据库中这个方案不可行。因此我们需要配置 S3 存储服务来存储图片文件。
+LobeChat 在很早以前就支持了多模态 的 AI 会话，其中涉及到图片上传给 AI 的功能。在客户端数据库方案中，图片文件直接以二进制数据存储在浏览器 indexedDB 数据库，但在服务端数据库中这个方案并不可行。我们需要配置 S3 存储服务来存储大量的图片文件，同时 S3 也可以作为文件上传的存储方案。
+
+【S3 的30字简要介绍】。
 
   <Steps>
 
-请确保你已经配置好 S3 存储
+    ### 配置并获取 S3 存储桶
 
-1. 前往你的 S3 服务提供商（如 AWS S3、Cloudflare R2 等）并创建一个新的存储桶（Bucket）。
-2. 获取 `S3_ACCESS_KEY_ID` 和 `S3_SECRET_ACCESS_KEY`。
-3. 设置存储桶的域名（`NEXT_PUBLIC_S3_DOMAIN`）和终端节点（`S3_ENDPOINT`）。
-4. 将这些值填入 `.env` 文件中的相应字段。
+    你需要前往你的 S3 服务提供商（如 AWS S3、Cloudflare R2 等）并创建一个新的存储桶（Bucket）。接下来以 Cloudflare R2 为例，介绍创建流程。
 
-</Steps>
+    下图是 Cloudflare R2 的界面：
+
+    <Image
+      alt={'Cloudflare R2 存储界面'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/41f7f677-0153-4a96-b849-5ac9b7ebefee'}
+    ></Image>
+
+    创建存储桶时将指定其名称，然后点击创建。
+    <Image
+      alt={'R2 创建存储桶'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/9c0d184c-3169-40fa-9115-011cfffb9ca7'}
+    ></Image>
+
+    ### 获取存储桶相关环境变量
+
+    在 R2 存储桶的设置中，可以看到桶配置的信息：
 
-### 3. 配置 S3
+    <Image
+      alt={'查看存储桶的相关信息'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/2ceb210c-eca0-4439-ba27-8734d4ebb3ee'}
+    ></Image>
 
-如果你的应用需要上传图片，请确保你已经配置好 S3 存储，并将 `NEXT_PUBLIC_S3_DOMAIN`、`S3_ACCESS_KEY_ID`、`S3_SECRET_ACCESS_KEY`、`S3_ENDPOINT` 和 `S3_BUCKET` 填入 `.env` 文件。
+其对应的环境变量为：
 
-**步骤：**
+```env
+# 存储桶的名称
+S3_BUCKET=lobechat
+# 存储桶的请求端点
+S3_ENDPOINT=https://0b33a03b5c993fd2f453379dc36558e5.r2.cloudflarestorage.com
+# 存储桶对外的访问域名
+NEXT_PUBLIC_S3_DOMAIN=https://s3-dev.your-domain.com
+```
+
+    ### 获取 S3 密钥环境变量
 
-### 4. 部署到 Vercel
+    你需要获取 S3 的访问密钥，以便 LobeChat 的服务端有权限访问 S3 存储服务。在 R2 中，你可以在账户详情中配置访问密钥：
 
-**步骤：**
+    <Image
+      alt={'查看存储桶的访问秘钥'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/be0c95c0-6693-44ee-a490-7e8dfaa8b34d'}
+    ></Image>
 
-1. 确保你已经将 LobeChat 项目代码推送到 GitHub 仓库。
-2. 访问 [Vercel](https://vercel.com) 并登录。
-3. 点击 “New Project” 并选择你的 GitHub 仓库。
-4. 在项目设置中，添加环境变量，将 `.env` 文件中的配置逐项添加到 Vercel 的环境变量设置中：
+    点击右上角按钮创建 API token，进入创建 API Token 页面
 
-- 前往 Vercel 项目的 “Settings” 页面。
-- 点击 “Environment Variables”。
-- 逐项添加 `.env` 文件中的每个变量及其值。
+    <Image
+      alt={'创建对应 API token'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/7b0ea46c-5157-40a8-888f-f47664a4884f'}
+    ></Image>
 
-5. 点击 “Deploy” 按钮，Vercel 将自动开始部署你的项目。
+    鉴于我们的服务端数据库需要读写 S3 存储服务，因此权限需要选择读与写，并只选择我们所创建的存储桶，然后点击创建。
 
-### 5. 验证部署
+    <Image
+      alt={'配置 API token 权限'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/d6f5a918-7b50-4d6e-83a6-3894ab930ddf'}
+    ></Image>
 
-部署完成后，访问你的 Vercel 项目 URL，确保应用能够正常运行。如果遇到任何问题，请检查 Vercel 的日志输出，并根据提示进行修复。
+    创建完成后，就可以看到对应的 S3 API token
 
-**步骤：**
+    <Image
+      alt={'复制 API token'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/763b18f9-2b5f-44bb-a479-9b56d46f7397'}
+    ></Image>
 
-1. 部署完成后，访问 Vercel 分配的项目 URL。
-2. 检查应用的各项功能是否正常运行，如数据库连接、用户身份验证和图片上传等。
-3. 如遇到问题，前往 Vercel 项目的 “Logs” 页面查看详细的错误日志。
+    其对应的环境变量为：
+
+```env
+S3_ACCESS_KEY_ID=9998d6757e276cf9f1edbd325b7083a6
+S3_SECRET_ACCESS_KEY=55af75d8eb6b99f189f6a35f855336ea62cd9c4751a5cf4337c53c1d3f497ac2
+```
 
-至此，你已经成功在 Vercel 上部署了 Server 版 LobeChat。如果你有任何问题或建议，欢迎在 GitHub 仓库中提出讨论。
+### 在 Vercel 中添加对应的环境变量
+
+    不同 S3 服务商获取所需环境变量的步骤可能有所不同，但最终获得到的环境变量应该都是一致的：
+
+```env
+# S3 秘钥
+S3_ACCESS_KEY_ID=9998d6757e276cf9f1edbd325b7083a6
+S3_SECRET_ACCESS_KEY=55af75d8eb6b99f189f6a35f855336ea62cd9c4751a5cf4337c53c1d3f497ac2
+
+# 存储桶的名称
+S3_BUCKET=lobechat
+# 存储桶的请求端点
+S3_ENDPOINT=https://0b33a03b5c993fd2f453379dc36558e5.r2.cloudflarestorage.com
+# 存储桶对外的访问域名
+NEXT_PUBLIC_S3_DOMAIN=https://s3-dev.your-domain.com
+
+# 桶的区域，如 us-west-1，一般来说不需要添加，但某些服务商则需要配置
+# S3_REGION=us-west-1
+```
+
+然后将上述环境变量填入 Vercel 的环境变量中：
+
+    <Image
+      alt={'在  Vercel 中添加 S3 的环境变量'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/cd74152d-0ae8-44fd-b815-3307c56a3c18'}
+    ></Image>
+
+    ### 配置跨域
+
+    由于 S3 存储服务往往是一个独立的网址，因此需要配置跨域访问。
+
+    在 R2 中，你可以在存储桶的设置中找到跨域配置：
+
+    <Image
+      alt={'Cloudflare R2 的跨域设置'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/ab008be7-26b2-4b78-8bd9-24301bf34d23'}
+    ></Image>
+
+    添加跨域规则，允许你的域名（在上文是 `https://your-project.vercel.app`）来源的请求：
+
+    <Image
+      alt={'配置允许你的站点域名'}
+      src={'https://github.com/lobehub/lobe-chat/assets/28616219/dfcc2cb3-2958-4498-a8a4-51bec584fe7d'}
+    ></Image>
+
+示例配置如下：
+
+```json
+[
+  {
+    "AllowedOrigins": ["https://your-project.vercel.app"],
+    "AllowedMethods": ["GET", "PUT", "HEAD", "POST", "DELETE"],
+    "AllowedHeaders": ["*"]
+  }
+]
+```
+
+配置后点击保存即可。
+
+</Steps>
+
+### 四、部署并验证
+
+  <Steps>
+
+
+</Steps>
 
 ## 服务端数据库所需环境变量