nextjs에서 proxy설정해주기 (feat: next auth 예외처리)

CLOVA로 요청을 보내려면 CORS에러를 해결해야 했다.

이참에 모든 서버에 요청을

proxy로 출처를 변경하여 CORS에러를 해결해보기로 했다. 

 

 

proxy란? 

 

클라이언트와 서버 사이에 위치하여 

클라이언트의 요청을 받아 서버에 전달하고 

서버의 응답을 받아 클라이언트에 전달하는 중계자 서버 역할을 함.

 

쓰는이유 : 보안상 이유로 직접 통신할 수 없을 때 대리로 통신을 수행함. 

또한 중복되는 데이터를 반복하여 전달해야할 때 중복 요청에 대한 동일한 응답을 보냄. 

 

 

proxy의 종류

포워드 프록시

클라이언트 바로 뒤에 위치 

같은 내부망의 클라이언트의 요청을 받아 외부 서버의 데이터를 클라이언트에게 응답해줌 

특정 사이트의 접근을 제한하는 역할

방화벽과 같은 개념으로 제한을 위해 사용 

캐싱기능 서버부하감소 효과

 

 

 

리버스 프록시

서버 바로 앞에 위치 

클라이언트는 프록시로 요청하게 됨 

프록시가 서버에서 데이터를 가져옴

여기서 url이 프록시서버와 외부 서버가 통신하게 되므로

클라이언트의 url이 감춰지는 효과가 생기게 된다. 

배포시 nginx등이 그러한 특징을 가지고 있다. 

 

 

 

 

 

 

nextjs에서의 proxy설정

 

redirect와 rewrite

 

redirect

 

next.config.js

 

/** @type {import('next').NextConfig} */
const nextConfig = {
  redirects: async()=> {
    return [
        {
          source: '/',
          destination: '/home',
          permanent: true,
        },
      ]
    },
  }

export default nextConfig;

해당 source path로 접속했을 시

3** 번대 응답을 주게 되고 

클라이언트에서 제대로 된 path로 재요청을 보내면 응답을 해주는 것

 

destination으로 redirect해주는 것 

(초반에 이것으로 설정했다가 좀 헤맸다)

 

rewrite

/** @type {import('next').NextConfig} */
const nextConfig = {
  redirects: async()=> ({
      source: '/abcd',
      destination: '/gogo',
      permanent: false,
    })
  }

export default nextConfig;

 

고정 url및 dynamic path, 외부 url을 적용할 수 있음 

 

 

실제 본인이 적용한 코드 

  rewrites: async () => ({
    beforeFiles: [
      {
        source: '/api/:path*',
        destination: `${process.env.NEXT_PUBLIC_BASE_URL}/api/:path*`,
      },
    ],
  }),

 

여러 source에 대해 적용할 수 있다. 

 

 

next auth의 proxy 예외 설정 

 

로그인 인증은 next auth를 활용하고 있다. 

그런데 proxy설정을 하고 나니 next auth에서의 인증이 되지 않는 문제가 발생하였다. 

 

next auth는 서버측에서 인증 처리를 하고 있기 때문에

next js의 api라우트 내에서 실행되며 

인증관련 요청을 직접 처리한다.  

그러므로 CORS설정을 할 필요가 없게 되는 것이다. 

 

next js 의 api route란 

 

특정 api요청을 처리하기 위한 서버사이드 라우트

api/auth/[...nextauth]에 route.ts파일을 작성하여

route로 인증관련 요청을 할 수 있게 된다. 

 

 

 

 

 

🌐 Reverse Proxy / Forward Proxy 정의 & 차이 정리

Next.js의 Proxy

프록시(Proxy)란??