본문 바로가기
Javascript/React

Vite, 프록시 적용하기

by v8rus 2022. 10. 20.

Vite, 번들링이 굉장히 빠른 장점이 있어서 요청받은 기능을 구현하는데 사용하고 있다.

상시로 서버를 돌릴만큼의 서비스는 아니기에 로컬 환경에서 처리하는것이 적당했다. 다만, 외부 API가 필요한 상황이라 API 호출 시 CORS 문제를 일으켰다. 특히, 네이버는 서버에서만 API를 처리함을 강제하고 있어 어쩔 수 없이 CORS를 잡고 넘어가야 했다.

 

간단하게 프록시로 우회하여 사용하려 했으나 예전처럼

  1. package.json에 proxy 추가

  2. htt-proxy-middleware 외부 라이브러리 적용

위 두가지를 붙여보았으나 정상적으로 동작하지 않았다.

 

Vite 공식 홈페이지를 이리저리 찾아보니 Server option을 주는 방법이 조금 남달랐다.

Vite 프로젝트를 생성하면 루트폴더에 vite.config.js 파일이 생성되는데 이 파일을 아래와 같이 설정하면 된다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server : {
    proxy : {
      '/api' : {
        target : "https://naveropenapi.apigw.ntruss.com",
        changeOrigin : true,
        rewrite : (path) => path.replace(/^\/api/, ''),
        secure : false,
      }
    }
  }
})

간단하게 보면

클라이언트에서 "https://DOMAIN/api/alpha/beta" 로 요청한다. "/api"라는 Path를 추가하여 프록시를 거치도록 하였다.

DOMAIN을 사용자가 지정한 도메인으로 바꾸고, Path중 프록시를 거치기위해 임의로 추가한 "/api"를 제거한다.

최종적으로 프록시를 통해 "https://naveropenapi.apigw.ntruss.com/alpha/beta" 로 요청을 보내게 된다."

 

간단하다.

 

이전의 방식들과 같이 여러개의 proxy 구성을 붙일 수 있다. 조금 더 자세히 알기위해서는 공식홈페이지로 ㄱㄱ

Server Options | Vite (vitejs.dev)

 

Vite

Next Generation Frontend Tooling

vitejs.dev

 

 

댓글