アクセス解析ツール Umami の導入

[tk-fuse]

docker-compose

docker-compose.yml

ドキュメント

Introduction – umami

.envとdocker-compose.ymlの作成

docker-compose.yml

services:
  umami:
    image: ghcr.io/umami-software/umami:latest
    container_name: umami
    ports:
      - "3080:3000"
    environment:
      DATABASE_URL: postgresql://${DB_USER}:${DB_PASSWORD}@umami-db:5432/${DB_DATABASE}
      APP_SECRET: ${SECRET}
      TWO_FACTOR_ENCRYPTION_KEY: ${KEY}
    depends_on:
      umami-db:
        condition: service_healthy
    init: true
    restart: always
    healthcheck:
      test: ["CMD-SHELL", "curl http://localhost:3000/api/heartbeat"]
      interval: 5s
      timeout: 5s
      retries: 5
      
  umami-db:
    image: postgres:16-alpine
    container_name: umami-db
    environment:
      POSTGRES_DB: ${DB_DATABASE}
      POSTGRES_USER: ${DB_USER}
      POSTGRES_PASSWORD: ${DB_PASSWORD}
    volumes:
      - ./umami-db-data:/var/lib/postgresql/data
    restart: always
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}"]
      interval: 5s
      timeout: 5s
      retries: 5

注）ホストのポート3000は使用中のため3080へ変更。.envでユーザ名、パスワードなどを指定。

.env

### # Required for two-factor authentication, generate with: openssl rand -hex 32
KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
### $ uuidgen
SECRET="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

DB_DATABASE="umami"
DB_USER="umami"
### $ pwgen -s 15 1 or $ openssl rand -base64 16
DB_PASSWORD="xxxxxxxxxxxxxxxxxxxxxxx"

起動

$ docker compose up -d

ステータス

$ docker compose ps
NAME       IMAGE                                 COMMAND                  SERVICE    CREATED       STATUS                 PORTS
umami      ghcr.io/umami-software/umami:latest   "docker-entrypoint.s…"   umami      2 hours ago   Up 2 hours (healthy)   0.0.0.0:3080->3000/tcp, [::]:3080->3000/tcp
umami-db   postgres:16-alpine                    "docker-entrypoint.s…"   umami-db   2 hours ago   Up 2 hours (healthy)   5432/tcp

アクセス：http://<host_pc_local_ip>:3080

ユーザ名：admin
パスワード：umami

ログイン画面

ユーザ名・パスワード変更

ユーザ名とパスワードはログイン後変更すること。

サイト追加

注）Nginxのプロキシを利用してパブリックドメインでアクセスできるようにすること。
例）https://umami.example.com

[tk-fuse]

トラブルシュート

アクセス元の地域、都市が表示されない

No region and cities are showing

Cloudflareの設定

domain → Rules → Settings → Managed Transforms

Add visitor location headers

Cloudflareを経由している場合、リクエストは実質的に クライアント → Cloudflareのエッジサーバー → オリジン(Nginx→Umami) という経路になります。この構成では、オリジン側(Umamiのnode-geoip処理)が見ているIPは最終的に正しいクライアントIPになりますが、Cloudflare自体が既に独自の高精度な位置情報判定を行っており、それを CF-IPCountry, CF-IPCity, CF-Region などの専用ヘッダーとして付与できる仕組みを持っています。

「Managed Transforms → Add visitor location headers」を有効にすることで、Cloudflareが位置情報ヘッダーをオリジンまで転送するようになるため、Umami(または対応しているアプリ)側でそれを利用できるようになります。

[tk-fuse]

Nuxtフレームワークへ導入

Proxy Mode - Configuration

nuxt-umamiのインストール

$ docker run --rm -it --env-file ./agency-os/.env  \
-v "$(pwd)/agency-os:/app" -w /app node:24-alpine   \
sh -c "corepack enable && corepack prepare --activate && \
pnpm install --frozen-lockfile && pnpm add -D nuxt-umami"

上記パッケージをインストール後nuxt.config.tsに設定を追加

agency-os/nuxt.config.ts

export default defineNuxtConfig({

	modules: [
		
		'nuxt-umami'
	],

	umami: {
		host: 'https://umami.ficusonline.com',
		id: 'a8226e9a-73ee-444b-9006-8300ef72300c',
		autoTrack: true,
		// 開発環境でもテスト送信したい場合は true、止めたい場合は false
		// （旧 logModal は廃止されたため、テスト環境での無効化等は ignoreLocal などを使用）
		ignoreLocal: true, // localhostからのアクセスを除外する場合
	},

});

リビルド

注）corepackを使用しないとpackage.jsonで指定したpnpmのパージョンが採用されないためビルドエラー

$ docker run --rm -it --env-file ./agency-os/.env  
-v "$(pwd)/agency-os:/app" -w /app node:24-alpine  
sh -c "corepack enable && corepack prepare --activate && \ 
pnpm install --frozen-lockfile && pnpm build"

---

Discourseへ適用

テーマとコンポーネント—>テーマの編集—>カスタムコード—>コードを編集

<head>タグにumamiで取得したトラッキングコード追加

<script defer src="https://example.com/script.js" data-website-id="xxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></script>

---

Prestashopへ適用

テーマのhead.tplへトラッキングコードを追加

themes/classic/templates/_partials/head.tpl

{block name='hook_extra'}
  <script defer src="https://umami.example.com/script.js" data-website-id="xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></script>
{/block}

注）アップデート後にファイルが更新されるため、その都度置き換える必要あり。