proxy를 사용할 수 있는 방법에는 두가지가 있다.
오늘 실습에서는 이 두가지를 이용해서 proxy를 사용해봤다.
웹팩을 이용한 프록시는 생각보다 수월했다..!
my-app(client)에 있는 package.JSON 맨 밑에 "proxy" : "우회할 API 주소" 를 넣어주고 기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거하면 된다. 예를 들면 fetch('우회할 api주소/params') 로 되어있는 부분을 fetch('/params'); 로 고쳐주면 된다.
나는 proxy 값 안에는 localhost://3080만 주고 fetch 안에 api/params 의 형태로 값을 줬다!
되어야하는데 처음 보는 오류가 등장했다..! index.js 파일에 "<" 문제라는데 아무리 생각해도 이게 진짜 문제일거라고는 생각이 안들었다. 그래서 각각 서버, 클라이언트 터미널에서 control+c 로 종료하고 새로 돌리니 바로 잘 돌아가는 것을 확인!! 다음에 잘 안돌아가는거 같을때는 바로 이 방법을 사용했더니 곧잘 돌아가는 것을 확인할 수 있었다.
다음 두번째 방법은 npm install 이 필요한데 이것을 클라이언트와 서버중 어디에 설치해야하는지 조금 고민이 되었다..(chat gpt의 도움을 받은 결과) 프로젝트 루트 디렉토리에 설치하면 된다길래 npm install http-proxy-middleware --save 로 루트 디렉토리에 설치했다 그 후에는 setupProxy.js을 클라이언트/src 안에 만들어서 밑의 코드를 입력해야한다.
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, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
})
);
};
이 코드는 도메인이 하나만 사용될 때이고 도메인이 한개 이상 사용 될 때도 있다. 실습 과정에서 그런일이 있었다.
그때는 밑의 코드를 이용하면 된다.
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
["/api1", "/api2"],
createProxyMiddleware({
target: "http://localhost:3080",
changeOrigin: true,
router: { "/api2": "http://localhost:3070" },
})
);
};
이렇게 작성해주고 첫번째 방법과 같이 fetch의 도메인 부분을 지워주면 된다! 이 두번째 실습을 할때 뭐까지 고쳐야하는지 모르고 계속 했는데 일단 첫번째 다른 서버도 켜야한다..!(어쩌면 당연한거지..하하) 두번째 컴포넌트들을 만들어줘야한다.(하지만 나는 그냥 수정했다..) proxy가 있으면 편하다는 것을 알게 되었다.