自託管 Umami Analytics：使用 Vercel 和 Supabase 免費部署的完整指南

什麼是分析

分析是收集和分析有關訪客如何與您的網站互動的資料的過程。這些資訊至關重要，因為它可以讓您做出明智的決定來改進您的網站。

Google Analytics 是一個不錯的選擇，但可能存在資料隱私以及 GDPR 合規性問題。

選擇分析工具時，重要的是：

• 免費（開源）
• 允許自架（無供應商鎖定）
• 符合 GDPR
• 重量輕且速度快

鮮味分析檢查所有這些框。

Umami Analytics：開源分析解決方案

Umami Analytics 是一款簡單、快速且注重隱私的工具，可讓您在不損害使用者隱私的情況下追蹤網站使用情況。它是 Google Analytics 的開源替代品。一大優點是 Umami 分析符合 GDPR（一般資料保護規範）。

有兩種使用 UMAMI 分析的選項

• 使用 UMAMI 雲端解決方案（透過免費方案付費）
• 在您的伺服器上自行託管

在本文中，我們將探索自架選項。我們將使用 Supabase（免費套餐）作為資料庫（postgres），使用 Vercel（免費套餐/愛好計劃）來託管 Umami。

讓我們深入了解如何使用 Vercel + Supabase 免費自行託管 Umami 分析

1.在Supabase中建立新項目

• 使用 Supabase 建立新帳戶（如果您還沒有），然後按 + 新項目建立新項目
• 提供您喜歡的項目名稱（例如 your_app_name-analytics）
• 不要忘記將密碼儲存在某個地方，稍後會需要它。
• 選擇距離託管伺服器位置最近的區域。

2. Supabase 的初始配置

• 選擇項目，導覽至 SQL 編輯器
• 複製 github 儲存庫中提供的 SQL 腳本

• 將其貼上到 SQL 編輯器上，然後按一下執行

• 您將能夠在表格編輯器選項中看到新建立的表格

• 導覽至專案設定 → 資料庫 → 連線字串 → 複製連線 URL

3. 在 github 上分叉 UMAMI

• 將 https://github.com/umami-software/umami 專案分叉到您的 GitHub 帳戶。

• 編輯 db/postgresql/schema.prisma 檔案（新增 directUrl）
  

  datasource db {
    provider     = "postgresql"
    url          = env("DATABASE_URL")
    directUrl    = env("DIRECT_DATABASE_URL")  //add this line
    relationMode = "prisma"
  }
  

4. 在 Vercel 上部署

• 前往 Vercel 上的儀表板並建立新項目
• 在儀表板頁面中按一下“導入專案”，然後指定 GitHub 上專案分支的 URL。
• 在按一下「部署」之前新增以下環境變量

DATABASE_URL = postgres://[user]:[password]@aws-0-[aws-region].pooler.supabase.com:6543/postgres?**pgbouncer=true&connection_limit=1**
DIRECT_DATABASE_URL = postgres://[user]:[password]@aws-0-[aws-region].pooler.supabase.com:**5432**/postgres

重要的！ ！

？ DATABASE_URL 與從 supabase 複製的連接 Url（在步驟 2 中）相同，但您必須在 Url 末尾添加 ?pgbouncer=true&connect_timeout=1

？ DATABASE_URL 與從 supabase 複製的連接 Url（在步驟 2 中）相同，但您必須將連接埠從 6543 替換為 5432

• 之後點選部署

5. 解決錯誤“資料庫架構不為空”

• 在第二步驟中，我們在 Supabase 中執行了一個 sql 腳本，它在資料庫中建立了幾個表。現在，當腳本在部署期間運行時，它會拋出錯誤，錯誤代碼為 P3005，表示資料庫架構不為空
• 要解決此問題，請在本地克隆分叉存儲庫並添加與上述相同的環境變量（在步驟 4 中）

• 現在執行以下命令（安裝依賴項並設定資料庫連線）
  

  yarn install
  yarn build-db
  

• 然後我們將按照以下步驟建立基線遷移

1. 如果您有 prisma/migrations 資料夾，請刪除、移動、重新命名或存檔此資料夾。

2. Run the following command to create a migrations directory inside with your preferred name. This example will use 01_init for the migration name:

   mkdir -p prisma/migrations/01_init
   

3. Generate a migration and save it to a file using prisma migrate diff

   npx prisma migrate diff \
   --from-empty \
   --to-schema-datamodel prisma/schema.prisma \
   --script > prisma/migrations/01_init/migration.sql
   

4. Run the prisma migrate resolve command for each migration that should be ignored:

   npx prisma migrate resolve --applied 01_init
   

   This command adds the target migration to the _prisma_migrations table and marks it as applied. When you run prisma migrate deploy to apply new migrations, Prisma Migrate:

   1. Skips all migrations marked as 'applied', including the baseline migration
   2. Applies any new migrations that come after the baseline migration

• You will be able to successfully deploy the app on Vercel server after this. The URL of your analytics app would be available under project tab of Vercel app.

6. Login to Umami

• The default credentials for login is

username : admin
password : umami

• To change the default credentials navigate to settings → users → admin → edit
• Enter your new password and click on save.

7. Configure your website for analytics tracking

• navigate to settings → websites → + Add website

Name : provide any name of your choice
Domain : your [website](https://www.invoizly.com) domain (eg. invoizly.com) 

• Once website is added navigate to settings → website → your website name → edit → tracking code. Copy the tracking code.

8. Add tracking code to your project

In Next.JS projects to load a third-party script for multiple routes, import next/script and include the script directly in your layout component:

import Script from 'next/script'

export default function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
        81d89b5803f4382047d2a9a2fe845023
      39c7e4b4f64d9aef06707b4f0d0ccadf
          6ffb63ddaf21320e5768a9f5d82c36d7
        {children}
        a9af832cc08123ff4bbc99fefcd24cf5
      36cc49f0c466276486e50c850b7e4956
      2546ec4c319274fba24fabf75d291e1a
    5f557f62ae7ac7a14e0b1cb564790dfc
  )
}

After adding the Sript in your root layout, deploy your app and visit your web page. you will be able to track the visits on your analytics dashboard page.

Conclusion

Hope with help of this article you will be able to set up analytics for your application quickly and easily, without relying on third-party services. Since Vercel and Supabase both provides generous free tier, you can run your analytics for free in the initial days while being GDPR compliant.

About Invoizly

Invoizly is all about making invoicing easy and free. With Invoizly, you can quickly create high-quality, customizable invoices that look professional. It’s designed to be super user-friendly, so you can focus on your business instead of getting bogged down in paperwork.

Cover image by Marissa Grootes on Unsplash

以上是自託管 Umami Analytics：使用 Vercel 和 Supabase 免費部署的完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！