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

序章

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

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

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

前提条件

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

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

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

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

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

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

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

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

Output
Cloning 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.

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

  1. cd umami

Umamiリポジトリをフォークし、ローカルマシンに複製したので、次の設定を行います。 umami PostgreSQL上のデータベースとそのテーブルを作成します。

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

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

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

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

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

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

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

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

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

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

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

Output
psql: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 したがって、 HASH_SALT 保存中に暗号化されます。

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

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

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

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

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

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

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

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

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

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

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

結論

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