react proxy 설정 방법
react에 proxy를 설정하는 방법으로는 두가지가 있다.
1. package.json에 "proxy":"~url"을 하는 방법
2. http-proxy-middleware를 설치하여 setupProxy.js를 설정하여 연결하는 방법
먼저 1번 package.json에 proxy를 설정하는 방법은 간단하다.
아래와 같이 proxy를 추가 해주면된다.
이 방법에는 단점들이 몇가지 있는데
1. localhost 즉 dev 에서만 프록시가 적용된다는 점.
2. commit할때 까먹고 proxy를 깜빡하고 지우지 않았다면 api주소가 노출되어 지웠다가 다시 올려야 되는 불상사가 일어날 수 있다.
두 번째 http-proxy-middleware를 설치하여 setupProxy.js를 설정하여 연결하는 방법은 먼저 라이브러리 추가가 필요하다.
npm i http-proxy-middleware를 통해 라이브러리를 설치한 후.
src폴더 아래 setupProxy.js 라는 파일 명으로 아래와 같이 작성한다.
위 코드에서 보면 apiServer라는 것으로 api서버주소를 작성하고 있는데
웬만하면 .env파일에 담아서 사용. 즉, 환경변수에 담아두고 사용하는것이 좋다.
그 다음으로 '/api' 부분은 엔드포인트에 해당하는 부분으로 api 주소를 받으면 ~/api/v1 , ~/api/v2 등등.. 변경이 있거나 구간을 나누는 url을 가지는 곳으로 이것 또한 환경변수로 저장하여 사용하는것이 좋다.
이 방법은 배포시에도 잘 작동하므로 사용하기 용이하다.
다만, 요즘 typescript의 사용이 많아 확장자를 ts로 할 경우 로컬환경(dev)에서는 인식을 못 할 수 있다.
배포를 할때는 build를 하게되어서 ts라는 확장자가 js로 변경되어 패킹이 되는데 로컬환경에서는 그렇지 못하고 바로 인식을 못 할 수 있다.
나의 경우 배포하면 잘되는데 로컬에서는 프록시가 설정이 안되서 1번 방법인 package.json에 작성하는 방법과 같이 사용하고 있었지만 왜 안될까라는 의구심을 가지고 찾아본결과 setupProxy.js라고 명시가 된 이유가 있을것같아서 ts임에도 불구하고 확장자를 js로 변경해서 사용해보니 적용되어 확인 했던 것을 계기로 알게되었다.
- 이것이 틀렸다면 댓글 달아주세요! 피드백 환영!
따라서 ts환경에서도 setupProxy.js 파일을 작성하여 사용할 것
이것으로 react에서 간단하게 proxy 설정을 해보았다.