Umami のセットアップ方法

WebサイトのWeb解析ツールとして、Google Analyticsが定番だ。無料だし、Webサイトを立ち上げたらとりあえず使っておけというのがある種の常識のようになっている。しかし、Google Analytics以外にも良い代替ツールがいくつか存在する。今回は、その中でもUmamiというツールとその導入方法を紹介しようと思う。

Umami とは

Umamiは、オープンソースのWeb解析ツールだ。最近の他のWeb解析ツールと同様にプライバシーを重要視してる。クッキーを使用せず、GDPRなどの規制に準拠しているため、EU圏でもユーザーの同意を必要とせずにトラフィック解析が可能だ。軽量で高速、インターフェースもシンプルなので、基本的なウェブサイトの訪問者データを簡単に確認できる。また、自分のサーバーでホスティングできるため、無料で、かつデータを完全に自身で管理できる。僕のようなOSS大好きマンやセルフホスターにはかなり魅力的なツールだ。(そこまで開発が活発でないように見えるのだけ気になるが。)

他のOSSのWeb解析ツールとしては、Plausible Analyticsが挙げられる — OSS版はコミュニティエディション(CE)と呼ばれている。しかし、Plausible AnalyticsのCEでは、製品版よりも機能がかなり制限されており、かつ更新は半年に1回程度と決められている。また、ClickHouseというDBを使うため個人利用には少しリソースヘビーだという話もある。

それに対して、Umamiでは、全ての機能が提供されており、サーバーでのセットアップもある程度の知識があれば難しくない。自前で管理するのが面倒な場合は有料版も提供されているが、それであれば他の解析ツールも選択肢になってくるだろう。

他の代替ツールは？

自身で管理せずにWeb解析ツールを使いたい場合は、Fathom Analyticsをおすすめする。個人ユーザーだけでなく、GitHubやIBMなどの企業も採用しているツールだ。デモが公開されているので見てもらうのが早いが、シンプルなデザインでGoogle Analyticsと比べると断然使いやすい。あと、公式ページの至る所に現れる謎のキャラクターがかわいい。

料金は月15ドルからで、始めはフリートライアルできるので試してみると良いと思う。

ここからはUmamiをセットアップする際の手順を示す。以下では、Ubuntuのサーバーで、Nginxを用いたセットアップ例を示すが、他の環境でも流れは変わらないので適宜読み替えてほしい。

Umamiをインストール

まず、npm経由でyarnのインストールを行う。環境にnpmがない場合は、apt install nodejs npm 等でインストールしてもらいたい。UmamiはGitHubからcloneしてきてyarn install することで使えるようになる。

$ npm install -g yarn
$ cd /opt
$ git clone https://github.com/umami-software/umami.git
$ cd umami
$ yarn install

実際にUmamiを実行する際には、環境変数に適切にDBのURLを指定しておく必要がある。以下では、DB名をumami としている(すぐ後で作成する)。

$ vim .env
# 以下を追加 (MySQLのユーザー名とパスワードは適宜変更)
# DATABASE_URL=mysql://root:password@localhost:3306/umami

ここでは、MySQLを指定しているが、PostgreSQLも使用することができるのでお好みで。こちらも環境にない場合は apt install mysql-server 等でインストールする必要がある。

次に、MySQLにデータベースを作成する。ここでは、上記のURLで指定したumami というデータベースを作成する。

$ mysql -u root -p

CREATE DATABASE umami;

最後にbuildしたら立ち上げ準備完了だ。

$ yarn build

DNSにUmamiにアクセスするためのレコードを追加する

Umamiをサーバーで立ち上げたとしても、アクセスできなくては意味がない。そこで、DNSにUmamiのダッシュボードにアクセスするためのレコードを追加する。

例えば、umami.example.com というドメインで公開することを考えよう。この場合、DNSにはAレコードでHOSTにumami.example.com ANSWERにサーバーのIPアドレスを記述する。

SSL証明書を発行

HTTPSで接続するためには、SSL証明書を発行する必要がある。証明書を発行するための方法はいくつかあるが、ここではacme.shを使う例を示そう。

仮に、acme.shのホームを/etc/acme/ とすると、以下のように実行することで証明書を発行できる。ここでは、認証サーバーをLet's Encryptに指定してから、自身のメールアドレスでアカウント登録をし、Nginxモードで証明書を発行している。コマンドをコピペで実行する場合は<email> と使用するドメイン名を適宜変更してほしい。

$ /etc/acme/acme.sh --home "/etc/acme" --set-default-ca --server letsencrypt
$ /etc/acme/acme.sh --home "/etc/acme" --register-account -m <email>
$ /etc/acme/acme.sh --home "/etc/acme" --issue --nginx -d umami.example.com --reloadcmd "nginx -s reload"

Nginxの設定を変更

証明書を発行したので、次はNginxの設定を行う。まずは、HTTP用の設定ファイルを作成する。

$ vim /etc/nginx/sites-available/umami.example.conf

以下の内容を基本的にはコピペ使用できるはずだ。ドメイン名は変更する必要があるのと、もしも3000番ポート以外でUmamiを起動する場合はproxy_pass のポート番号も変更する必要がある。

server {
    listen       80;
    server_name  umami.example.com;

    access_log  /var/log/nginx/umami.access.log;
    error_log   /var/log/nginx/umami.error.log;
    
    location / {
      proxy_pass http://localhost:3000;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

次に、HTTPS用の設定ファイルも作成する。

$ vim /etc/nginx/sites-available/umami.example.com-ssl.conf

こちらも、umami.example.com と書かれている箇所を全て自身のドメイン名に変更すればコピペ使用できるはずだ。

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name umami.example.com;
    
    access_log  /var/log/nginx/umami-ssl.access.log;
    error_log   /var/log/nginx/umami-ssl.error.log;

    ssl_certificate /etc/acme/umami.example.com_ecc/fullchain.cer;
    ssl_certificate_key /etc/acme/umami.example.com_ecc/umami.example.com.key;
    include /etc/nginx/snippets/ssl-params.conf;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://localhost:3000;
    }

    location ~ /.well-known {
        allow all;
    }

    client_max_body_size 1g;
}

作成した2つの設定ファイルは/etc/nginx/sites-enabled/ 以下にシンボリックリンクを張る。Nginxはsites-enabled 内の設定ファイルを有効だとみなすためだ。

$ ln -s /etc/nginx/sites-available/umami.example.com.conf /etc/nginx/sites-enabled/
$ ln -s /etc/nginx/sites-available/umami.example.com-ssl.conf /etc/nginx/sites-enabled/

最後にNginxをリスタートする。何か設定ファイルに問題があればここでエラーが吐かれるはずなので、エラー内容を見て修正する。

$ systemctl restart nginx

PM2経由で起動できるようにする

Umamiをよしなに起動できるようにするために、公式で推奨されているPM2を用いた起動方法を載せておく。(僕はsupervisorが使い慣れているのでこちらを使っている)

$ yarn global add pm2
$ cd /opt/umami
$ pm2 start yarn --name umami -- start
$ pm2 startup
$ pm2 save

これでセットアップは完了だ。

ダッシュボードにアクセスする

セットアップが問題なくできたら、設定したドメインにアクセスするとダッシュボードのログインページが表示されるはずだ。デフォルトでは、ユーザー名が admin 、パスワードは umami でログインできる — パスワード変更をすることを忘れないこと。ログイン後はWebサイトを登録して、サイト側でトラッキングコードを貼り付ければデータが取集できるようになる。これ以降は、公式のドキュメントに記載されているので確認してほしい。

Umami とは

他の代替ツールは？