GoatCounter と Zeabur を使用してウェブサイトデータ統計システムを構築する

前言#

「2024 年了，我的博客有了什么变化」という記事では、Serverless プラットフォームといくつかのオープンソースプロジェクトを使用して構築したブログシステムについて紹介し、このシリーズのチュートリアルを開始して構築とデプロイの全過程を記録しました。

本記事は統計システムのソリューションについてです。

统计系统方案#

ブログ本体やコメントシステムに比べて、私は長い間統計システムを気にしていませんでした（~~当時は誰も見ていなかったので~~）、SEO や他のプロモーションの方向性についてもあまり考えていませんでしたが、後に気づいたのは、実際に統計されたデータは単なる見栄えの良いツイート用のグラフではなく、ブログのテーマや内容に対して非常に大きな参考価値を持っているということです。

実際、主流の成熟したソリューションは基本的なニーズを満たすことができ、無料の Google Analytics でも十分ですが、ブログの発展過程で、私はさまざまな理由から何度かのイテレーションを経て、最終的に GoatCounter というソリューションを使用することになりました。

splitbee#

最初に使用したのは無料のツール splitbee で、無料の基本統計枠を提供し、なかなか良いインターフェースを持ち、複雑なユーザー追跡や A/B テストなどもサポートしていましたが、印象としてはデータを半年間しか保持できず、毎月 5000 pv を超えるとアップグレードが必要だったため、後に放棄しました。

Cloudflare + Google Search Console#

cloudflare_web_stats

splitbee を放棄した後、長い間追加の統計アプリを統合せず、Cloudflare に付属のサイト統計を使用していましたが、実際にはネットワーク全体のトラフィックしか統計しておらず、クローラーを含む非常に多くの無効データが含まれており、パスなどの詳細に正確ではありませんでした。

google_search_console

その後、SEO という概念を理解した後、Google Search Console という統計の次元を追加しました。これは現在、私がブログ記事を書く上で最も意味のあるデータだと感じており、主にユーザーが検索エンジンで私のブログサイトに到達するためのキーワードや、検索を通じて私のブログにアクセスするページのパスを示しています。

「Warp，iTerm2 还是 Alacritty？我的终端折腾小记」という記事が多くの訪問者をもたらし、ブログの構築やスマートコントラクトの開発に関する情報も、検索エンジンから来た自然なユーザーにとって私のブログの第一印象となっています。

Umami + Supabase + Netlify#

yu_umami_record

しかし、上記の二つでは依然としてウェブサイト全体のデータしか見ることができず、特定の投稿の一定期間のパフォーマンスや、投稿後のリアルタイムアクセスデータを正確に把握するためには、やはり統計システムが必要でした。Reorx の「搭建 umami 收集个人网站统计数据 | Reorx’s Forge」という記事を見た後、オープンソースで簡単にデプロイできる統計システムである umami を選択しました。インターフェースはシンプルで、機能も使いやすく、自分のブログシステムに統合するのが非常に便利でした。

1 年半使用していて、特に問題は発生しませんでしたが、早くから使用していたため、大規模なバージョンアップの際にデータベースのマイグレーションスクリプトに互換性のないフィールドの更新が発生しました。このような規模のオープンソースプロジェクトでなぜこのような問題が発生するのか理解できず、issue には他の多くのユーザーも同様の要求を持っているのを見ましたが、最終的には良い解決策が示されませんでした。

しかし、実際の最大の問題は、統計システムが二つのプラットフォームに依存しているため、デプロイとメンテナンスが少し重すぎることです。データベースや Netlify のいずれかに問題が発生したり、移行が必要になった場合、追加のコストが発生します。そこで、最近ブログのコメントシステムを更新する際に、思い切ってより軽量な GoatCounter に切り替えることにしました。

GoatCounter + Zeabur#

goatcounter_stats

このニッチな統計システムは、Reorx のブログコードの更新を見ているときに偶然見つけました。Retro Internet のスタイルに一瞬で惹かれ、余計なボタンはほとんどなく、機能は非常に充実しており、go の単一バイナリファイル + sqlite データベースの単一ファイルのアーキテクチャを使用しているため、軽量でデプロイが容易です。そこで、移行を決定しました。

実際、私の GoatCounter は fly.io にデプロイされていますが、前回の Remark42 に関する記事で fly の操作説明を非常に詳細に紹介したため、あまり重複したくありません。ちょうど最近 Zeabur という Serverless プラットフォームを重度に使用しているので、この記事では Zeabur を例に取り上げます。この方法は他の類似プラットフォームにも適用できます。

下記の Zeabur デプロイメントプランの後に、fly.io と VPS 上で docker-compose を使用してデプロイするための設定ファイルも提供しますので、参考にしてください。

GoatCounter 部署说明#

GoatCounter 自体のコードはオープンソースであり、文書は明確で読みやすく、実際のニーズに応じて設定できます。GoatCounter + Zeabur のソリューションは単一のサービスに関わるだけで、データベースは sqlite でボリュームにマウントされているため、デプロイは非常に簡単です。

使用 Zeabur 部署#

Zeabur でのコンテナアプリケーションのデプロイには Developer Plan が必要で、月額 5 ドルですが、このようなイメージサービスは全体の使用量と費用が比較的低く、毎月の枠は非常に多くのサービスをデプロイするのに十分ですので、適宜選択できます。全体のデプロイプロセスは fly.io に比べて非常に簡単で、すべての操作は Web インターフェースで完了でき、追加のコマンドラインツールをインストールする必要はありません。

注册 zeabur#

zeabur_login

Zeabur の公式サイトにアクセスし、右上のボタンをクリックして GitHub アカウントで認証ログインします。

创建新项目#

zeabur_new_project

メインインターフェースに入ったら、右上の 创建项目 ボタンをクリックします。

zeabur_hk_region

私は香港の AWS データセンターを選択しました。異なるデータセンターではアクセス速度、性能、価格にいくつかの違いがあるため、自分のニーズに応じて選択できます。

配置镜像部署#

zeabur_build

次のステップで Docker コンテナイメージを選択してデプロイします。

zeabur_docker_custom_config

私たちは自分で構築したイメージを使用しているため、公式には GoatCounter テンプレートが提供されていないため、カスタムを選択します。

zeabur_prebuilt_edit_toml

このステップでは、インターフェース上でさまざまな設定項目を入力できますが、私が fly.io のファイル設定モードに慣れているため、左下の 编辑 TOML 文件 を選択しました。皆さんも私の設定ファイルをコピーして直接修正できます。

name = "yu-goatcounter"

[source]
image = "pseudoyu/goatcounter"

[[ports]]
id = "web"
port = 8080
type = "HTTP"

[[volumes]]
id = "goatcounter-data"
dir = "/data"

[env]
PORT = { default = "8080" , expose = true }
GOATCOUNTER_DB = { default = "sqlite3://data/goatcounter.sqlite3" , expose = true }

zeabur_prebuilt_goatcounter_toml

設定が完了したら、右下のデプロイボタンをクリックします。

部署完成#

yu-goatcounter_project

デプロイをクリックした後、しばらく待つと生成されたプロジェクトのデフォルト名が表示されます。左上の設定で可読性の高い名前に変更できます（例： yu-goatcounter）。

配置自定义域名#

zeabur_create_domain

サービスのデプロイが完了したら、ドメインをバインドする必要があります。そうしないと、インターネット経由でウェブサイトにアクセスできません。Zeabur は無料のサブドメイン xx.zeabur.app を提供しており、自分のドメインをバインドすることもできます。

zeabur_custom_domain

生成されたドメインは直接使用でき、他の設定は必要ありません（例： goatcounter.zeabur.app）。カスタムドメインを使用する場合は、ドメイン管理のバックエンドで CNAME レコードを追加し、形式が xxx.cname.zeabur-dns.com のデータセンターアドレスを指す必要があります。

cloudflare_goatcounter_config

例えば、私のドメインは Cloudflare にホスティングされており、追加した CNAME レコードは上の図のようになっています。公式に確認したところ、AWS HK データセンターを選択した場合、Cloudflare のプロキシを使用しなくても速度が理論的に速くなるとのことですので、自分のニーズに応じて設定できます。

また、Huawei Cloud データセンターを選択した場合は、ドメインの登録が必要で、追加で TXT レコードを新たに追加する必要がありますので、指示に従って操作してください。

zeabur_custom_domain_success

緑色が表示されれば設定成功です。これで私たちの GoatCounter サービスがデプロイされました。

数据备份#

設定時に次のような部分があります。

[[volumes]]
id = "goatcounter-data"
dir = "/data"

これは、コンテナ内の /data ディレクトリ（つまり、私たちの sqlite データベースが存在する場所）を goatcounter-data という ID のストレージボリュームにマウントする機能です。ストレージボリュームをマウントしない場合、コンテナが再起動または再デプロイされるとデータが失われます。

ストレージボリュームに関しては、Zeabur のインターフェース上で非常に直感的な表示や管理操作がないため、常に自分の設定が有効かどうか疑問に思っていました。

zeabur_add_goatcounter_backup

しばらく研究した結果、設定でサービスを一時停止し、上のバックアップモジュールで新しいバックアップを追加し、ダウンロードをクリックすると、ローカルでバックアップファイルを見ることができます。ディレクトリ階層は次のようになります。

data/
└── goatcounter-data
    └── goatcounter.sqlite3

これにより、私たちのデータが成功裏に永続化されたことが示されます。Zeabur がインターフェース上でより直感的な表示を提供してくれることを期待しています。

使用 fly.io 部署#

完全に無料のソリューションは、私が言及した「从零开始搭建你的免费博客评论系统（Remark42 + fly.io）」を参照できます。 fly.toml の設定部分だけが異なります。私が使用している設定ファイルも提供しますので、参考にしてください —— 「fly.toml」。

使用 Docker 与 docker-compose 部署#

面白いことに、goatcounter の作者は非常にこだわりがあり、単一ファイルのアプリケーションをコンテナ化することは逆にメンテナンスコストを増やすと考えているため、公式イメージを提供していません。しかし、VPS や Serverless プラットフォームでデプロイする際にはイメージがあると便利なので、私は GitHub Actions を使用してイメージを構築し、Docker Hub にアップロードする CI を作成しました。必要な方は使用できます。対応する Dockerfile と Docker Compose ファイルはこの Commit を参照するか、直接 pseudoyu/goatcounter と docker-compose.yml ファイルを使用できます。

version: '3'

services:
  goatcounter:
    image: pseudoyu/goatcounter
    ports:
      - 8080:8080
    environment:
      - PORT=8080
      - GOATCOUNTER_DB=sqlite3://data/goatcounter.sqlite3
    volumes:
      - ./data:/data
    restart: unless-stopped

GoatCounter 配置说明#

上文では GoatCounter サービスのデプロイを完了しましたので、生成した / カスタマイズしたドメインを通じて統計システムサービスにアクセスできるようになりました。私は https://goatcounter.pseudoyu.com を通じてアクセスしています。

goatcounter_create_user

初めてログインする際にはユーザーを作成する必要があり、メールアドレスとパスワードを入力して Create をクリックするだけです。

goatcounter_dashboard_success

ログインに成功すると、現在はデータがありませんが、スクリプトが表示され、今後ブログで使用する設定に役立ちます。

博客配置 GoatCounter#

上文で GoatCounter サービスのデプロイと基本設定を完了したので、次は私の使用している Hugo ブログに統計コンポーネントを追加する必要があります。

<script data-goatcounter="https://goatcounter.pseudoyu.com/count"
        async src="//goatcounter.pseudoyu.com/count.js"></script>

上記のコードを私の Hugo テーマの head に追加するだけです。私の Hugo テーマは layouts/partials/head.html というファイルにありますが、異なるテーマや異なる SSG フレームワークでは位置が多少異なることがありますが、大体は同じです。

注意すべき点は、goatcounter は localhost からのリクエストを無視するため、ローカルプレビュー時に多くの無駄なデータが生成されないようにしているため、ローカルでデバッグしてもデータは表示されず、ウェブページをデプロイする必要があります。

final_display_of_goatcounter

データを収集した後の効果は、上の図のようになります。また、GoatCounter インターフェースでいくつかの設定項目を設定したり、新しいウェブページを追加したり、詳細データを確認したりすることができ、各ページのアクセスカウントを表示することもできますので、文書に従って探索してみてください。

总结#

これで私たちのブログ統計システムが構築されました！この記事は私のブログ構築デプロイシリーズの一部であり、ブログテーマの主要部分はすでに完成しています。残るはブログ内検索などの細かい体験の最適化のみです。皆さんにとって参考になれば幸いです。