おうちにかえりたいブログ

無料枠あり！Cloudflare Pages FunctionsとCloudflare D1を使ってHugoにアクセス解析をつけた

このブログはCloudflare PagesとHugoで完全無料できています。

無料のアクセス解析にはたとえばこれらがあります。

しかしこれらは便利なUIはあるものの、 生のログが見れなかったり見れても扱いにくいデータだったりとつらいものがあります。

今回は完全無料であるこの単なるブログに加えて、 無料枠のあるCloudflare Pages Functionsを使ってちょっとしたアクセス解析を追加してみることにしました。

実装

改造するべき箇所は２箇所です。<head>と/functionsです。

<head>に入れる<script>

{{ if hugo.IsProduction }}
<script>
(async()=>{
	await fetch(
		new Request(
			'/analytics',
			{
				method:'POST',
				headers:new Headers([
					['Content-Type','application/json'],
				]),
				body:JSON.stringify({
					url:window.location.href,
					referrer:window.document.referrer,
					screen:{
						width:window.screen.width,
						height:window.screen.height,
						depth:Math.max(window.screen.pixelDepth,window.screen.colorDepth),
					},
					platform:window.navigator.platform,
				}),
			},
		),
	);
})();
</script>
{{ end }}

JSONには適当に収集したい情報を突っ込みます。

/functions/analytics.js

このファイルに届いた情報をどう保存するかなどを書きます。

let request_body=await context.request.text();

let url=context.request.headers.get('Referer');

let db=context.env[analytics_env_name];
let stmt=db.prepare('INSERT INTO access (timestamp,url,source_ip,request_body)VALUES(?,?,?,?);');
let result=await stmt
	.bind(
		Date.now(),
		url,
		context.request.headers.get('X-Real-IP'),
		request_body,
	)
	.run();

(悪意のない)クライアントからJSONが届きますが、これをそのまま格納します。 それはこのD1がほぼSQLite3なのでJSONをSQLからつかうことができるからです。

結果を見る

まだ作っていないので、DashboardでSQLを手入力します。