オープンソースのアナリティクスサービス「umami」をRailwayで動かしてみる

この記事で紹介した方法で数ヶ月運用していると、月末に無料枠の制限に達してしまいストップしてしまうことが何度かありました。

無料運用するのであれば、2023年1月現在、RailwayよりもSupabase等を使う方がいいかもしれせん。

以前はRailwayでもSupabaseと同様にUmamiデータを無料の範囲内で運用できていましたが、2022年7月から無料プランの稼働時間が月500時間（または月$5分の早く到達したほう）までに制限され、無料運用ができなくなってしまいました。

（下の記事より引用）

https://route360.dev/ja/post/umami-supabase/

はじめに

Googleアナリティクスなどの代替としてオープンソースで開発されている「umami」というサービスがあることを知りました。

Cookieを使用しないので、EUのGDPRで定められている「このサイトはCookieを使用します」のバナーを表示する必要がないそうです。

https://umami.is/

将来的にはクラウドプランも用意されるみたいですが、現状はセルフホストが前提となっています。

セルフホストの場合は、Node.jsの実行環境と、MySQLまたはPostgreSQLが必要です。

https://umami.is/docs/getting-started

ドキュメントには、NetlifyやVercel、DigitalOcean、Supabaseなど色々なホスティングサービスやデータベースへのデプロイ方法が書いてありますが、今回は「Railway」を使って無料で構築してみます。

こちらも最近何かと問題を起こしているHerokuの代替サービスとして注目を集めているみたいです。

https://railway.app/

Railwayへのデプロイの解説ページにはワンクリックで自動セットアップする方法と、自分でフォークする方法の2通り載っていますが、今後のアップデートに追従するために後者を試します。

https://umami.is/docs/running-on-railway

Gitレポジトリをフォークする

以下のレポジトリを右上のボタンからフォークしてください。

https://github.com/umami-software/umami

Railwayへデプロイする

Railwayのアカウントを作成します。GitHubのアカウントに紐づけるのが楽だと思います。

アカウントができたら、ダッシュボード画面の右上の「New Project」を押します。

このような画面が出てくるので、「Deploy from GitHub repo」を選びます。

（ランチャーアプリみたいにキーボードフレンドリー（？）でいいですね）

先ほどフォークしたレポジトリを選択したら、「Deploy Now」を押してデプロイします。

エラーを直す

ドキュメント通りだとここで正常にビルドされるはずなのですが、自分の環境ではこのようなエラーが発生しました。

#16 4.864 $ node scripts/copy-db-files.js
 
#16 5.150 /app/scripts/copy-db-files.js:21
#16 5.150   throw new Error('Missing or invalid database');
#16 5.150   ^
#16 5.150
#16 5.150 Error: Missing or invalid database
#16 5.150     at Object.<anonymous> (/app/scripts/copy-db-files.js:21:9)
#16 5.150     at Module._compile (node:internal/modules/cjs/loader:1126:14)
#16 5.150     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
#16 5.150     at Module.load (node:internal/modules/cjs/loader:1004:32)
#16 5.150     at Function.Module._load (node:internal/modules/cjs/loader:839:12)
#16 5.150     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
#16 5.150     at node:internal/main/run_main_module:17:47
#16 5.168 error Command failed with exit code 1.
#16 5.168 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
#16 5.180 ERROR: "copy-db-files" exited with 1.
#16 5.198 error Command failed with exit code 1.
#16 5.198 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
#16 5.210 ERROR: "build-db" exited with 1.
 
#16 5.229 error Command failed with exit code 1.
#16 5.229 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
#16 ERROR: executor failed running [/bin/sh -c yarn build]: exit code: 1
 
-----
> [builder 5/5] RUN yarn build:
-----
executor failed running [/bin/sh -c yarn build]: exit code: 1

issuesを見てみると、同じエラーを報告している人がいました。
DATABASE_TYPE環境変数を追加することで直ったみたいです。

https://github.com/umami-software/umami/issues/1437

Variablesタブから、DATABASE_TYPE環境変数にpostgresqlとセットします。

Vercelとは違って環境変数を変更すると自動で再デプロイされるみたいです。
今度はビルドに成功しました。

データベース（PostgreSQL）を追加する

Railwayでは、プラグインという形で簡単にPostgreSQLを設定できます。

まず、Cmd + K（Ctrl + K）を押してランチャー画面を開き、databaseと入力すると出てくる「Database」をクリックします。

データベースの種類が選べるので、「Add PostgreSQL」を選択。

環境変数の追加

PostgreSQLがセットアップされたら、先ほどのレポジトリの設定画面に戻り、「Variables」タブから環境変数を追加していきます。

まず、HASH_SALT環境変数にランダムな文字列をセットします。
セキリュティ的に、ID生成サイトなどで生成したものを使うといいと思います。

次に、PORT環境変数に3000とセットします。

データベースのテーブルを作成する

バックエンドの理解が浅いので合っているか分かりませんが、テーブルとはデータを格納する表のようなものです。

まず、最初に作成したGitレポジトリをローカルにクローンします。

次に、HomeBrewやnpmからRailway CLIをインストールします。
詳しくは以下のページをご参照ください。

https://docs.railway.app/develop/cli

CLIをインストールしたらrailway loginを実行してログインします。
ブラウザが開いて自動で認証されるはずです。

そして先ほどクローンしたレポジトリのディレクトリに移動し、railway linkを実行してGitレポジトリとRailwayプロジェクトを紐づけます。

最後に、以下のコマンドを実行しテーブルを作成します。
<PGHOST>、<PGUSER>、<PGDATABASE>の部分は実際の値に置き換えてください。
環境変数の値はrailway variablesで確認できます。

railway run psql -h <PGHOST> -U <PGUSER> -d <PGDATABASE> -f sql/schema.postgresql.sql

実行すると「already exists」と色々エラーが出ましたが、特に問題はありませんでした（もしかしたらこのコマンドを実行する必要はないのかも？）

上記のコマンドが実行できない場合は、psqlコマンドがインストールされていない可能性があります。

postgresqlをインストールしてください。

Macの場合

brew install postgresql

ドメインを設定する

「Settings」タブの「Domains」という項目にある「Generate Domain」ボタンを押します。

独自ドメインを持っている場合は代わりにそれを使うことも可能です。

パスワードの設定

生成されたドメインにアクセスすると、このようなログインページが出てきます。

デフォルトでは以下のように設定されているので、これを入力してログインします。

Username	Password
admin	umami

言語を日本語に設定

ログインできたら、右上の地球儀のアイコンを押して表示言語を日本語に変更できます。

パスワードの設定

初期パスワードのままだと第三者に乗っ取られる可能性があり危険なので、パスワードの変更を行います。

右上のアイコンをクリックし、「プロファイル」→「パスワードの変更」を押して新しいパスワードを入力してください。

ウェブサイトの追加

このままだとグラフには何も表示されないので、ウェブサイトを登録する必要があります。

設定画面から「Webサイトの追加」をクリックしてサイト名とURLを登録します。

次に、リストの右側の4つ並んだアイコンの一番左を押し、出てきたHTMLタグをコピーして自分のサイトの<head>などに追加してください。

おわりに

以上で完了です。

試しに自分のサイトにアクセスしてみると、無事グラフが表示されました。

閲覧者のOS、デバイス、ブラウザ、国などが取得でき、現在の閲覧者のリアルタイム表示もできるので、基本的な機能に関してはGoogleアナリティクスなどと比べても遜色ないと思います。

導入は少し大変でしたが、UIもキレイで使いやすいのでオススメです。