域名米表 - Vercel 部署指南

以下内容为AI概括整理，有一定静态部署基础的一看就懂，程序粗糙 可自行修改开发

項目結構

domain-market/
├── api/
│   ├── auth.js           ← 密碼驗證（環境變量）
│   └── data.js           ← Redis 數據讀寫（GET 公開 / POST 認證）
├── index.html            ← 前台域名展示頁
├── contact.html          ← 聯絡我們頁面
├── admin.html            ← 後台管理頁
├── css/style.css         ← 共享樣式
├── js/
│   ├── sync.js           ← 數據同步層（init 拉取 + save 推送）
│   ├── data.js           ← 數據層（localStorage + Redis 雙寫）
│   ├── main.js           ← 前台邏輯
│   └── admin.js          ← 後台邏輯
├── package.json          ← 含 @upstash/redis 依賴
├── vercel.json
└── .env.example

部署步驟

1. 上傳到 GitHub

把整個目錄推送到 GitHub 倉庫。

2. 在 Vercel 導入項目

1. 打開 vercel.com，登入後點 New Project
2. 選擇你的 GitHub 倉庫
3. Root Directory 設為 domain-market（重要！）
4. Framework Preset 選 Other（自動檢測即可）
5. Build Command 留空（純靜態，不需要構建）
6. 點 Deploy

3. 安裝 Upstash Redis（關鍵步驟）

⚠️ Vercel KV 已於 2024 年底廢棄，現在用 Upstash Redis 替代。

1. 進入 Vercel 項目 → 點頂部 Storage 標籤頁
2. 點 Create Database → 選 Upstash Redis（如果看不到，直接訪問 Vercel Marketplace 搜索 "redis"）
3. 取個名字（如 domain-market-db），選擇區域（建議選離用戶近的）
4. 點 Connect to Project / Create & Connect
5. 安裝完成後，Vercel 會自動把以下環境變量注入到項目：
   • UPSTASH_REDIS_REST_URL
   • UPSTASH_REDIS_REST_TOKEN

4. 設置密碼環境變量

1. 進入項目 Settings → Environment Variables
2. 添加變量：
   • Name: ADMIN_PASSWORD
   • Value: 你的管理密碼（例如 MySecurePass2024!）
3. 點 Save

5. 重新部署

回到 Deployments，點最新一條旁邊的 ... → Redeploy

6. 完成驗證

• 打開 https://你的項目.vercel.app/admin.html
• 輸入你設置的 ADMIN_PASSWORD 密碼
• 成功登入後，添加幾個域名
• 打開 https://你的自定義域名/ → 應該能看到剛添加的域名

數據存儲架構

管理員添加域名
    ↓
DomainDB.save() → localStorage（即時） + POST /api/data → Upstash Redis（持久化）
                                                                    ↓
訪客打開任意域名 → DataSync.init() → GET /api/data → Redis 讀取 → 覆蓋 localStorage → 顯示

安全說明

API 權限

• GET /api/data — 公開，任何人可讀取域名列表和網站設置
• POST /api/data — 需認證，只有登入後的管理員才能寫入

修改密碼

到 Vercel 項目 Settings → Environment Variables 修改 ADMIN_PASSWORD，然後 Redeploy。

從舊版升級（已有數據遷移）

如果之前已在 vercel.app 域名上添加過域名（存在瀏覽器 localStorage）：

1. 打開 https://舊域名.vercel.app/admin.html
2. 點「導出 JSON」下載備份
3. 確認 Upstash Redis 已安裝並連接到項目
4. 重新部署（Redeploy）使新版代碼生效
5. 打開 https://你的域名/admin.html，登入
6. 點「匯入 JSON」上傳剛下載的備份
7. 數據自動寫入 Redis，之後所有域名都能看到

本地開發

不裝 Redis 也能跑。DataSync 會檢測到 Redis 不可用，自動回退到純 localStorage 模式：

cd domain-market
python -m http.server 8765
# 打開 http://localhost:8765/