[Nuxt] 빌드 후 동적 프록시 설정하기

이 글에서는 Nuxt 애플리케이션에서 빌드 후 런타임 환경 설정을 통해 외부 API로의 프록시를 구현하는 방법을 설명합니다.

📌 왜 빌드 후 동적 프록시인가?

Nuxt 프로젝트는 종종 빌드 환경과 운영 환경의 API 주소가 달라질 수 있습니다. 이때 빌드 후에도 쉽게 API의 엔드포인트를 변경하기 위해 런타임 시 프록시 설정을 활용할 수 있습니다.

---

Nuxt 서버 라우트 설정하기

아래와 같이 서버 라우트를 설정하여, 모든 /spring 경로의 요청을 동적으로 지정된 API로 프록시할 수 있습니다.

예시 코드 (server/routes/spring/[...].ts)

export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig();
  const targetURL = config.springApiBaseUrl + event.node.req.url?.replace(/^\/spring/, '');

  return proxyRequest(event, targetURL);
});

이 코드는 요청 경로에서 /spring을 제거한 후 런타임 설정(springApiBaseUrl)에 정의된 외부 API로 프록시 요청을 전달합니다.

---

런타임 환경 변수 설정하기

nuxt.config.ts 설정 예시

export default defineNuxtConfig({
  runtimeConfig: {
    springApiBaseUrl: process.env.SPRING_API_BASE_URL
  }
});

운영 환경에서 환경변수를 지정합니다.

# deployment.yml
...
env:
    - name: NUXT_SPRING_API_BASE_URL
      value: https://api.example.com

 

API 호출을 위한 재사용 가능한 컴포저블

다음과 같은 재사용 가능한 컴포저블(useSpringApi)을 통해 편리하게 API 호출을 처리할 수 있습니다.

예시 코드 (useSpringApi.ts)

import type { AvailableRouterMethod } from 'nitropack';
import type {
  TApiResponse,
  TFetchOptions,
  TFetchResult,
  TSpringError,
} from '@/constants/types/api';
import { Method } from '@/constants/enums/enums';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type TRequestData = Record<string, any> | undefined;

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export type TSpringApi<TQuery extends TRequestData, TBody extends TRequestData, TRes> = {
  url: string;
  method: Uppercase<AvailableRouterMethod<string>>;
  query?: TQuery;
  body?: TBody;
  fetchOptions?: TFetchOptions;
  useClientFetch?: boolean;
};

export const useSpringApi = async <TQuery extends TRequestData, TBody extends TRequestData, TRes>({
  url,
  method,
  query,
  body,
  fetchOptions,
  useClientFetch,
}: TSpringApi<TQuery, TBody, TRes>): Promise<TFetchResult<TRes>> => {
  const targetUrl = '/spring' + url;
  const isGetMethod = method === Method.Get;
  const { headers, ...restFetchOptions } = fetchOptions || {};

  const { getSession, signOut } = useAuth();
  const session = await getSession();
  const accessToken = session?.accessToken;

  try {
    const { data } = await $fetch<TApiResponse<TRes>>(targetUrl, {
      method,
      query,
      body,
      headers: {
        ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
        ...headers,
      },
      ...restFetchOptions,
    });

    return data;
  } catch (error) {
    const errorData = (error as { data: TSpringError }).data;

    if (errorData.statusCode === 401) signOut();

    if (isGetMethod && !useClientFetch) {
      throw error;
    } else {
      return errorData;
    }
  }
};

 

동작 확인

Nuxt 서버를 실행한 후 클라이언트가 /spring/api/endpoint와 같은 경로로 요청을 보내면, 요청은 프록시 서버를 통해 최종적으로 다음과 같은 경로로 전달됩니다.

https://api.example.com/spring/api/endpoint