Umami は、ユーザーのプライバシーを保護する Google Analytics の代替ソリューションを提供するために作成されたオープンソースのウェブサイト分析ツールです。Umami を使用すると、ウェブサイトの管理者は訪問者の行動を追跡し、ウェブサイトのパフォーマンスに関する洞察を得ることができますが、ユーザーのプライバシーは侵害されません。Umami には、リアルタイムトラッキング、カスタマイズ可能なダッシュボード、詳細なレポートなどの機能があります。自己ホストされているため、ユーザーは自分のデータを完全に制御し、第三者と共有しないことができます。
以下では、Umami を Vercel にデプロイする方法を簡単に説明します：
0/ 準備#
1/ Umami を Fork する#
Github にログインし、以下の Umami リポジトリにアクセスし、Umami を自分の Github アカウントに Fork してください。
Fork した Umami リポジトリに移動し、Add file - Create new fileをクリックします。
ファイル名にvercel.jsonを入力し、以下の内容を入力します。
{
"rewrites": [
{
"source": "/index.js",
"destination": "/umami.js"
}
]
}
2/ データベースの作成#
Supabaseにログインし、New projectをクリックしてプロジェクトを作成し、プロジェクト名とデータベースパスワード（非常に重要なのでメモしておいてください）を入力し、推奨地域をEast USに選択して作成してください。
プロジェクトに入り、設定 - データベース - 接続文字列 - URIをクリックし、データベースの接続情報をコピーして保存してください（プロジェクト作成時に設定したパスワードを[YOUR-PASSWORD]に置き換えてください）。
3/ Vercel で Umami を構築する#
GithubでVercelにログインし、Add New... - Projectをクリックし、Fork した Umami リポジトリを選択してImportをクリックしてください。
Environment Variablesを展開し、以下の内容を入力してください。
- name
HASH_SALT- valueランダムな文字列 - name
DATABASE_URL- value前のステップで保存したデータベースの接続情報
特記事項：データベースの接続情報の後ろに?pgbouncer=trueを追加する必要があります。例：
postgresql://postgres:パスワード@db.ランダム文字列.supabase.co:5432/postgres?pgbouncer=true
Deployをクリックして少し待つと、デプロイが成功したことが表示されます。Vercel のデフォルトドメインvercel.appは既に使用されているため、設定 - Domainsに移動して独自のドメインをバインドすることをおすすめします。
まず、サブドメインをCNAMEでcname-china.vercel-dns.comに設定し、Addをクリックします。
自分のドメインにアクセスし、ユーザー名admin、パスワードumamiでログインし、ログイン後にパスワードを変更することを忘れないでください。
4/ ウェブサイトに組み込む#
Umami の管理画面にアクセスし、設定ページに移動し、新しいウェブサイトを作成し、埋め込みコードをコピーしてウェブサイトの</body>の前に貼り付けてください。
特に Umami のデフォルトリンクは Adblock プラグインによってブロックされるため、最初のステップで設定した内容に基づいて、コード中のumami.jsをindex.jsに置き換える必要があります。これにより、Adblock によるブロックを回避できます。例：
元のコード：
<script async defer data-website-id="xxxxxx" src="https://tongji.domain.com/umami.js"></script>
変更後：
<script async defer data-website-id="xxxxxx" src="https://tongji.domain.com/index.js"></script>