📈

Umami AnalyticsをVercelでデプロイして使う方法

2025/12/02に公開

 UmamiとはUmamiは、Google Analyticsの代替となるオープンソースのウェブアナリティクスツールです。プライバシーを重視した設計で、Cookieを使用せず、GDPRに準拠しています。
主な特徴：
シンプルで使いやすいダッシュボード
リアルタイムのアクセス解析
ページビュー数、訪問者数、参照元などの基本的な指標
軽量で高速
Google Analyticsのように詳細なトラッキングはできませんが、ブログや小規模サイトのアクセス解析には十分な機能を備えています。

 今回やることUmami AnalyticsをVercelでデプロイして、自分のサイトのアクセス解析を始められるようにします。
最終的に、以下のようなダッシュボードでアクセス統計を見られるようになります。
流れとしては、
Umamiのリポジトリをフォーク
Vercelでプロジェクトを作成
データベースを設定
環境変数を設定してデプロイ
初期設定をして使用開始

 事前準備GitHubアカウント
Vercelアカウント（GitHubで連携可能）
PostgreSQLデータベース（VercelのPostgresを使用）

 UmamiをVercelでデプロイする
 1. Umamiのリポジトリをフォークまず、GitHubでumami-software/umamiを自分のアカウントにフォークします。

 2. Vercelでプロジェクトを作成Vercelにログインし、「Add New...」→「Project」から先ほどフォークしたumamiリポジトリを選択します。

Vercel Add New

 3. データベースの準備Vercelのダッシュボードから「Storage」→「Create Database」→「Postgres」を選択してデータベースを作成します。
Neonを選んでいます。
作成されたデータベースの接続情報をコピーしておきます。

（Show secretをクリックすると見えます）

 4. 環境変数を設定プロジェクトの設定で、以下の環境変数を追加します：

DATABASE_URL: データベースの接続文字列（先ほどコピーしたもの）

HASH_SALT: 任意の文字列（例: your-random-salt）

TRACKER_SCRIPT_NAME: トラッカースクリプトの名前（例: umami.js）

 5. デプロイ実行環境変数の設定が完了したら、「Deploy」をクリックしてデプロイを開始します。
デプロイが完了すると、UmamiにVercelが提供するURLでアクセスできるようになります。

 初期設定デプロイ完了後、UmamiのURLにアクセスするとログインページが表示されます。
デフォルトのログイン情報：
ユーザー名: admin
パスワード: umami
ログイン後、まずパスワードを変更してください。
その後、「Settings」→「Websites」から解析したいサイトを追加します。サイト名とURLを入力するだけで設定完了です。

 トラッキングコードの設置解析したいサイトのHTMLに、以下のスクリプトを追加します：
<script
  defer
  src="https://your-umami-domain.com/umami.js"
  data-website-id="your-website-id"
></script>
your-umami-domain.comはデプロイしたUmamiのドメイン、your-website-idはUmamiの設定で確認できるウェブサイトIDに置き換えてください。
これで、サイトへのアクセスがUmamiで解析されるようになります。

 補足
 カスタムドメインの設定VercelのデフォルトURLではなく、自分のドメインを使いたい場合は、環境変数にBASE_URLを追加してください。

BASE_URL: 自分のドメイン（例: https://analytics.yourdomain.com）
これを設定すると、トラッキングスクリプトのURLも自動的にカスタムドメインに変わります。
こんな感じに確認できます。