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>