네부캠 그룹프로젝트 - 7. (Bug) 백엔드에서 클라이언트 IP가 제대로 안읽힌다?

1️⃣ 문제 상황

1. 클라이언트에서 특정 사용자의 프로필 페이지에 접속

2. 클라이언트의 IP 주소를 바탕으로 Redis에 조회를 한다. 이 때, nginx에서 reverse proxy로 백엔드로 요청이 오므로, nginx에서 실제 클라이언트 IP를 X-Forwarded-For 헤더로 설정한다.

3. 백엔드에서 X-Forwarded-For헤더를 통해 실제 요청한 IP를 검증하게 된다.

4. Redis의 set자료구조에 해당 IP가 존재한다면 pass, 존재하지 않으면 추가 후 조회수 +1

2️⃣ 와… 네이버에서도 이용하는 서비스?!

3️⃣ 문제 원인 찾기(feat. next.js)

• 현재 프론트엔드 앱인 next.js와 백엔드 앱인 nest.js가 동일한 인스턴스에 존재한다.

• Nginx 설정 상 dreamdev.me 호스트는 프론트엔드인 next.js로 프록시된다.

• Nginx 설정 상 api.dreamdev.me 호스트는 백엔드인 nest.js로 프록시된다.

• 프론트 앱인 next.js는 SSR을 지원하는 프레임워크로 이를 위해 자체적인 BFF 서버가 따로 돈다.사용자 프로필 페이지는 업데이트가 잦기 때문에 SSR 방식으로 렌더링된다.

4️⃣ x-forwarded-for 헤더에 IP들을 append하도록 변경

1. 프론트엔드 측(Next.js)에서 SSR 시에 x-forwarded-for 요청 헤더를 설정하여 진짜 클라이언트(브라우저)의 IP를 명시하여 axios 요청을 보낸다.

2. nginx에서 요청을 받고, x-forwarded-for에 클라이이언트 IP를 추가한다.

3. 백엔드측에서 이를 받아서 x-forwarded-for헤더의 맨 앞 IP를 대상으로 로직을 수행한다.

export function ssrWrapper(namespaces, callback)=>{
  ...
  return async (context)=>{
    axiosInstance.defaults.headers.common['x-forwarded-for'] = context.req.headers['x-forwarded-for'];
    ...
  }
}

server {
  listen 443 ssl;
  server_name api.dreamdev.me;

  ssl_certificate /etc/letsencrypt/live/dreamdev.me/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/dreamdev.me/privkey.pem;

  location / {
    proxy_pass http://backend;
    # proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

5️⃣ 후기