Next.js proxy를 활용한 이벤트 유실 예방하기

이전 포스팅인디자인 패턴(Singleton, Facade)을 사용한 Analytics 코드설계에서 Analytics 코드에 관한 내용을 공유했었습니다. 2주 동안 이벤트를 수집하는 과정에서 한 가지 이슈가 발생했습니다. analytics를 통해 수집한 데이터와 실제 데이터를 비교했더니 25% 정도의 데이터 손실이 있었습니다. 아무래도 client side에서 이벤트를 수집하다보니 ads blocker에 의해 손실이 발생한 것 이었죠. 이를 해결하기 위해 Next.js api route로 proxy 서버를 구축했던 경험과 그 과정에서 겪었던 어려움을 공유해보겠습니다.

이 포스팅을 읽고 난 뒤에는 아래의 내용들을 이해하게 됩니다.

• Next.js로 proxy 서버 구축하기
• Client-Side Tracking vs Server-Side Tracking vs Tracking via Proxy

Why Proxy?

이벤트를 수집하는 방법에는 여러가지가 있습니다. client side tracking은 기존에 하던 방법처럼 frontend에서 이벤트를 수집하는 방법입니다. frontend의 상태를 가지고 이벤트를 쉽게 수집할 수 있는 장점이 있는 반면 앞서 언급했듯이 ads blocker의 영향으로 데이터 손실이 될 수 있다는 단점이 있습니다.

server-side tracking은 서버에서 이벤트를 수집하는 방법입니다. https는 stateless하므로 이벤트와 같이 보내야할 상태를 준비하기 힘들다는 단점이 있지만 매우 정확한 데이터를 얻을 수 있는 장점이 있습니다.

그 외에도 proxy 서버를 활용해 이벤트를 수집하는 방법이 있습니다. client-side tracking에서 analytics 서버로 이벤트를 전송하는 대신에 proxy 서버로 전송하기 때문에 ads blocker를 회피할 수 있는 장점이 있습니다. 다만 proxy 서버를 구축해야 한다는 번거로움이 단점일 것 같네요.

위 3가지 이벤트 수집 방법의 장단점과 아래의 판단을 근거로 하여 proxy를 활용해 이벤트 수집을 하기로 결정했습니다.

• frontend에 붙여놓은 analytics관련 코드를 모두 서버로 옮기기에는 많은 리소스가 든다고 판단 (동일한 metadata를 보내기 위해 서버 코드가 많이 변경되야함)
• 이미 Next.js로 되어있는 프로젝트이므로 proxy 서버를 구축하기가 매우 쉬움.

How to configure proxy server using Next.js

Next.js을 활용해 proxy 서버를 구축하는 방법은 크게 2가지로 나눌 수 있을 것 같습니다.

• Next.js rewrite 설정을 활용
• Api routes와 http-proxy 라이브러리 활용

Next.js rewrite 설정

Next.js에는 rewrite 설정을 할 수 있는 옵션을 제공하고 있습니다. 즉 아래와 같이 source와 destination을 구성하여 next.js server를 proxy 서버로 활용할 수 있습니다.

next.config.js

module.exports = {
  async rewrites() {
    return [
      {
        source: '/analytics/:slug',
        destination: 'https://analytics.com/:slug',
      },
    ]
  },
}

Api routes와 http-proxy 라이브러리 활용

다만 request를 변형하거나 활용해야하는 경우에는 라이브러리를 활용해 직접 proxy 서버를 구축해야 합니다. 아래는 next.js의 api routes와 http-proxy 라이브러리를 활용한 코드입니다.

 

externalResolver는 http-proxy를 사용하고 있기 때문에 명시적으로 옵션을 줬고, bodyParser의 경우 formData를 전송하는 경우도 있어서 사용하지 않도록 했습니다.

저는 여기서 changeOrigin 옵션을 설정하지 않아서 삽질을 했는데요. 여러분들은 그러지 마세요. origin이 달라지면 저 옵션을 꼭 켜야합니다.

export const config = {
  api: {
    externalResolver: true,
    bodyParser: false,
  },
};

const proxy: httpProxy = httpProxy.createProxy();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  proxy.web(req, res, {
    changeOrigin: true,
    target: targetUrl,
  });
}

마치며

client-side tracking의 한계를 직접 경험하며 이를 해결하기 위해 Next.js로 proxy 서버를 구축하는 것에 대해서 공유해보았습니다. 현 시점에서는 다시 proxy에서 client-side tracking으로 롤백을 했는데요. Vercel의 서버 비용이 부담이 되더라고요. 아무래도 서버에서 analytics로 직접 이벤트를 직접 콜하다보니 어쩔 수가 없는 것 같습니다.


그래도 이번 기회를 통해 각 이벤트 수집 방법에 대한 장단점도 알게 됐고 나중에 다시 구축할때는 삽질없이 빠르게 개발할 수 있을 것 같네요.