Tech BlogAWSツール & 技術ブログ
メニュー

カテゴリ

AWS ツール

タグ

AWS8AI6Claude Code5セキュリティ3効率化2キャリア2CloudFront2ターミナル1DevOps1プラグイン1サーバーレス1デプロイ1すべて見る →

Cloudflare Web AnalyticsでNext.jsサイトのPVを無料で計測する方法【AWS + CloudFront構成】

AWSCloudflareNext.jsCloudFront

結論：Cloudflare Web Analyticsは個人ブログの無料PV計測に最適

Cloudflare Web Analyticsは、AWS（S3 + CloudFront）とNext.jsで構成した個人ブログのPV数を、完全無料かつ簡単に計測できるツールです。

高度なユーザー分析はできませんが、 「PV数やアクセス傾向を把握できれば十分」という用途であれば、 Google Analytics（GA4）の代替として十分実用的です。

この記事で分かること

  • AWS + Next.js 環境で無料でPVを計測する方法
  • CloudFrontのログや自作APIを採用しなかった理由
  • Cloudflare Web Analyticsのメリット・注意点
  • Next.js（App Router）での具体的な導入手順

なぜ無料でPV計測が必要だったのか

Next.jsなどのフレームワークを使い、 S3 + CloudFront のサーバーレス構成でブログを運営していると、 意外と悩むのが 「PV（ページビュー）数の計測方法」 です。

せっかくAWSの無料枠内で運用しているのに、

  • アクセス解析のために追加料金が発生する
  • 設定が複雑で管理コストが増える

といった状態になるのは避けたいと考えました。

そこで今回は、
「完全無料」「構成がシンプル」「管理が楽」
という条件を満たす方法を検討しました。

検討したものの、採用しなかった方法

1. CloudFrontのログを利用する方法

CloudFrontのアクセスログをS3に出力して集計する方法です。

一見すると無料で実現できそうですが、

  • 標準ログでは情報が限定的
  • リアルタイムログなどを使うと追加コストが発生する可能性
  • 集計・可視化の仕組みを自作する必要がある

といった理由から、
「PV数を知るだけ」にしてはオーバーエンジニアリングだと判断しました。

2. 自前で計測APIを構築する方法

（JS + API Gateway + Lambda + DynamoDB）

JavaScriptからAPIを叩き、DynamoDBにPV数を書き込む構成です。

この方法には以下の懸念がありました。

  • 従量課金のリスク
    アクセス増加により、リクエスト数や転送料で無料枠を超える可能性がある
  • 管理コストの増加
    管理画面や可視化ロジックを自作する必要がある

今回は
「とにかくシンプルにPV数が分かればOK」
という要件だったため、この構成も見送りました。

解決策：Cloudflare Web Analytics

最終的に採用したのが Cloudflare Web Analytics です。

このツールは、今回の要件に非常にマッチしていました。

Cloudflare Web Analyticsを選んだ理由

  • 完全無料
    トラフィック量に関係なく、無料プランで利用可能
  • プライバシー重視
    Cookieを使用せず、ユーザーを追跡しない
  • 導入が非常に簡単
    軽量なJavaScriptを1行追加するだけ
  • CloudFront構成でも問題なく利用可能

個人ブログのアクセス把握用途としては、十分すぎる機能です。

AWS + Next.js 環境での構成

今回の構成は以下の通りです。

  • フロントエンド：Next.js（SSG）
  • ホスティング：Amazon S3
  • DNS / CDN：CloudFront
  • アクセス解析：Cloudflare Web Analytics

Cloudflareは Analyticsのみ に利用しています。

Cloudflare Web Analyticsの導入手順

導入は非常に簡単で、数分で完了します。

1. Cloudflareにサインアップ

Cloudflareのアカウントを作成します。

2. Web Analytics を選択

ダッシュボードのサイドバーから
「Web分析（Web Analytics）」 を選択します。

3. 計測対象のサイトを追加

PVを計測したいドメインを登録します。

4. JavaScriptをNext.jsに組み込む

発行された JS Snippet を、 Next.js の全ページで読み込まれる場所に追加します。

App Router（layout.tsx）の例

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <head>
        <Script
          src="https://static.cloudflareinsights.com/beacon.min.js"
          data-cf-beacon='{"token": "あなたのトークン"}'
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

<head> 内に <script> タグを直接記述する方法でも動作しますが、 Next.js では next/script の Script コンポーネントを使うのが推奨です。

導入後の確認

スクリプトを追加してデプロイしたら、 Cloudflareのダッシュボードで Web Analytics を開いてください。

数分〜数時間後にデータが反映され始めます。

確認できる主な指標は以下の通りです。

  • ページビュー数（PV）
  • ユニークビジター数
  • 参照元（リファラー）
  • ページごとのアクセス数
  • 国・地域別のアクセス

注意点・制限事項

Cloudflare Web Analytics は万能ではありません。以下の点に留意してください。

  • リアルタイム性：データ反映には数分〜数時間のタイムラグがあります
  • 詳細なユーザー分析：GA4のようなイベントトラッキングやコンバージョン計測はできません
  • データ保持期間：無料プランでは直近のデータのみ閲覧可能です
  • ボットフィルタリング：基本的なフィルタはありますが、完全ではありません

まとめ

項目 内容
ツール Cloudflare Web Analytics
費用 完全無料
導入工数 JSタグ1行追加のみ
主な用途 PV数・アクセス傾向の把握
不向きな用途 詳細なユーザー行動分析

AWS + Next.js のサーバーレス構成で個人ブログを運営している方にとって、 Cloudflare Web Analytics は 最小コスト・最小工数でPVを把握できる最適解 です。

高度な分析が必要になった段階で GA4 等への移行を検討すれば十分でしょう。

関連記事

← 記事一覧に戻る