[Vite] Vite proxy 설정 (Error: connect ECONNREFUSED ::1:8000 at TCPConnectWrap.afterConnect [as oncomplete])

문제상황

현재 React 프로젝트에서 Vite를 사용하고 있다.

 

리액트는 빌드되어 백엔드에서 정적 파일로 배포할 것이다.

 

따라서, 현재 리액트에서 보내는 요청은 모두 localhost:8000/api로 시작하는 주소로 보내고 있다.

 

따라서 배포가 된다면 {서버 IP}:8000/api로 보내야 할 것이다.

 

같은 서버에서 백엔드가 정적 파일을 전달할 것이기 때문에 클라이언트는 상대경로를 이용해 api 요청을 보낼 수 있을 것이다. (/api/test => {서버 IP}:8000/api/test)

 

하지만, 로컬의 경우는 여전히 localhost:8000으로 api 요청을 보내야 한다.

 

해결과정

이를 해결하기 위해 proxy 설정이 필요했다.

 

개발 환경에서 보내는 요청은 localhost:8000으로 보내고 빌드된 경우는 어차피 같은 경로기 때문에 상대 경로로 api 요청을 할 수 있기 때문이다.

 

Vite에서 proxy 설정을 하는 방법은 아래와 같다.

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
    },
  },
});

 

기존 CRA 기반의 리액트에서는 단순히 package.json에서 설정했으면 되지만 Vite의 경우는 vite.config에서 설정해야 한다.

 

위와 같이 설정하여 /api로 시작하는 주소로 가는 요청을 http://localhost:8000으로 프록시 설정을 해줬다.

 

따라서, /test는 localhost:3000/test로 요청이 가게 될 것이고 /api/test는 localhost:8000/api/test로 요청이 가게 될 것이다.

 

또한, 위와 같이 프록시 설정을 해줬다면 axios(또는 fetch)에서 상대경로로 작성해줘야 한다.

axios
  .get('/api/test')
  .then((response) => {
    console.log(response.data);
    setApiTest(response.data.message);
  })
  .catch((error) => {
    console.log(error);
    setApiTest(`${error.code} ${error.message}`);
  })

 

또 다른 문제

위와 같이 작성했으나 오류가 발생했다.

연결이 제대로 되지 않는 문제가 발생했다.

 

찾아보니 localhost는 일반적으로 시스템의 loopback 네트워크 인터페이스를 참조하며, 이는 IPv4에서 127.0.0.1로 해석되고 IPv6에서는 ::1로 해석된다고 한다.

 

위의 에러를 보면 ::1로 변환되었음을 알 수 있다.

 

서버에 별도의 설정을 하지 않았기 때문에 IPv4가 필요했다.

 

따라서, 이를 해결하기 위해 localhost를 사용하는 대신 127.0.0.1을 사용하여 IPv4임을 명시해줬다.

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
      },
    },
  },
});

 

위의 과정을 통해 Vite 기반의 프로젝트에서 proxy 설정을 할 수 있었다.