[VUEJS] Nuxtjs 3 프록시와 미들웨어

과연 next를 이길 수 있을까..?

 

nuxtjs 환경에서 프록시를 설정하여 API 서버와 서로 데이터를 주고받는 설정방법은 다양하게 존재 합니다.

조금 아쉬운 것은 nuxtjs 3버전의 자세한 설명이 매번 찾을 때 마다 어려웠었던 거 같습니다.

* 이래서 레퍼런스가 적고 사용자마저 적은 프레임워크는 안쓰..

 

1. @nuxt-alt/proxy 모듈 사용

일반적으로 nuxtjs를 사용할 때 "@nuxt-alt/proxy" 모듈을 추가해서 사용하는 방법이 있습니다.

해당 설정은 매우 간단하고 직관적 입니다.

아래는 설정파일 부분의 일부분 입니다.

* 파일 : nuxt.config.ts

{
  //기타 설정 생략...
  modules: [
    "@nuxt-alt/proxy",  //프록시 모듈
  ],
  proxy: {
    proxies: {
      "/교체할주소": {
        target: process.env.환경변수에선언한api서버주소,  //프록시 보낼 서버주소
        changeOrigin: true,
        agent: false,
        rewrite: (path: string) => {
          console.log("path:", path);
          return path.replace(/^\/교체할주소/, "");
        },
      },
    },
  },
    
}

 

직관적이고 설정 방법도 매우 쉬운지라 사용하는 데 문제가 없습니다.

다만 위 설정을 하게되면 아래와 같은 지속적인 경고문구를 만날 수 있습니다.

 

"Runtime config option proxy.proxies./교체할주소.rewrite may not be able to be serialized."

 

사용중인 프록시 설정에서의 직렬화 문제를 지속적인 경고를 보게 될 것이며, 

이에 대한 사이드이펙트가 존재 할 수도 있습니다.

그래서 nuxtjs의 3버전에서는  "@nuxt-alt/proxy" 는 그다지 좋은 방법은 아닌 듯 보입니다.

 

2. vite 설정 추가

nuxt에서 vite 설정을 통해서 프록시 환경을 구성하는 방법 입니다.

* 파일 : nuxt.config.ts

{
  //기타 설정 생략...
  ssr : false, //false인 경우에만 배포시 동작 합니다. 물론 개발모드에선 잘 됩니다.
  vite: {
    server: {
      proxy: {
        "/교체할주소": {
          target: process.env.환경변수에선언한api서버주소,  //프록시 보낼 서버주소
          changeOrigin: true,
          agent: false,
          rewrite: (path: string) => {
            console.log("path:", path);
            return path.replace(/^\/교체할주소/, "");
          },
        },    
      }
    },
  },
}

 

설정 방법은 복붙 수준으로 매우 같습니다.

사용하는데 사실 문제는 전혀 없지만 만약 SSR 설정이 true인 경우라면 프록시는 정상적으로 동작하지가 않습니다.

Nuxtjs 환경에서 ssr 값이 false 인 경우에 사용 가능하지만 true 인 경우라면 해당 설정은 올바르지 않습니다.

 

3. nitro 설정 추가

nitro 환경에서 proxy 탭을 추가하여 포워딩을 하는 방법 입니다.

* 파일 : nuxt.config.ts

{
  //기타 설정 생략...
  
  nitro: {
    routeRules: {
      "/교체할주소/**": {
        proxy: {
          to: `${process.env.환경변수에선언한api서버주소}/**`,
        },
        appMiddleware: {},
      },
    },
  },
}

 

 

해당 방법이 가장 깔끔하고 동작하는 데 문제도 없습니다만,

해당 프록시 설정을 통해서 요청이 바로 프록시가 되어버리기 때 문에 미들웨어쪽 기능이 동작하지가 않습니다.

미들웨어(middleware)를 거치지 않고 바로 프록시가 되기 때 문에 무언가 미들웨어에서의 설정이나 조건을 만든 경우라면 위 방법도 잘 고려해야 합니다.

 

4. 미들웨어(middleware) 디렉토리에 프록시(proxy) 파일 추가

미들웨어 디렉토리에 프록시 파일을 추가하는 방법 입니다.

위 방법은 코드가 좀 더 들어가긴 하여도 프록시 설정과 미들웨어 동작 둘 다 할수있다는 장점이 있습니다.

* 파일 : /server/middleware/proxy.ts

// /server/middleware/proxy.ts
export default defineEventHandler(async (event) => {
  const runtimeConfig = useRuntimeConfig();  //환경 변수를 가져오기 위한 설정

  if (!event.node.req.url?.startsWith("/교체할주소")) return;  //프록시 요청만 동작하도록 조건
  const session = await getUserSession(event); //이런 방식으로 세션접근 가능
  const proxyServerUrl: any =
    runtimeConfig.public.nuxt설정에선언한api서버주소 || process.env.환경변수에선언한api서버주소;
  const target = new URL(
    event.node.req.url.replace("/교체할주소", ""),
    proxyServerUrl
  );  //프록시 설정

  if (session && session.user && session.user) { //이런 방식으로 헤더추가 가능
    const user: any = session.user;
    const token: any = user?.token;
    event.node.req.headers["Authorization"] = `Bearer ${token}`;
  }

  return proxyRequest(event, target.toString(), {
    headers: {
      host: target.host,
      origin: target.origin,
    },
  });
});

 

내용이 직관적 입니다.

여기서 고려해야되는 부분은 process.env로 값을 가져오게 되면 개발모드에서는 문제없이 동작 하더라도 도커나 기타 리눅스환경 등에 적용이 되면 시스템(OS레벨) 환경변수를 참조하게 됩니다.

그러므로 환경변수 값을 가져와 주소를 교체하려면 반드시 nuxt.config에 사용할 변수값을 선언하여야 합니다.

* 파일 : nuxt.config.ts

{
  //기타 설정 생략..
  
  runtimeConfig: {
    public: {
      설정에선언한api서버주소: process.env.환경변수에선언한api서버주소,
    },
  },
}

 

위 샘플처럼 환변수의 값을 runtimeConfig에 넣어주고 일반 코드에서는 useRuntimeConfig 함수를 호출해서 nuxt.config 파일에 설정한 값을 가져와 사용하면 됩니다.

* env를 바로가져오는 습관은 아에 버리시는게 어떨까 합니다!!

 

nuxtjs 3버전 환경에서의 프록시 설정에 대해 정리하여 보았습니다.

개인적으로는 4번째 방법이 가장 좋았던거 같습니다.

nuxt의 레퍼런스가 좀더 많아지는 그날을 기대 해 봅니다...제발..ㅠ