안녕하세요, heyjee 입니다 .
React 첫 순서로, React Framework 와 Express Server 사이에서 프록시를 설정해보겠습니다 .
cf) 프록시(Proxy)란?
> 서버와 클라이언트 (또는 또다른 서버)사이에서 중계 역할을 하는 것입니다 .
사실, 프록시 없이도 서버간 통신하는데에는 아~무런 문제가 되지는 않습니다 .
다만, 프록시를 사용하는 목적은 뭐니뭐니해도 '보안' 이게 가장 클 것입니다 . IP 를 우회하는 개념을 가지고 있다보니 말이죠 ~
예를 들어볼까요?
React Framework 는 port 3000번으로, Express Server 는 port 3001번으로 통신하고 있다고 가정해봅시다 .
이때, http://localhost:3000/api/getAllTrainsInfo 의 경로를 가진 API 를 요청하면 프록시를 통해 http://localhost:3001/api/getAllTrainsInfo 의 경로로 호출하게 됩니다 .
달리 말해서, 서로 다른 두 서버가 마치 하나의 서버처럼 작동하게 해주는 것이 바로 프록시 입니다 .
React 프로젝트에서 이러한 프록시를 설정하는 방법으로는 setupProxy 스크립트 파일을 생성해 주는 것이 있습니다 .
위에서 예를 들어본 것으로 프록시를 설정해보겠습니다 .
먼저, 프록시 설정을 위해 React 프로젝트 경로에 다음과 같은 모듈을 설치해줍니다 .
설치 후, 프로젝트 src 디렉토리의 바로 하위 경로에 프록시 스크립트 파일을 생성합니다 .
setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app){
app.use(
createProxyMiddleware('/api', {
target: 'http://localhost:3001',
changeOrigin: true
})
)
};| Line 4 ~ 9 : app.use() 를 사용해 http-proxy-middleware 를 app 오브젝트 인스턴스에 바인딩 |
| Line 5 : createProxyMiddleware()의 첫번째 파라미터로 '/api' string 할당 . 호스트 하위 경로가 '/api' 로 시작하는 모든 요청에 대해 프록시 경유 (e.g. http://localhost:3000/api/getAllTrainsInfo 로 요청 > 프록시 경유) |
| Line 6 ~ 7 : createProxyMiddleware 메소드의 두번째 파라미터로 다음과 같은 프로퍼티를 가지는 오브젝트를 할당 . 첫번째 프로퍼티인 target string : 들어온 요청은 할당된 target string 을 통해 호출됨 (중요) 두번째 프로퍼티인 changeOrigin 은 boolean value 를 가지며, 대상 서버의 구성에 따라 호스트 헤더를 변경해주는 옵션 |
원래 API 호출은 port 3001번을 통해서만 액세스가 가능하므로 port 3000번에 대해서 요청을 주면 에러가 발생하게 되지만,
이렇게 프록시 설정 후 port 3000번을 통해 API 요청을 주면, http://localhost:3001/getAllTrainsData 로 호출하게 되어 정상 호출 결과를 얻게 됩니다 .
혹시 수정이 되어야 할 부분이 있다면 얼마든지 코멘트 대환영입니다 . 감사합니다 :)