セルフホスティング Umami Analytics: Vercel と Supabase を無料で導入するための完全ガイド

アナリティクスとは

分析は、訪問者が Web サイトとどのようにやり取りするかに関するデータを収集および分析するプロセスです。この情報は、ウェブサイトを改善するための情報に基づいた意思決定を可能にするため、非常に重要です。

Google Analytics は優れた選択肢ですが、データ プライバシーや GDPR コンプライアンスの懸念がある可能性があります。

分析ツールを選択するときは、次のことが重要です。

• は無料 (オープンソース)
• セルフホスティングが可能 (ベンダーロックインなし)
• GDPR に準拠しています
• 軽量かつ高速です

Umami Analytics はこれらすべてのボックスをチェックします。

Umami Analytics : オープンソースの分析ソリューション

Umami Analytics は、ユーザーのプライバシーを侵害することなく Web サイトの使用状況を追跡できる、シンプル、高速、プライバシー重視のツールです。これは、Google Analytics に代わるオープンソースの代替手段です。大きな利点は、Umami 分析が GDPR (一般データ保護規則) に準拠していることです。

UMAMI 分析を使用するには 2 つのオプションがあります

• UMAMI クラウド ソリューションを使用する (無料利用枠プランで有料)
• サーバー上のセルフホスト

この記事では、セルフホスティングのオプションについて説明します。データベース (postgres) には Supabase (無料枠プラン) を、Umami のホスティングには Vercel (無料枠/ホビー プラン) を使用する予定です。

Vercel + Supabase を使用して無料で Umami 分析をセルフホストする方法を詳しく見てみましょう

1. Supabaseで新しいプロジェクトを作成します

• Supabase で新しいアカウントを作成し (まだお持ちでない場合)、+ New Project を押して新しいプロジェクトを作成します。
• 任意のプロジェクト名を入力します (例: your_app_name-analytics)
• 後で必要になるため、パスワードをどこかに保存することを忘れないでください。
• ホスティングサーバーの場所に最も近い地域を選択します。

2. Supabaseの初期構成

• プロジェクトを選択し、SQL エディターに移動します
• github リポジトリで提供されている SQL スクリプトをコピーします

• SQL エディターに貼り付けて、[実行] をクリックします

• テーブル エディター オプションで新しく作成されたテーブルを確認できるようになります

• プロジェクト設定 → データベース → 接続文字列 → 接続 URL のコピーに移動します

3. UMAMI を Github にフォークする

• 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 は、(手順 2 で) supabase からコピーした接続 URL と同じですが、URLの最後に?pgbouncer=true&connect_timeout=1

? DATABASE_URL は、(ステップ 2) で supabase からコピーした接続 URL と同じですが、ポートを 6543 から 5432 に置き換える必要があります

• その後、「デプロイ」をクリックします

5.「データベーススキーマが空ではありません」エラーの解決

• ステップ 2 では、Supabase で SQL スクリプトを実行し、データベースにいくつかのテーブルを作成しました。デプロイ中にスクリプトを実行すると、データベース スキーマが空ではないというエラー コード P3005 のエラーがスローされるようになりました。
• これを解決するには、ローカルにフォークされたリポジトリのクローンを作成し、上記 (手順 4) と同じ環境変数を追加します

• 次に、次のコマンドを実行します (依存関係をインストールし、DB 接続をセットアップします)
  

  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 (    {children}