프록시 설정을 알아보자

• 회사 프로젝트를 하며 처음 프록시 관련 설정을 다뤄본 적이 있었는데, 그때부터 프록시에 대해 조금 정리해봐야겠다고 생각했었다.

---

일단 Proxy란?

Proxy Server (프록시 서버)

• 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 시스템 혹은 프로그램(위키피디아).
• 프론트엔드가 프록시를 설정하는 주된 이유로는 개발 시 CORS에러를 방지하기 위한 경우가 많다.

CORS(Cross-Origin Resource Sharing): 교차 출처 리소스 공유.

풀이하면 ‘서로 다른 출처 간의 리소스 공유’라고 할 수 있다.

‘출처(Origin)’이란 URL의 프로토콜, 호스트(도메인), 포트를 아울러 이르는 말이다. 두 URL이 출처를 이루는 모든 요소가 다 같다면 이들은 같은 출처를 가졌다고 말할 수 있다.

CORS 에러는 바로 이 두 출처가 같지 않을 때 발생한다. 자세한 내용이나 원리는 나중에 다른 글에서 자세히 다뤄보기로.

 

 

프론트엔드에서 프록시 설정하기

몇 가지 방법이 있는 것 같아서 참고겸 기록해둔다.

React 프로젝트에서 설정한다는 가정 하에 기록한다.

 

1. package.json 에서 프록시 설정하기

• 다만 이 방법은 CRA를 사용하여 프로젝트를 세팅하였을 때 유효하다.
  • react-scripts 가 사용된다고.

// 생략
{
  "proxy": "http://localhost:5000" // 여기서 프록시 설정을 추가한다
}

 

Proxying API Requests in Development | Create React App

• 이렇게 설정하면 React 개발 서버가 API 요청을 다른 서버로 전달하게끔 만든다.
  • 즉 개발 시 CORS 에러를 막기 위해 설정하는 것으로, 개발 환경에서만 작동한다.
• 오직 한 개의 프록시만 설정이 가능하므로, 복수의 프록시를 설정하고 싶다면 별개의 패키지를 이용해야 한다.

 

2. proxy 관련 패키지 사용하기

• 위에서 언급한 별개의 패키지를 사용하는 방법.
• http-proxy-middleware 가 대표적인 패키지. 이것의 경우 위의 CRA 공식 문서에서도 소개하고 있다.
• 공식 문서의 설정 과정을 가볍게 다뤄보면 아래와 같다.

yarn add http-proxy-middleware // yarn 이나 npm 등으로 패키지를 설치한다.

// src 디렉토리 내부에 setupProxy라는 파일을 생성하고, 개발 환경에 맞게 세팅한다.
// 아래는 공식 문서의 예제 코드이다.
const { createProxyMiddleware } = require('http-proxy-middleware');

// /api로 시작하는 요청을 http://localhost:5000로 프록시한다
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

 

 

+) Vite를 사용할 경우

• Vite를 사용할 경우, 별도의 패키지 설치 없이 프록시 설정이 가능하다.
• vite.config.ts 파일에 proxy 설정을 할 수 있다.
  • 서버에 관련된 각종 세팅이 들어가는 server 속성 내부에 추가하면 된다.

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({
    jsxImportSource: '@emotion/react',
    babel: {
      plugins: ["@emotion/babel-plugin"],
    },
  })],
  server: {
    '/api': { // React 예제와 같이 /api로 시작하는 요청을 http://localhost:5000로 프록시한다
	    target: 'http://localhost:5000',
      changeOrigin: true,
    }
  },
})

---

• CORS는 개발하며 흔하게 접할 수 있는 이슈인만큼, 나중에 조금 더 자세히 조사해서 글을 작성해봐야겠다.