DigitalOceanのアプリプラットフォームでUmamiを使用して独自のWeb分析ソフトウェアを展開する方法

著者は、 Write for DOnations プログラムの一環として、 MozillaFoundationを選択して寄付を受け取りました。

序章

Webサイトを展開した後、分析スクリプトをサイトに追加して、最も多くのトラフィックを促進するページについて学習し、訪問者数、目標コンバージョン、およびページビューを追跡する必要があります。 Umami は、PostgreSQLおよびNext.jsAPIルートで実行されるオープンソースのWeb分析ソフトウェアです。

Umamiを使用すると、イベント、参照ページ、セッション期間、ビューカウント、およびページの一意の訪問者カウントを追跡できます。 1つのUmamiインスタンスで、無制限の数のWebサイトを追跡し、複数のユーザーを作成して、さまざまなユーザーが1つのデプロイメントからWebサイトを追跡できるようにすることができます。

このガイドでは、Umamiをローカルコンピューターに複製し、PostgreSQLテーブルを作成し、接続プールを設定し、UmamiをAppPlatformにデプロイします。

前提条件

このガイドを開始する前に、次のものが必要です。

• DigitalOceanアカウント。 新しいアカウントを作成するには、DigitalOceanサインアップページに移動します。
• GitHubアカウント。 GitHubサインアップページからアカウントを作成できます。
• Gitがローカルマシンにインストールされています。 チュートリアルContributingTo Open Source：Getting Started with Git に従って、コンピューターにGitをインストールしてセットアップすることができます。
• マネージドPostgreSQLデータベースクラスター。 作成手順は、DigitalOcecanのドキュメントのPostgreSQLデータベースクラスターの作成方法ページで説明されています。
• ローカルマシンにインストールされているPostgreSQLコマンドラインクライアントpsql。 管理対象データベースへの接続方法ガイドの管理対象PostgreSQLへの接続セクションの手順に従って、psqlをインストールできます。

ステップ1—Umamiリポジトリのフォークとクローン作成

GitHubのUmamiリポジトリには、Umamiの実行に必要なファイルとスクリプトが含まれています。 このリポジトリをフォークすると、UmamiをAppプラットフォームにデプロイし、それに含まれるSQLスクリプトを使用してPostgreSQLデータベースにテーブルを設定できます。

このステップでは、リポジトリをフォークし、gitを使用してローカルコンピュータに複製します。

リポジトリをフォークするには、GitHubのうま味リポジトリに移動し、ページの右上隅にあるフォークボタンをクリックします。 リポジトリのコピーはhttps://github.com/your\_github\_username/umamiにあります。

フォークされたリポジトリで、コードボタンをクリックし、HTTPSリンクをコピーして、次のコマンドを使用してフォークされたリポジトリをローカルコンピューターに複製します。

git clone https://github.com/your_github_username/umami.git

git cloneコマンドは、コンピューター上にリポジトリーのコピーを作成します。 コマンドを実行すると、次のような出力が表示されます。

OutputCloning into 'umami'...
remote: Enumerating objects: 6352, done.
remote: Counting objects: 100% (270/270), done.
remote: Compressing objects: 100% (159/159), done.
remote: Total 6352 (delta 131), reused 219 (delta 103), pack-reused 6082
Receiving objects: 100% (6352/6352), 2.57 MiB | 519.00 KiB/s, done.
Resolving deltas: 100% (4388/4388), done.
Checking out files: 100% (355/355), done.

リポジトリのディレクトリに移動します。

cd umami

Umamiリポジトリをフォークしてローカルマシンに複製したので、PostgreSQLでumamiデータベースをセットアップし、そのテーブルを作成します。

ステップ2— umamiデータベースの作成、テーブルの設定、および接続プールの開始

このステップでは、クラスター内にumamiデータベースを作成して初期化します。 このデータベースは、うま味があなたのウェブサイトからのデータを保存する場所です。

クラスタにumamiデータベースを作成するには、DigitalOceanアカウントでクラウドコントロールパネルを開き、サイドメニューからデータベースを選択します。 クラスターのリストから作成したデータベースクラスターを選択します。 ユーザーとデータベースタブに移動し、データベースまでスクロールダウンします。 テキストボックスにumamiと入力し、保存をクリックしてumamiデータベースを作成します。

umamiデータベースを作成したので、Umamiが実行する必要のあるテーブルを作成できます。 これを完了するには、umamiデータベースに接続するための接続文字列が必要です。

クラウドコントロールパネルで、概要タブに切り替えます。 ページの右側にある接続の詳細セクションを探します。 接続パラメータが書かれているドロップダウンで、接続文字列を選択します。 データベース/プールが書き込まれている場所の横にあるドロップダウンからumamiデータベースを選択します。 その後、コピーをクリックして、接続文字列をクリップボードにコピーします。

sql/schema.postgresql.sqlのSQLスクリプトは、Umamiが必要とするすべてのテーブルを作成し、これらすべてのテーブルにインデックスを設定します。 また、ユーザー名adminとパスワードumamiでUmamiの管理者アカウントを設定します。

警告：Umamiの管理者ユーザーはアカウントを作成および削除できます。 Umamiインスタンスへの不正アクセスを防ぐために、デプロイ後にこれらのデフォルトのクレデンシャルを変更することを強くお勧めします。 手順3でデフォルトのクレデンシャルを変更できます。

入力したumamiディレクトリから次のコマンドを実行してテーブルを作成します。

psql 'your_connection_string' -f sql/schema.postgresql.sql

psqlは接続文字列を使用してデータベースに接続し、-fフラグはデータベースに対してsql/schema.postgresql.sqlでSQLスクリプトを実行します。

コマンドを正常に実行すると、次の出力が得られます。

Outputpsql:sql/schema.postgresql.sql:1: NOTICE:  table "event" does not exist, skipping
DROP TABLE
psql:sql/schema.postgresql.sql:2: NOTICE:  table "pageview" does not exist, skipping
DROP TABLE
psql:sql/schema.postgresql.sql:3: NOTICE:  table "session" does not exist, skipping
DROP TABLE
psql:sql/schema.postgresql.sql:4: NOTICE:  table "website" does not exist, skipping
DROP TABLE
psql:sql/schema.postgresql.sql:5: NOTICE:  table "account" does not exist, skipping
DROP TABLE
CREATE TABLE
CREATE TABLE
CREATE TABLE
CREATE TABLE
CREATE TABLE
CREATE INDEX
CREATE INDEX
CREATE INDEX
CREATE INDEX
CREATE INDEX
CREATE INDEX
CREATE INDEX
CREATE INDEX
CREATE INDEX
CREATE INDEX
CREATE INDEX
INSERT 0 1

これで、umamiデータベースとその中のテーブルが正常に作成されました。 次に、umamiデータベースの接続プールを作成します。

PostgreSQLは永続的な接続を持つように構築されました。 ただし、Umamiが実行されるNext.js APIルートは、リクエスト間でデータベース接続を共有できません。 APIルートから作成される短期間の接続をサポートし、エラーを防ぐために、クラスターの接続プールを作成します。

接続プールは、データベースへの多数の永続的な接続を確立し、それらの接続を介してクライアント要求を転送することにより、複数の要求間でデータベース接続を再利用できるようにするアプリケーションです。 接続が利用可能な数よりも多くの要求が行われると、空き接続ができるまで、後続の要求はキューに入れられます。

管理対象データベースの接続プールを有効にするには、クラウドコントロールパネルに移動します。 サイドメニューのデータベースをクリックし、作成したデータベースを選択します。 接続プールタブに移動し、接続プールの作成をクリックします。 モーダルが開きます。 プール名をumami-poolに設定し、 umami データベースを選択して、プールサイズを11に設定します。 プールの作成をクリックして接続プールを作成します。

より多くのトラフィックをサポートするために、後で接続プールのサイズを変更できます。 調整するタイミングとプールサイズの選択方法の詳細については、接続プールの管理方法を参照してください。

Umamiからのリクエストは、データベースに対して直接行われるのではなく、接続プールに対して行われます。 したがって、接続プールの接続文字列が必要になります。 この接続文字列は、アプリをAppPlatformにデプロイするときに必要となる環境変数の1つです。 接続文字列を取得するには、接続プールタブに移動し、接続の詳細をクリックします。 モーダルが開いたら、接続パラメータドロップダウンをクリックし、接続文字列を選択し、コピーをクリックして接続文字列をコピーします。

接続プールの接続文字列は、データベース要求が接続プールに対して行われるため、AppPlatformにデプロイするときに必要となる環境変数の1つです。

データベースに接続プールを設定したので、UmamiをAppPlatformにデプロイします。

ステップ3—UmamiをAppPlatformにデプロイする

このステップでは、UmamiをAppPlatformにデプロイします。 UmamiはNext.jsで記述されたWebアプリケーションで実行され、AppPlatformはUmamiのフォークからそれをデプロイします。 コントロールパネルのAppPlatformセクションにアクセスし、 Launch YourAppをクリックして開始します。

コードのソースのオプションのリストが表示されます。 ソースとしてGitHubを選択します。 GitHubリポジトリからAppPlatformに初めてデプロイする場合は、AppPlatformをGitHubアカウントに接続するように求められます。

アプリをデプロイするリポジトリを選択します。 ドロップダウンからソースリポジトリとしてyour_github_username/umamiを選択します。 ブランチをmasterのままにし、コード変更の自動デプロイをオンのままにして、次へをクリックします。

App Platformは、リポジトリ内のDockerfileを自動的に検出し、必要な設定を行います。 次に、うま味に必要な環境変数を追加します。

うま味が機能するには、2つの環境変数が必要です。

• DATABASE_URL：PostgreSQLデータベースの接続文字列。
• HASH_SALT：アプリケーションの一意の値を生成するために使用されるランダムな文字列。

環境変数の横にある編集をクリックして、これらの環境変数を追加します。

Umamiが接続プールとうまく連携するには、最後に&pgbouncer=trueを追加して、クラウドコントロールパネルから取得した接続プール接続文字列を変更する必要があります。 DATABASE_URLの値は次のようになります。

postgres://sammy:your_password@host-domain:25061/umami?sslmode=require&pgbouncer=true

+ ボタンをクリックし、HASH_SALT環境変数をランダムな文字列として設定します。 HASH_SALTの横にあるEncryptチェックボックスをオンにすると、保存中にHASH_SALTの値が暗号化されます。

次へをクリックして、アプリのセットアップを続行します。

Umamiインスタンスの名前を選択し、アプリをデプロイするリージョンを選択します。 接続の待ち時間を最小限に抑えるために、最も近いリージョンが自動的に選択されます。 次へをクリックして続行します。

Basic プランを選択するか、プロジェクトに大きなサイズが必要な場合は Pro プランを選択し、アプリの起動をクリックして展開を完了します。

これでアプリのビルドが始まります。 ビルドが完了すると、アプリにアクセスできるURLがアプリの名前の下に表示されます。

URLを開いて、分析ダッシュボードにアクセスします。

デフォルトの資格情報でログインできます。

• ユーザー名： admin
• パスワード：うま味

ヘッダーの設定をクリックして、インスタンスを保護します。 サイドバーのプロファイルに移動し、パスワードの変更をクリックします。 以前のパスワード（umami）を入力し、adminアカウントにサインインするための新しいパスワードを選択します。

Webサイトの追跡スクリプトを取得するには、Umamiダッシュボードにログインします。 画面上部のナビゲーションバーで設定を選択します。 ウェブサイトの追加ボタンをクリックします。 モーダルが開いたら、Webサイトの名前を選択し、Webサイトが配置されているドメインを入力します。

Webサイトを追加すると、設定のWebサイトのリストに表示されます。 Webサイトの下の最初のボタンをクリックして、追跡スクリプトを表示します。

ボタンをクリックすると、<script>タグのトラッキングスクリプトでモーダルが開きます。 ウェブサイトのページの<head>タグに表示されているコードスニペットを貼り付けて、ウェブサイトからのデータの取得を開始します。 訪問者がWebページにアクセスすると、スクリプトは自動的にデータをUmamiに送信します。

結論

これで、UmamiAnalyticsのインスタンスが正常にデプロイされました。 すべてのWebサイトから、ページビュー、セッション期間、およびその他のメトリックを追跡できるようになりました。 イベントの追跡方法については、Umamiのドキュメントを参照してください。 カスタムドメインからUmamiを利用できるようにする場合は、AppPlatformでドメインを管理する方法を参照してください。