Proxy

Proxy

클라이언트가 자신을 통해서 다른 네트워크 서비스(서버)를 간접적으로 접속하게 도와 주는 시스템

React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 proxy 기능을 사용하면 CORS 정책을 우회

 

Proxy 작동원리

프록시 서버를 사용하면 요청한 웹 서버로 이동하기 전에 트래픽이 장치에서 프록시로 이동

웹 사이트의 모든 응답은 프록시 서버로 돌아가서 사용자에게 전달

 

Proxy를 사용하는 이유

우회 제한	학교나 직장에서 재미있는 IP 주소를 차단하면 프록시 서버에 연결할 수 있습니다. 그렇게 하면 직장/학교의 방화벽에서 귀하가 kitts247.com이 아닌 프록시 서버에 연결하는 것을 볼 수 있습니다. 프록시가 자체적으로 차단되지 않으면 요청이 진행됩니다.
스트리밍 익명화	스트리밍할 때도 비공개로 유지하려면(스트리밍 서비스에 대한 유료 구독자인 경우 가능한 한 많이) 프록시를 사용하할 수 있습니다. 그러나 암호화된 프록시인지 확인해야 합니다. 무료 프록시는 보안 및 개인 정보 보호를 위해 아무 역할도 수행하지 않습니다!
온라인 보안 향상	개인 사용자에서 기업에 이르기까지 프록시는 온라인에서 악의적인 공격을 방어하는 방화벽 역할을 할 수 있습니다. 그리고 가장 기본적인 수준에서 IP, 즉, 장치의 온라인 주소를 가려 보안을 강화할 수 있습니다. 귀하가 귀하의 신원을 밝히지 않으면 웹 사이트를 방문한 사람이 귀하인지 아무도 모를 것입니다!
인터넷 사용 제어	이는 스트리밍 팬이 아닌 자체 프록시를 설정하는 회사 또는 기타 사용자에게 주로 중요합니다. 프록시를 제어하는 경우 일부 웹 주소를 금지하여 자녀, 직원 또는 프록시를 통해 실행되는 네트워크를 사용하는 사람이 원하지 않는 곳으로 가지 못하도록 할 수 있습니다.
속도 향상, 대역폭 절약	사람들보다 회사에서 더 흥미로운 또 다른 용도는 프록시 서버가 자주 액세스하는 웹 사이트의 복사본을 캐시(저장)하는 것입니다. 또한 5명의 사용자가 동일한 웹 페이지를 방문하는 경우(특히 내부 네트워크를 사용할 때) 서버는 해당 웹 페이지를 한 번 핑한 다음 5명의 사용자에게 정보를 분배하여 네트워크 부하를 줄일 수 있습니다.

 

 

VPN과 프록시의 주요 차이점

프록시	VPN
브라우저 트래픽 라우팅	장치의 모든 트래픽 라우팅
IP 변경	IP 숨김
암호화가 있을 수 있음	암호화됨

 

차이점은 검색을 비공개로 유지하는 데 사용되는  프로토콜과 선택적 데이터 암호화라는 두 가지 주요 구성 요소에 있다. 프리미엄 VPN을 사용하면 모든 데이터 인터넷 암호화에서 백그라운드에서 실행되는 음악 앱과 같이 일부만 암호화하는 것까지 선택할 수 있다.

 

 

Proxy 사용법

webpack dev server proxy

webpack dev server에서 제공하는 proxy 기능을 사용하는 방법

브라우저 API를 요청할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 개발서버의 주소로 우회 요청

웹팩 개발 서버에서 해당 요청을 받아 그대로 백엔드 서버로 전달하고, 백엔드 서버에서 응답한 내용을 다시 브라우저쪽으로 반환

웹팩 개발서버의 proxy 설정은 원래 웹팩 설정을 통해서 적용을 하지만, CRA 를 통해 만든 리액트 프로젝트에서는 package.json 에서 "proxy" 값을 설정하여 쉽게 적용할 수 있도록 구성

...
"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
	"proxy" : "우회할 API 주소"
}

//변경 전
export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}
// 변경 후
export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}

 

React Proxy 사용법

webpack dev server 에서 제공하는 proxy는 전역적인 설정이기 때문에, 종종 해당 방법이 충분히 적용되지 않는 경우가 생기기도 한다.

그래서 수동으로 proxy를 적용해줘야 하는 경우가 있는데, 이때는 http-proxy-middleware 라이브러리를 사용

 

http-proxy-middleware 라이브러리 설치

npm install http-proxy-middleware --save

React App의 src 파일 안에서 setupProxy.js 파일을 생성하고, 안에서 설치한 라이브러리 파일을 불러온 다음, 아래와 같이 작성

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', //proxy가 필요한 path prameter를 입력합니다.
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟이 되는 api url를 입력합니다.
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
    })
  );
};

기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거

//변경 전
export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}
// 변경 후
export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}