セルフホスティング 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 (
        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 中国語 Web サイトの他の関連記事を参照してください。