[Next.js] 특정 IP만 접근 가능하도록 설정 middleware 함수

Next.js에서 제공하는 기능으로 미들웨어(middleware)가 있다.
middleware는 페이지 요청을 가로채서 특정 조건에 맞는 로직을 수행할 수 있도록 도와주는 기능이다.

오늘은 그 기능을 활용해서 특정 IP만 접근 가능하도록 설정을 해보겠다.

import { NextResponse } from 'next/server'

// 접근을 허용할 IP 주소 리스트
const ALLOWED_IPS = ['127.0.0.1', '다른 IP']

export function middleware(req) {
  // 특정 IP만 접근 허용
  const ip =
    req.headers.get('x-forwarded-for')?.split(',')[0] ||
    req.headers.get('x-real-ip') ||
    req.ip ||
    '127.0.0.1'

  if (!ALLOWED_IPS.includes(ip)) {
    // 접근이 허용되지 않은 IP일 경우, 403으로
    return NextResponse.redirect(new URL('/403', req.url))
  }

  

// 미들웨어가 적용될 경로 설정
export const config = {
  matcher: '/:path*', // 모든 경로에 대해 이 미들웨어가 적용됨
}

코드는 간단하다.
http에서 ip를 조회하고 내가 추가한 ip가 아니면 403으로 리다이렉션 시킨다.

x-forwarded-for와 x-real-ip를 조회하는 이유는 프록시 서버나 로드 밸런서를 통해 요청이 들어올 때 클리아언트의 실제 IP주소가 아닌 프록시나 로드 밸런서의 IP주소가 표시되는 경우가 있어서 이렇게 되면 서버 입장에서는 원래 클라이언트의 IP가 아니라 중간 장치의 IP 주소만 알 수 있어 올바른 클라이언트 IP를 알기가 어렵다.
그래서 직접적인 클라이언트의 IP를 얻기 위해 x-forwarded-for나 x-real-ip와 같은 헤더를 사용해야 한다.

x-forwarded-for: 프록시나 로드 밸런서가 클라이언트의 원래 IP 주소를 기록해 전달하는 헤더이다. 여러 프록시를 거친 경우 여러 개의 IP가 기록되어 맨 앞의 IP가 원래 클라이언트 IP가 된다.
x-real-ip: 일부 프록시에서 클라이언트의 실제 IP를 나타내기 위해 사용되는 헤더로, 이 역시 클라이언트의 원래 IP 주소를 서버에 전달된다.