Umamiブログアクセス統計Vercel+Cloudflare Wokersデプロイ

カバー

第一部分：Vercel+Umami#

第一步
1.1 Forkumamiを自分の Github リポジトリにフォークする

1.2 プロジェクトを作成する

index.mdx
第二步

　2.1 Vercel アカウントを作成します。ここでは省略しますが、GitHub で直接認証できます。

2.2 認証後、まずPostgresデータベースを作成します。次へ進むだけで、作成が完了したら、下の接続をコピーできます。

　　Copy Snippetをクリックすれば大丈夫です。貼り付けるときは、私が線を引いた部分だけを覚えておいてください。ダブルクォーテーションは必要ありません。環境変数を設定するためです。

　　 2.3 データベースを作成した後、メインページのOverviewに戻り、右上にあるAdd Newを選択してProjectを追加します。あなたがForkしたumamiを選択して追加します。
2.4 環境変数を設定します。DATABASE_URL、HASH_SALT、TRACKER_SCRIPT_NAMEのうち、DATABASE_URLの値は上で線を引いた部分です。他の 2 つの環境変数は、String として自由に定義できます。
　　 2.5 設定が完了したらDeployをクリックし、約 2 分待つと自動的にデプロイが完了します。デプロイが完了したら、下の図のパネルに表示されたリンクから直接アクセスできます。

　　 2.6 開くとログインアドレスが表示されます。デフォルトのログインパスワードはadminumamiです。ログイン後、自分のパスワードを変更し、設定内で統計を取るサイトを追加します。これで、他の人があなたのサイトにアクセスすると、パネルで統計データを見ることができます。

第二部分：Umami+Cloudflare worker#

この部分は、あなたのブログに表示されるアクセスデータを提供します。効果は以下の通りです：

CloudFlareアカウントを登録し、入ったらWorkersとPagesを選択し、作成をクリックし、次にデプロイをクリックします。

　　デプロイ後、コードを編集するために入って、内部のコードを置き換えます：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event));
});

const API_BASE_URL = 'https://umami.yourdomain.com';  // あなたの先ほどデプロイしたumamiのドメインに置き換え
const TOKEN = 'your_token'; // 取得したトークン
const WEBSITE_ID = 'your_website_id'; // umamiに追加したサイトのウェブサイトID
const CACHE_KEY = 'umami_cache';
const CACHE_TIME = 600; // キャッシュ時間（秒）

async function fetchUmamiData(startAt, endAt) {
  const url = `${API_BASE_URL}/api/websites/${WEBSITE_ID}/stats?startAt=${startAt}&endAt=${endAt}`;
  const response = await fetch(url, {
    headers: {
      'Authorization': `Bearer ${TOKEN}`,
      'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    console.error(`データ取得エラー: ${response.statusText}`);
    return null;
  }

  return response.json();
}

async function handleRequest(event) {
  const cache = await caches.open(CACHE_KEY);
  const cachedResponse = await cache.match(event.request);

  if (cachedResponse) {
    return cachedResponse;
  }

  const now = Date.now();
  const todayStart = new Date(now).setHours(0, 0, 0, 0);
  const yesterdayStart = new Date(now - 86400000).setHours(0, 0, 0, 0);
  const lastMonthStart = new Date(now).setMonth(new Date(now).getMonth() - 1);
  const lastYearStart = new Date(now).setFullYear(new Date(now).getFullYear() - 1);

  const [todayData, yesterdayData, lastMonthData, lastYearData] = await Promise.all([
    fetchUmamiData(todayStart, now),
    fetchUmamiData(yesterdayStart, todayStart),
    fetchUmamiData(lastMonthStart, now),
    fetchUmamiData(lastYearStart, now)
  ]);

  const responseData = {
    today_uv: todayData?.visitors?.value ?? null,
    today_pv: todayData?.pageviews?.value ?? null,
    yesterday_uv: yesterdayData?.visitors?.value ?? null,
    yesterday_pv: yesterdayData?.pageviews?.value ?? null,
    last_month_pv: lastMonthData?.pageviews?.value ?? null,
    last_year_pv: lastYearData?.pageviews?.value ?? null
  };

  const jsonResponse = new Response(JSON.stringify(responseData), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    }
  });

  event.waitUntil(cache.put(event.request, jsonResponse.clone()));

  return jsonResponse;
}

　　ただし、いくつかの重要なパラメータを変更する必要があります。API_BASE_URL、TOKEN、WEBSITE_IDのうち、API_BASE_URLとWEBSITE_IDは既にあります。WEBSITE_IDはumamiの設定で、追加したサイトを選択し、編集をクリックすると、サイトのWEBSITE_IDが表示されます：

　　 2.2 tokenを取得します。apiテストサイトhoppscotchに移動し、このページに移動すると、以下の図のようになります。

　　 2.2.1 リクエスト方法をpostに選択し、リンクの記入方法は：

https://あなたのumamiドメインまたはリンク/api/auth/login

　　 2.2.2 リクエストボディをBodyパラメータ形式をapplication/jsonに選択します。

{
 "username":"ユーザー名",
 "password":"パスワード"
}

　　 2.2.3 戻り値の中のtokenの内容が必要なtokenです。

{
  "token": "あなたのtoken", # 記録しておく必要がある内容
  "user": {
    "id": "41e2b680-648e-4b09-bcd7-3e2b10c06264",
    "username": "admin",
    "role": "admin",
    "createdAt": "2024-11-12T09:18:12.766Z",
    "isAdmin": true
  }
}

　　これで、あなたがデプロイするために必要なすべてのパラメータが揃いましたので、置き換えてください。

　　 2.3 デプロイ後、リンクが表示されます。もちろん、cloudflareでドメインをプロキシしている場合は、直接関連付けできます。

　　次に、クリックするか、コピーしてブラウザに貼り付けてリクエストすると、以下の結果が表示されます：

　　結果が表示されない場合は、デプロイした umami パネルでデータがあるかどうかを確認してください。データがある場合、ここでリクエストを行うとデータが得られます。ブラウザのキャッシュをクリアし、プロキシを開いてテストしてください。

第三部分：ブログ統計の追加#

　　データをaboutページに追加します。

tj: # 統計
  provider: custom # custom
  url: あなたのデータインターフェースのアドレス
  img: https://7.isyangs.cn/1/65eb2e9109826-1.png # 背景
  desc: # カード左下の説明

　　設定が完了しました～

　　感謝starsharborのブログの指導、原文

作者原文#

作者: Couture
リンク: https://www.coutures.top/posts/27233.html
出典: Couture
著作権は作者に帰属します。商業的な転載は作者に許可を得て行ってください。非商業的な転載は出典を明記してください。