精簡版GA?零成本、低門檻打造專屬數據分析工具,umami.is部署教學一次看
精簡版GA?零成本、低門檻打造專屬數據分析工具,umami.is部署教學一次看

Google Analytics應該是現今網路使用最廣泛的網站流量分析服務。透過在網頁中嵌入追蹤碼,Google Analytics能夠幫我們收集網站的流量來源,同時自動分析跳出率、轉換率等核心指標。但是對於大部分中小型站點而言,使用Google Analytics並不是最理想的選擇,因為它太複雜了。

umami.is則可以當作是Google Analytics的精簡版解決方案,它完全免費且開放原始碼,非常適合中小型網站的網路流量統計分析。相對於複雜的Google Analytics,umami.is的界面也更加簡潔,只關注於核心指標,並方便分享出去。

 umami示範頁面
圖/ 少數派sspai

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
圖/ 少數派sspai

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
圖/ 少數派sspai

PostgreSQL初始化SQL語句

接下來,我們回到初始化完成的Supabase數據庫的設定頁面,找到左側的SQL選項,選中預設的Query-1查詢面板。然後,完整複製上方schema.postgresql.sql文件中的SQL語法貼上到查詢對話框中,點擊RUN執行。

PostgreSQL
圖/ 少數派sspai

創立預設的數據庫結構

幾秒後,Supabase會返回Success.Norowsreturned的提示,此時回到Supabase的Tables面板中,你可以看到多出了5張數據表,這也就是umami.is所需的初始化數據結構。

umami
圖/ 少數派sspai

部署umami.is

接下來,我們可以正式開始部署umami.is了。打開Vercel主面板,點擊右上角NewProject創立一個新的項目。創立項目的頁面中,會自動加載你GitHub帳號下方的代碼庫。還記得準備步驟Fork的umami.is倉庫嗎?選中即可。

使用Vercel部署umami項目

所有的設定都可以使用預設值。唯一需要自定義的是環境變數,我們需要傳入相關的數據庫連結參數。找到EnvironmentVariables一項並展開,首先添加數據庫連接的環境變數。

umami
圖/ 少數派sspai

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,你也可以自定義其他隨機字符串。

umami
圖/ 少數派sspai

HASH_SALT:任意隨機英文字符串。

添加好的DATABASE_URL和HASH_SALT環境變數

umami
圖/ 少數派sspai

兩組環境變數添加完成之後的結果如上圖所示。設定完成之後,點擊Deploy部署項目。

測試和設定

至此,主要步驟已經順利完成,你需要做的只是耐心等待項目部署完畢。完成之後,Vercel會自動跳轉到項目主頁,並隨機分配一個區區域名稱稱。點擊Visit訪問項目,umami預設的後台登入的用戶名是admin,密碼是umami。登入之後,即可看到下方右圖的界面。

umami
圖/ 少數派sspai

測試並登入到部署完成的umami後台

一切大功告成,我們已經順利部署了umami.is服務。接下來,我們還可以做幾件事情個人化你的umami.is服務。

自定義區域名稱

首先是設定一個獨立區域名稱,當然前提條件是你有自己的區域名稱,沒有的話可以到任意區域名稱服務商(阿里雲端、騰訊雲端等)購買。當然你也可以一直使用Vercel自動分配的區域名稱。

umami
圖/ 少數派ssp

重設umami密碼並綁定站點

不要忘記到umami後台重設預設的管理員密碼。同時,你可以新建站點並獲取到數據追蹤代碼嵌入到你的站點中。

umami
圖/ 少數派ssp

重設後台密碼並獲取站點追蹤代碼

這裡非常推薦開啟「啟用共享連結」的選項,這是umami的一大特色,可以方便分享你的網站訪問數據。同時當你自己查看時,可以免登入。你可以訪問我的示範分享頁面。

常見問題和小總結

至此,我們透過網路現有的資源零成本部署了自己的umami網站數據追蹤服務。最後列舉幾個大家可能關心的問題。

Q:Vercel和Supabase是免費的嗎?我能用多久?

A:目前Vercel的個人帳號完全免費,企業帳號才需要付費。Supabase的免費數據庫存在500MB的限制,對於中小型網站這個容量理論上夠用很多年了。

Q:umami後續如何升級?

umami
圖/ 少數派ssp

A:Vercel的部署是自動觸發和完成的,也就是說當GitHub代碼庫更新時,Vercel會幫你自動部署上線最新版本的umami。你可以不定期訪問你Fork後的代碼庫,選中Fetchupstream從umami官方倉庫同步最新的代碼後即可自動升級。當然,你還可以從一開始直接部署官方倉庫的代碼,完全跟隨官方版本迭代升級。

umami主倉庫代碼自動升級

總之,如果你擁有自己的獨立部落格或者正在營運中小型網站,非常推薦嘗試一下umami,它真的很不錯。

本文授權轉載自:少數派

【熱門焦點】

  1. iPhone 13將在9/24開賣!中華電、遠傳、台哥大有哪些優惠?各家預購方案一次看
  2. 五倍券官網開張!數位綁定怎麼用、加碼券怎麼領,三大方案一次看懂

最新9月號雜誌《2021年台灣網紅生態全解析》馬上購:傳送門
「電子雜誌」輕鬆讀:傳送門

責任編輯:傅珮晴

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
蘋果能再次偉大?
© 2025 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓