May   22nd ,  2026

與 umami 搏鬥 ・上

代碼 筆記
... ... ...

　　高能量 vibe coder 的一天從早上六點爬起來給 claude 鏟屎開始……
　　內含：使用 vercel + supabase 部署 umami 作為 blog 訪客統計；暫時解決了添加多域名後無法正常使用的問題。
　　暫時的意思是雖然我不知道它是怎麼跑起來的但它現在確實能跑了！

ʚ ⸸ ɞ

　　哈哈寫這篇 blog 的時候又發現幾個細節上的小問題於是回去問了一下 claude 結果上下文超出長度它直接把整個會話的歷史記錄炸沒了，我能說什麼，我只能說還好我是能工智人，我的腦子就是數據庫……

冰箱門和大象

數據庫準備

　　首先需要註冊並創建一個 supabase 數據庫，可以直接用 github 帳號登錄，這個階段全程截圖給 AI 問下一步怎麼做就行了因為我也是這麼幹的！（
　　數據庫創建完畢之後在最上面的導航欄找到 Connect 按鈕，選擇 Direct 選項，在 Connection Method 裡選擇 Direct connection 和 Transaction pooler，把兩個鏈接都複製到文本編輯器裡備用。
　　注意：複製下來的字段是不能直接使用的，需要手動把 [YOUR-PASSWORD] 字段替換成你的 supabase 項目密碼。

Vercel 部署

　　官方文檔提供了傻瓜式一鍵部署按鈕，點擊之後就可以一鍵 fork 官方源碼倉庫並創建 vercel 項目，需要注意的是 fork 的倉庫需要保持公開才能自動更新。當然首先你要有並且登錄 github 和 vercel 的帳號這個應該不用我多說了吧
　　初次部署的時候需要創建環境變量(Environment Variables) DATABASE_URL，環境(Environment)選 Production and Preview，然後打開 Sensitive 設置，保存變量以後這個地址在前端就無法查看了，畢竟是帶了明文密碼信息的，所以這樣大概會安全一點……？需要再查看的時候回 supabase 裡重新複製就好。
　　注意：這裡需要填入 Direct connection 的鏈接（就是 5432 端口的鏈接），否則你的 vercel 會在跑完下面這三行以後就不動了：

✓ DATABASE_URL is defined.
✓ Database connection successful.
✓ Database version check successful.

　　為什麼會卡住先不管，後面鏟屎的時候會寫的（
　　Gemini 說這裡還要填一個什麼 APP_SECRET，但是我看了下官方文檔裡這個值好像是在別的平臺部署的時候用的，我在 vercel 的部署日誌裡好像沒看到需要用這個值的地方，但是加了也無所謂吧（
　　作為參考我的初次部署時間是 2m45s，如果超出這個數值太多就可以把 log 貼給 AI 問問出了什麼毛病了……
　　之後就是常規的添加自定義域名。

Umami 後臺

　　部署完成以後就可以登錄 umami 後臺了，默認用戶名是 admin，密碼是 umami，登錄後在左下角點擊頭像可以切換語言，然後就是馬上修改管理員密碼。
　　從左側菜單欄進入「網站」頁面，點擊 添加網站 輸入 blog 的標題和域名，確認之後再點擊編輯按鈕就可以進入單獨站點的設置界面。在這個界面裡會獲得一串跟蹤代碼，大概長這樣：

<script defer src="https://【umami 域名】/script.js" data-website-id="【...】"></script>

　　把這個跟蹤代碼複製到你 blog 的主 layout 文件的 <header> 裡，更新站點就大功告成……了嗎？

鏟屎！

　　跑完以上步驟以後最基本的統計功能就可以開始運轉了，但是想要舒適地使用就還會有非常多的問題……

Ad Blocker

　　首先迎來的第一個問題就是這個統計代碼屬於跟蹤腳本會被瀏覽器插件屏蔽，需要把 umami 的域名代理到 blog 域名下。這個問題很好解決可以直接讓 AI 處理，以 blog 部署在 vercel 為例：

  • 把 layout 裡的 https://【umami 域名】/script.js 改寫成 /stat/script.js
  • 在根目錄下創建 vercel.json，添加如下內容：
{
  "rewrites": [
    {
      "source": "/stats/:match*",
      "destination": "https://【umami 域名】/:match*"
    }
  ]
}

　　更新站點之後就不會再屏蔽了。

不理解但是已力竭

　　前面的都是 AI 能解決的小問題，這個問題是 AI 也解決不了只能和能工智人一起瞎貓抓死耗子的真正的屎問題……
　　總之按上面那一串步驟搭建好之後順利運行了一段時間，新站上線以後開開心心地登錄了新網址，然後「啪」的一下後臺報錯了，再「啪」的一下直接登錄都登不上了。我大驚失色翻出了 vercel 的運行日誌，具體什麼內容因為 claude 把我的聊天記錄炸了 vercel 免費版又只能看一小時的 log 已經找不到了，反正大意就是數據庫鏈接數量超出上限。
　　超出上限的原因是之前部署的時候用了 5432 端口的直連鏈接，理論上這個地方應該用 6543，但 6543 在部署的時候又會無限卡死（具體什麼情況我不記得了反正好像是 supabase 的權限問題）。具體鏟屎的過程放出來意義其實不大，我只能說 gemini 和 claude 都默認給我的加 DERECT_URL 的方案**完全屁用沒用！**從哪蒸來的賽博朊病毒！

　　總之最後的解決方案：
　　首先將 DATABASE_URL 換成 6543 端口，需要在 supabase 複製過來的 URI 後面加上一些參數，看起來像這樣：

【...】:6543/postgres?pgbouncer=true&connection_limit=1

　　然後修改 vercel 的部署命令為:

pnpm prisma generate && pnpm next build && pnpm run build-tracker && pnpm run build-recorder && pnpm run build-geo

　　最後手動新建一個 deployment 重新部署就可以正常登錄了。
　　原理是在部署的時候跳過需要 supabase 權限的步驟，包括 build-db（本身這個命令也只在初次部署的時候執行）和 check-db（看 log 基本就是這個步驟有問題），不影響後續訪客統計數據的輸入和讀取。
　　這麼一長串最前面兩句是 claude 寫的，上下文已經丟了我也懶得問他什麼原理了。後面幾個命令是我自己從源代碼的 package.json 裡翻出來的，build-tracker 是必須執行的跟蹤腳本，後面兩個對應的是頁面回放（默認關閉）和 IP 分析（對境外中文站沒什麼意義）加不加無所謂。
　　不理解的問題是 package.json 裡的 build 命令並不包含 prisma generate 和 pnpm next build，但是把這倆去掉直接用官方代碼裡的 build-app 又是一個大大的 ERROR，反正就……代碼能跑起來就不要再琢磨它是怎麼跑的了吧！

未完待續

　　理論上 umami 也有在前端（指 blog 的前端）顯示訪客統計的功能，但是 blog 建得太精緻有點影響我更新的動力（？所以暫時就先這樣吧，什麼時候想折騰了再寫下集……

評論

Loading comments...

提示