처음부터 웹 분석 - 1부: 페이지 조회수

내 블로그에 원래 게시됨here.

Google 웹로그 분석은 거의 70%의 웹사이트에서 사용되는 데는 그만한 이유가 있습니다. 매우 강력한 도구이며 더 중요한 것은 무료이고 사용하기 쉽지만 Google이 모든 데이터를 소유하고 사용한다는 단점이 있습니다. "Matamo 또는 Open Web Analytics를 사용하세요!"그것이 가장 쉬운 해결책이라는 말을 듣고 당신 말이 옳습니다. 하지만 우리 모두는 그것이 재미가 없다는 데 동의할 수 있다고 생각합니다.

이 시리즈에서는 처음부터 간단한 웹사이트 분석 서비스를 만들 것입니다. 이 부분은 원시 페이지 뷰를 추적하기 위한 기본 API를 만드는 것에 관한 것이지만 나중에 더 많은 통계가 추가될 것입니다.

웹 서버 설정

먼저 기본 웹 서버를 설정해야 합니다. 나는 Fastify 을 사용할 것이지만, Express나 다른 프레임워크를 사용하는 것은 그리 어렵지 않을 것입니다.

import fastify from "fastify";

const app = fastify({ logger: true });

// Routes
app.get("/", async (req, reply) => {
  hello: "world";
});

const port = Number(process.env.PORT) || 3000;
app
  .listen(port, "0.0.0.0")
  .then(() => console.log(`Listening on port ${port}`));

이제 웹 서버가 있으므로 클라이언트가 페이지를 로드할 때 사용할 경로를 추가할 수 있습니다.

import { FastifyPluginCallback } from "fastify";

const plugin: FastifyPluginCallback = async (fastify, opts, done) => {
  fastify.post("/tracker", async (req, reply) => {
    if (typeof req.body !== "object") return;

    // Record client data

    return { success: true, message: "Recorded analytics data" };
  });

  done();
};

export default plugin;

그런 다음 app.ts에 등록하십시오.

import fastify from "fastify";
import routes from "./routes";

const app = fastify({ logger: true });
app.register(routes);

const port = Number(process.env.PORT) || 3000;
app
  .listen(port, "0.0.0.0")
  .then(() => console.log(`Listening on port ${port}`));

데이터 저장

이제 클라이언트가 정보를 보낼 수 있으므로 이를 저장할 방법이 필요합니다. GDPR 및 CCPA에 따라 개인 데이터를 저장하지 않기 때문에 기본적으로 많은 카운터만 저장하게 됩니다. 나는 Redis이 이것을 위해 완벽 할 것이라고 결정했습니다.

Fastify를 사용하면 fastify-redis 플러그인을 사용하여 단일 Redis 클라이언트를 공유할 수 있습니다.

import fastifyRedis from "fastify-redis";

app.register(fastifyRedis, {
  host: process.env.REDIS_HOST || "127.0.0.1",
  port: Number(process.env.REDIS_PORT) || 6379,
});

그러면 다음과 같이 조회수를 추적할 수 있습니다.

fastify.post("/tracker", async (req, reply) => {
  if (typeof req.body !== "object") return;

  await fastify.redis.incr("views");

  return { success: true, message: "Recorded analytics data" };
});

그런 다음 이 엔드포인트를 몇 번 호출하면 redis 콘솔에서 다음과 같이 개수를 볼 수 있습니다.

> GET views
"3"

페이지뷰

페이지당 조회수와 같은 더 많은 데이터를 저장하기를 원할 것입니다. 먼저 트래커 엔드포인트에 resource 속성을 추가할 수 있습니다.

fastify.post("/tracker", async (req, reply) => {
  if (typeof req.body !== "object") return;
  const url = new URL(req.body.url);

  await redis.hincrby(`${url.hostname}:resources`, url.pathname, 1);

  return { success: true, message: "Recorded analytics data" };
});

이 정보를 기록할 수 있는 클라이언트와 기록된 분석 데이터를 가져오는 끝점을 만드는 이 시리즈의 다음 부분을 기대해 주십시오.