Closed2024/03/17にクローズ3

Remix+CloudflareでWebサイトを作る 16（GraphQLでPV数を取得しようとするがProじゃないとできなさそうなので一旦辞めた）

GraphQL

個人開発

Cloudflare

Remix

saneatsu

【2024-03-16】GraphQLでアクセス数を取得する（1. 準備）

やりたいこと

2つある

ページごとの閲覧数を取得する
週間のアクセス数ランキングを取得する

準備

1. API Tokenを作成

公式サイトを見ながらAPI Tokenを作成

$ curl -X GET "https://api.cloudflare.com/client/v4/user/tokens/verify" \
     -H "Authorization: Bearer YOUR_API_TOKEN" \
     -H "Content-Type:application/json"

{"result":{"id":"YOUR_ID","status":"active"},"success":true,"errors":[],"messages":[{"code":10000,"message":"This API Token is valid and active","type":null}]}%

2. Chrome拡張を取得

立ち上げると真っ白の画面に入力欄が表示されるので https://api.cloudflare.com/client/v4/graphql を入力。
すると以下のような画面になる。

左下の「Headers」をクリックして以下を入力。
Bearer がないとエラーになる。

{
    "X-Auth-Email": "YOUR_EMAIL",
    "Authorization": "Bearer YOUR_API_TOKEN"
}

「Variables」をクリックして以下を入力。

{
  "accountId": "ACCOUNT_ID",
  "zoneId": "ZONE_ID",
  "start": "2024-03-10T02:07:05Z",
  "end": "2024-03-10T17:07:05Z"
}

試しに以下のクエリを入力してみて、Authエラーにならなけりゃまずは良さそう。

{
  viewer {
    zones(filter: {zoneTag: $zoneId}) {
      firewallEventsAdaptive(
        filter: {datetime_gt: $start, datetime_lt: $end}
        limit: 2
        orderBy: [datetime_DESC]
      ) {
        action
        datetime
        host: clientRequestHTTPHost
      }
    }
  }
}

VSCodeなどと同じ様に⌘を押しながらホバーすると以下のようになりクリックすると型定義が見れる。
limit: uint64! など!がついているものは必須の引数。
型定義が見れなさそうなら ⌘ + Shift + R でリロードすること。
ただ、Ctrl + Nで次の行に行った時も毎回補完一覧出してくるのうざすぎる。

参考

GraphQL Analytics API · Cloudflare Analytics docs

saneatsu

【2024-03-16】GraphQLでアクセス数を取得する（2. クエリ書いてみるけど無料版を利用しているので実行不可）

実装

1. 調査

ここを見るかぎり httpRequestsAdaptiveGroups を使うらしい。

2. 書いてみるがエラーになる

クエリを書いてみたが以下のエラー文が出てうまくいかない。

"message": "zone 'YOUR_ZONE_ID' does not have access to the path. Refer to this page for more details about access controls: https://developers.cloudflare.com/analytics/graphql-api/errors/",

{
    viewer {
        zones(filter: {zoneTag: $zoneId}) {
            series: httpRequestsAdaptiveGroups(
                limit: 100,                
                filter: {
                    datetime_geq: $start
                    datetime_lt: $end                    
                }
            ) {
                sum {
                    visits
                    edgeResponseBytes
                }
            }
        }
    }
}

3. 原因調査

ここを見る限り「無料利用だからアクセスできない」ということが書いてある。
ただ、記事が古いし信用していいのか...？

探し回っていると以下の公式ドキュメントを発見。
データセット（今回の場合はhttpRequestsAdaptiveGroups）へアクセスできるかどうかをチェックできるっぽい。

Settings node · Cloudflare Analytics docs

以下を実行してみる。

{
  viewer {
    zones(filter: { zoneTag: $zoneId }) {
      settings {
        httpRequestsAdaptiveGroups {
          enabled
          maxDuration
          maxNumberOfFields
          maxPageSize
          notOlderThan
        }
      }
    }
  }
}

以下が返ってきた。
"enabled": false。
利用できないです、っと...。

{
  "data": {
    "viewer": {
      "zones": [
        {
          "settings": {
            "httpRequestsAdaptiveGroups": {
              "enabled": false,
              "maxDuration": 0,
              "maxNumberOfFields": 30,
              "maxPageSize": 10000,
              "notOlderThan": 0
            }
          }
        }
      ]
    }
  },
  "errors": null
}

GraphQL API - Limits · Cloudflare Analytics docs

ここを見ると各ノードの制限は以下のような種類があるらしい。

どのくらい遡ってデータをリクエストできるか、
1 つのクエリでリクエストできる最大期間 (秒単位)、
1 つのクエリでリクエストできるフィールドの最大数、
1 つのクエリで返されるレコードの最大数。

Zone Analytics · Cloudflare Analytics docs

ここを見ると以下のように書いてある。
VisitsとPage viewsはPro以上じゃないとWeb上で表示されないし、GraphQLでも叩けないっぽい。

Pro、Business、Enterpriseプランでは、プライバシーを第一に考えたウェブトラフィック分析が利用できます。
解析はCloudflareのエッジログに基づいており、サードパーティのスクリプトやトラッカーは必要ありません。Trafficタブには以下のメトリクスがあります：
・訪問- 訪問とは、別のウェブサイトまたは直接リンクから発生したページビューと定義されます。CloudflareはHTTPリファラーがホスト名と一致しない場合にチェックします。1つの訪問は複数のページビューで構成されることがあります。
・ページビュー- ページビューはContent-typeがHTMLのHTTPレスポンスが成功したものと定義されます。
リクエスト- HTTPリクエスト。典型的なページビューでは、多くのリクエストが必要です。
・Data Transfer- リクエストで転送されたHTTPデータの合計。
より詳細なメトリクスを受信するには、フィルタを追加します。また、Referer、Host、Country、Path、Status Code、Origin Status Code、Browser、Operating System、Device Typeで各メトリクスをフィルタリングできます。
期間を変更するには、グラフの上にある右側のドロップダウンメニューを使用します。また、ドラッグしてグラフを拡大することもできます。

アプリケーションサービスプラン | 料金設定 | Cloudflare

あとこのページの「すべての機能を比較」ボタンを押すとプランごとにできることの比較表が出てくるけど、ここから利用可能なノードが異なるということは読み取れなかった。