chore(doc):improve UX message clarity and add cache optimization

- Update duplicate room ID messages across all languages for better clarity - Enhance cached ID tips with double-click save mode functionality - Add image optimization cache configuration to Nginx - Document production environment variable sync requirements - Add NEXT_IMAGE_UNOPTIMIZED to production config
2025-10-29 23:12:09 +08:00
parent b636953770
commit 3d222fd316
11 changed files with 56 additions and 23 deletions
@@ -94,6 +94,12 @@ server {
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
+        
+        # Add cache optimization for image optimization
+        proxy_cache_valid 200 1d;
+        add_header Cache-Control "public, max-age=31536000, immutable";
+        proxy_read_timeout 60s;
+        proxy_connect_timeout 5s;
    }
    # 2. Handle static files under the public directory and Next.js dynamic requests
    #    This location should be after specific proxies (like /api/, /socket.io/),
@@ -294,6 +294,22 @@ This section describes how to build locally and deploy only the built artifacts
 - Assumes you have completed the first-time deployment and can access the app in production.
 - The frontend runs in Next.js Standalone mode (configured in `ecosystem.config.js`), so the server does not need Next CLI or frontend dependencies installed.

+0. Sync frontend production environment variables (important)
+
+   The local build reads variables from `frontend/.env.production` (e.g., `NEXT_PUBLIC_API_URL`, TURN settings, and build-time flags like `NEXT_IMAGE_UNOPTIMIZED`). To ensure the build matches production behavior, copy the production environment file from the server to your local machine before running `bash build-and-deploy.sh`.
+
+   - Example (sync from server to local):
+     ```bash
+     # Assuming the server project root is /root/PrivyDrop
+     scp root@<server>:/root/PrivyDrop/frontend/.env.production ./frontend/.env.production
+     ```
+   - If the file does not exist on the server yet, create it from the example and keep it consistent with production:
+     ```bash
+     cp frontend/.env_production_example frontend/.env.production
+     # Fill in NEXT_PUBLIC_API_URL, TURN_*, NEXT_IMAGE_UNOPTIMIZED, etc.
+     ```
+   - Note: `build-and-deploy.sh` does not auto-create or overwrite `frontend/.env.production`. Make sure it exists locally and matches production; otherwise, the built behavior may differ from the server (e.g., image optimization toggles).
+
 1. Prepare deployment configuration

   - From the project root:
@@ -293,6 +293,23 @@ PM2 是一个强大的 Node.js 进程管理器，我们将用它来运行后端
 - 默认假设你已按“首次部署”完成环境配置（包括 PM2、Nginx/证书等），并能正常访问应用。
 - 默认使用前端 Next.js Standalone 运行方式（ecosystem.config.js 已配置），服务器无需安装前端依赖和 next CLI。

+0. 同步前端生产环境变量（重要）
+
+   本地构建会读取 `frontend/.env.production` 中的变量（例如 `NEXT_PUBLIC_API_URL`、TURN 配置、以及构建期开关 `NEXT_IMAGE_UNOPTIMIZED` 等）。
+   为确保构建产物与线上一致，请在执行 `bash build-and-deploy.sh` 之前，将“线上部署环境的 `frontend/.env.production`”拷贝到本地对应路径。
+
+   - 示例（从服务器同步到本地）：
+     ```bash
+     # 假设服务器项目根目录为 /root/PrivyDrop
+     scp root@<server>:/root/PrivyDrop/frontend/.env.production ./frontend/.env.production
+     ```
+   - 如线上暂未建立该文件，可基于示例创建并与线上保持一致：
+     ```bash
+     cp frontend/.env_production_example frontend/.env.production
+     # 按需填写 NEXT_PUBLIC_API_URL、TURN_*、NEXT_IMAGE_UNOPTIMIZED 等
+     ```
+   - 说明：`build-and-deploy.sh` 不会自动生成/覆盖你的 `frontend/.env.production`，请确保本地文件存在且与线上一致，否则可能出现与线上不一致的行为（例如图片优化开关不同导致的差异）。
+
 1. 准备部署配置

   - 在项目根目录复制示例配置：
@@ -2,4 +2,6 @@ NEXT_PUBLIC_API_URL=https://www.privydrop.app

 NEXT_PUBLIC_TURN_HOST=turn.privydrop.app
 NEXT_PUBLIC_TURN_USERNAME=[Username]
-NEXT_PUBLIC_TURN_PASSWORD=[Password]
+NEXT_PUBLIC_TURN_PASSWORD=[Password]
+
+NEXT_IMAGE_UNOPTIMIZED=true
@@ -284,8 +284,7 @@ export const de: Messages = {
        "Warten auf den Empfänger, der sich verbindet. Bitte lassen Sie diese Seite geöffnet, bis die Übertragung abgeschlossen ist. Auf dem Desktop können Sie den Browser minimieren oder zwischen Tabs wechseln. Auf mobilen Geräten sollte der Browser im Vordergrund bleiben.",
      joinRoom: {
        EmptyMsg: "Warnung, die Raum-ID ist leer",
-        DuplicateMsg:
-          "Die eingegebene Raum-ID ist doppelt. Bitte geben Sie sie erneut ein.",
+        DuplicateMsg: "Diese Raum-ID ist bereits vergeben. Bitte wählen Sie eine andere ID.",
        successMsg:
          "Raum erfolgreich betreten! Schließen Sie diese Seite nicht, bis die Übertragung abgeschlossen ist. (Am Desktop können Sie den Browser minimieren oder Tabs wechseln; auf mobilen Geräten bringen Sie den Browser nicht in den Hintergrund.)",
        notExist:
@@ -340,8 +339,7 @@ export const de: Messages = {
        saveId_dis: "ID speichern",
        useCachedId_dis: "Gespeicherte ID verwenden",
        saveId_tips: "Aktuelle ID für spätere schnelle Nutzung speichern",
-        useCachedId_tips:
-          "Zuvor gespeicherte ID verwenden, um Tippen zu vermeiden",
+        useCachedId_tips: "Gespeicherte ID schnell nutzen; Doppelklick zum Speichermodus wechseln",
      },
      // New: cache messages
      saveId_success: "Erfolgreich im Cache gespeichert",
@@ -278,7 +278,7 @@ export const en: Messages = {
        "Waiting for receiver to connect. Please keep this page open until the transfer is complete. On desktop, you can minimize the browser or switch tabs. On mobile, please keep the browser in the foreground.",
      joinRoom: {
        EmptyMsg: "Warning, the roomID is empty",
-        DuplicateMsg: "The room ID you entered is duplicate. Please re-enter.",
+        DuplicateMsg: "This room ID is already in use. Please choose another ID.",
        successMsg:
          "Successfully joined the room! Do not close this page until the transfer is complete. (On desktop, you can minimize the browser or switch tabs; on mobile, do not move the browser to the background.)",
        notExist:
@@ -331,8 +331,7 @@ export const en: Messages = {
        saveId_dis: "Save ID",
        useCachedId_dis: "Use cached ID",
        saveId_tips: "Save current ID for quick reuse later",
-        useCachedId_tips:
-          "Quickly use the previously saved ID to avoid typing",
+        useCachedId_tips: "Quick use saved ID; double-click to switch save mode",
      },
      // New: cache messages
      saveId_success: "Saved to cache",
@@ -278,8 +278,7 @@ export const es: Messages = {
        "Esperando que el receptor se conecte. Por favor mantén esta página abierta hasta que se complete la transferencia. En escritorio, puedes minimizar el navegador o cambiar pestañas. En móvil, por favor mantén el navegador en primer plano.",
      joinRoom: {
        EmptyMsg: "Advertencia, el ID de sala está vacío",
-        DuplicateMsg:
-          "El ID de sala que ingresaste está duplicado. Por favor, vuelve a ingresar.",
+        DuplicateMsg: "Este ID de sala ya está en uso. Por favor, elige otro ID.",
        successMsg:
          "¡Ingreso exitoso al cuarto! No cierres esta página hasta que se complete la transferencia. (En escritorio, puedes minimizar el navegador o cambiar de pestaña; en móvil, no lleves el navegador al fondo.)",
        notExist:
@@ -335,8 +334,7 @@ export const es: Messages = {
        saveId_dis: "Guardar ID",
        useCachedId_dis: "Usar ID en caché",
        saveId_tips: "Guarda el ID actual para reutilizarlo rápidamente",
-        useCachedId_tips:
-          "Usa el ID guardado previamente para evitar escribir",
+        useCachedId_tips: "Usar ID guardado rápido; doble clic para cambiar modo guardar",
      },
      // New: cache messages
      saveId_success: "Guardado en caché",
@@ -284,8 +284,7 @@ export const fr: Messages = {
        "En attente de la connexion du destinataire. Veuillez garder cette page ouverte jusqu'à la fin du transfert. Sur ordinateur, vous pouvez minimiser le navigateur ou changer d'onglet. Sur mobile, veuillez garder le navigateur au premier plan.",
      joinRoom: {
        EmptyMsg: "Avertissement, l'ID de salle est vide",
-        DuplicateMsg:
-          "L'ID de salle que vous avez entré est en double. Veuillez le réentrer.",
+        DuplicateMsg: "Cet ID de salle est déjà utilisé. Veuillez choisir un autre ID.",
        successMsg:
          "Rejoignez le salon avec succès ! Ne fermez pas cette page tant que le transfert n'est pas terminé. (Sur ordinateur, vous pouvez réduire le navigateur ou changer d'onglet ; sur mobile, ne mettez pas le navigateur en arrière-plan.)",
        notExist:
@@ -343,8 +342,7 @@ export const fr: Messages = {
        useCachedId_dis: "Utiliser l’ID en cache",
        saveId_tips:
          "Enregistrez l’ID actuel pour une réutilisation rapide",
-        useCachedId_tips:
-          "Utilisez l’ID précédemment enregistré pour éviter la saisie",
+        useCachedId_tips: "Utiliser ID enregistré rapide; double-clic pour changer mode sauvegarde",
      },
      // New: cache messages
      saveId_success: "Enregistré dans le cache",
@@ -274,7 +274,7 @@ export const ja: Messages = {
        "受信者が接続するのを待っています。転送が完了するまでこのページを開いたままにしてください。デスクトップでは、ブラウザを最小化したり、タブを切り替えたりできます。モバイルでは、ブラウザをフォアグラウンドに保ってください。",
      joinRoom: {
        EmptyMsg: "警告、ルームIDが空です",
-        DuplicateMsg: "入力したルームIDが重複しています。再入力してください。",
+        DuplicateMsg: "このルームIDは既に使用されています。別のIDをご利用ください。",
        successMsg:
          "ルームに成功して参加しました！転送が完了するまでこのページを閉じないでください。（PCではブラウザを最小化したりタブを切り替えたりできます。モバイルではブラウザをバックグラウンドにしないでください。）",
        notExist:
@@ -327,7 +327,7 @@ export const ja: Messages = {
        saveId_dis: "ID を保存",
        useCachedId_dis: "保存済みIDを使用",
        saveId_tips: "現在のIDを保存して次回すぐに使えるようにします",
-        useCachedId_tips: "以前に保存したIDを使って入力を省略できます",
+        useCachedId_tips: "保存済みIDを即使用；ダブルクリックで保存モード切替",
      },
      // New: cache messages
      saveId_success: "キャッシュに保存しました",
@@ -272,7 +272,7 @@ export const ko: Messages = {
        "수신자가 연결될 때까지 기다리는 중입니다. 전송이 완료될 때까지 이 페이지를 열어 두세요. 데스크톱에서는 브라우저를 최소화하거나 탭을 전환할 수 있습니다. 모바일에서는 브라우저를 포그라운드에 유지하세요.",
      joinRoom: {
        EmptyMsg: "경고, 방 ID가 비어 있습니다",
-        DuplicateMsg: "입력한 방 ID가 중복되었습니다. 다시 입력해주세요.",
+        DuplicateMsg: "이 방 ID는 이미 사용 중입니다. 다른 ID를 선택해주세요.",
        successMsg:
          "방에 성공적으로 입장했습니다! 전송이 완료되기 전까지 현재 페이지를 닫지 마세요. (데스크톱에서는 브라우저를 최소화하거나 탭을 전환할 수 있으며, 모바일에서는 브라우저를 백그라운드로 이동하지 마세요.)",
        notExist:
@@ -326,8 +326,7 @@ export const ko: Messages = {
        useCachedId_dis: "저장된 ID 사용",
        saveId_tips:
          "현재 ID를 저장하여 다음에 빠르게 사용할 수 있어요",
-        useCachedId_tips:
-          "이전에 저장한 ID를 사용하여 입력을 줄입니다",
+        useCachedId_tips: "저장된 ID 빠르게 사용；더블클릭으로 저장 모드 전환",
      },
      // New: cache messages
      saveId_success: "캐시에 저장되었습니다",
@@ -259,7 +259,7 @@ export const zh: Messages = {
        "等待接收方连接。请保持此页面打开直到传输完成。在桌面端，您可以最小化浏览器或切换标签页。在移动端，请保持浏览器在前台。",
      joinRoom: {
        EmptyMsg: "警告，房间ID为空",
-        DuplicateMsg: "您输入的房间ID重复，请重新输入。",
+        DuplicateMsg: "该房间ID已被使用，请更换其他ID。",
        successMsg:
          "成功加入房间！在被接收之前不要关闭当前页（电脑端可以最小化浏览器或切换tab页，移动端不要将浏览器切到后台）。",
        notExist: "您尝试加入的房间不存在。只有发送方可以创建房间。",
@@ -312,7 +312,7 @@ export const zh: Messages = {
        saveId_dis: "保存ID",
        useCachedId_dis: "使用缓存ID",
        saveId_tips: "保存ID后，下次可以快捷使用该ID",
-        useCachedId_tips: "可以快捷使用之前保存的ID,避免手动输入",
+        useCachedId_tips: "快捷使用已保存ID；双击可切换保存模式",
      },
      // New: cache messages
      saveId_success: "缓存成功",