Google Analytics應該是現今網路使用最廣泛的網站流量分析服務。透過在網頁中嵌入追蹤碼,Google Analytics能夠幫我們收集網站的流量來源,同時自動分析跳出率、轉換率等核心指標。但是對於大部分中小型站點而言,使用Google Analytics並不是最理想的選擇,因為它太複雜了。
umami.is則可以當作是Google Analytics的精簡版解決方案,它完全免費且開放原始碼,非常適合中小型網站的網路流量統計分析。相對於複雜的Google Analytics,umami.is的界面也更加簡潔,只關注於核心指標,並方便分享出去。
umami示範頁面
作為一款開放原始碼的解決方案,umami.is並不提供官方的委託管理服務,而是需要自行部署。提到部署,你可能想到需要使用自己的伺服器或租用雲端主機。不用擔心,接下來我將會介紹利用網路上現成的無伺服器解決方案,零成本、零門檻部署可靠的umami.is服務。
前期準備
Serverless無伺服器計算架構近年來逐漸火熱,這裡的無伺服器並不意味著無需伺服器參與計算,而是指開發者不必過多關心底層伺服器的狀態、性能、資源等。因為這一切由雲端服務商提供,並動態管理機器資源的分配。所以為了達到零成本部署的目標,我們需要選擇一些免費可靠的Serverless服務。
根據umami.is官方文案的說明,其服務需要運作在Node.js環境中,且需要交接到MySQL或者PostgreSQL數據庫。所以,接下來我們會使用到免費可靠的Vercel靜態站點託付管理服務,以及同樣免費可靠的PostgreSQL數據庫服務商Supabase。
那麼正式開始之前,你需要做的第一件事是註冊一個GitHub帳號。為什麼註冊GitHub呢?因為我們後續要複製umami.is主倉庫程式碼,同時透過GitHub帳號直接登入Vercel和Supabase,從而不需要額外再註冊相關平台了。
註冊好GitHub帳號之後,你需要完成3個步驟:
Fork代碼庫並登入到Vercel和Supabase
- 造訪umami.is代碼庫,點擊右上方Fork到自己的帳號。
- 訪問Vercel註冊頁面,點擊使用GitHub登入到Vercel。
- 訪問Supabase註冊頁面,點擊使用GitHub登入到Supabase。
至此,準備工作大功告成,是不是非常簡單?
創立數據庫
我們需要先在Supabase的主要界面中找到NewProject按鍵創立一個新的數據庫。名字可以使用umami,然後設定一個自己記得住的數據庫密碼。下方的Region區域選擇NortheastAsia(Tokyo)東京區域。Supabase本身使用了AWS雲端服務,東京區域的訪問速度還是比較理想的。
創立自己的umami數據庫
創立好之後,等待數據庫初始化完成。接下來,我們需要向數據庫中寫入umami.is所需的基礎數據結構。打開umami.is代碼庫,找到其預先提供的PostgreSQL初始化SQL語法 (schema.postgresql.sql)。
PostgreSQL初始化SQL語句
接下來,我們回到初始化完成的Supabase數據庫的設定頁面,找到左側的SQL選項,選中預設的Query-1查詢面板。然後,完整複製上方schema.postgresql.sql文件中的SQL語法貼上到查詢對話框中,點擊RUN執行。
創立預設的數據庫結構
幾秒後,Supabase會返回Success.Norowsreturned的提示,此時回到Supabase的Tables面板中,你可以看到多出了5張數據表,這也就是umami.is所需的初始化數據結構。
部署umami.is
接下來,我們可以正式開始部署umami.is了。打開Vercel主面板,點擊右上角NewProject創立一個新的項目。創立項目的頁面中,會自動加載你GitHub帳號下方的代碼庫。還記得準備步驟Fork的umami.is倉庫嗎?選中即可。
使用Vercel部署umami項目
所有的設定都可以使用預設值。唯一需要自定義的是環境變數,我們需要傳入相關的數據庫連結參數。找到EnvironmentVariables一項並展開,首先添加數據庫連接的環境變數。
DATABASE_URL:postgresql://username:mypassword@localhost:5432/mydb
值得注意的是,上方數據庫連結中的參數需要使用實際值,你需要到Supabase的設定頁面中查看。如下圖所示,如果我一開始設定的數據庫密碼是123456,那麼DATABASE_URL實際應該為:
DATABASE_URL:postgresql://postgres:123456@db.vihtqhmdpnvautwcvkmh.supabase.co:5432/postgres
查看Supabase設定項中的PostgreSQL配置
請注意,數據庫連結中的密碼以你在準備步驟設定的實際密碼為準,其他參數以你的Supabase設定頁面提供的為準。然後,我們還需要添加第二組環境變數HASH_SALT,它的值可以是任意隨機英文字符串,比如我使用了我的用戶名HUHUHANG,你也可以自定義其他隨機字符串。
HASH_SALT:任意隨機英文字符串。
添加好的DATABASE_URL和HASH_SALT環境變數
兩組環境變數添加完成之後的結果如上圖所示。設定完成之後,點擊Deploy部署項目。
測試和設定
至此,主要步驟已經順利完成,你需要做的只是耐心等待項目部署完畢。完成之後,Vercel會自動跳轉到項目主頁,並隨機分配一個區區域名稱稱。點擊Visit訪問項目,umami預設的後台登入的用戶名是admin,密碼是umami。登入之後,即可看到下方右圖的界面。
測試並登入到部署完成的umami後台
一切大功告成,我們已經順利部署了umami.is服務。接下來,我們還可以做幾件事情個人化你的umami.is服務。
自定義區域名稱
首先是設定一個獨立區域名稱,當然前提條件是你有自己的區域名稱,沒有的話可以到任意區域名稱服務商(阿里雲端、騰訊雲端等)購買。當然你也可以一直使用Vercel自動分配的區域名稱。
重設umami密碼並綁定站點
不要忘記到umami後台重設預設的管理員密碼。同時,你可以新建站點並獲取到數據追蹤代碼嵌入到你的站點中。
重設後台密碼並獲取站點追蹤代碼
這裡非常推薦開啟「啟用共享連結」的選項,這是umami的一大特色,可以方便分享你的網站訪問數據。同時當你自己查看時,可以免登入。你可以訪問我的示範分享頁面。
常見問題和小總結
至此,我們透過網路現有的資源零成本部署了自己的umami網站數據追蹤服務。最後列舉幾個大家可能關心的問題。
Q:Vercel和Supabase是免費的嗎?我能用多久?
A:目前Vercel的個人帳號完全免費,企業帳號才需要付費。Supabase的免費數據庫存在500MB的限制,對於中小型網站這個容量理論上夠用很多年了。
Q:umami後續如何升級?
A:Vercel的部署是自動觸發和完成的,也就是說當GitHub代碼庫更新時,Vercel會幫你自動部署上線最新版本的umami。你可以不定期訪問你Fork後的代碼庫,選中Fetchupstream從umami官方倉庫同步最新的代碼後即可自動升級。當然,你還可以從一開始直接部署官方倉庫的代碼,完全跟隨官方版本迭代升級。
umami主倉庫代碼自動升級
總之,如果你擁有自己的獨立部落格或者正在營運中小型網站,非常推薦嘗試一下umami,它真的很不錯。
本文授權轉載自:少數派
【熱門焦點】
責任編輯:傅珮晴