[react proxy] react proxy 여러 개 설정하기, createProxyMiddleware에서 경로 여러 개 설정, react 파일형식 proxy 허용 방법, proxy 와일드카드 설정

react와 node.js로 공부 중에 경로를 여러가지로 설정하고 싶단 생각이 들었다...

기존에 springBoot, java, html(thymleaf)로만 개발을 해서 그런지 url을 여러가지 쓰는게 습관이...

 

코찔이라서 react같은 SPA에서 경로가 여러개이면 문제가 되는지는 잘 모른다는 점 양해바랍니다....

 

암튼 기존에 쓰던 '/api' 경로 외에 새로운 경로를 createProxyMiddleware proxy에 추가하는 법을 알아보자.

참고한 사이트는 이 곳 : www.npmjs.com/package/http-proxy-middleware

http-proxy-middleware

약 3분의 1지점에 있다.... 번역본으로 들고오자면

경로 일치 createProxyMiddleware({...}) - 모든 경로와 일치하면 모든 요청이 프록시 처리됨. createProxyMiddleware('/', {...}) - 모든 경로와 일치하면 모든 요청이 프록시 처리됨. createProxyMiddleware('/api', {...}) - 다음 경로로 시작하는 일치 /api 다중 경로 일치 createProxyMiddleware(['/api', '/ajax', '/someotherpath'], {...}) 와일드카드 경로 일치 createProxyMiddleware('**', {...}) 모든 경로와 일치하면 모든 요청이 프록시 처리된다. createProxyMiddleware('**/*.html', {...}) 끝나는 모든 경로와 일치 .html createProxyMiddleware('/*.html', {...}) 경로 추적 바로 아래에 있는 경로 일치 createProxyMiddleware('/api/**/*.html', {...}) 다음 항목으로 끝나는 요청 일치 .html 의 도중에 /api createProxyMiddleware(['/api/**', '/ajax/**'], {...}) 여러 가지 무늬를 조합하다 createProxyMiddleware(['/api/**', '!**/bad.json'], {...}) 배제 참고: 다중 경로 일치에서는 문자열 경로와 와일드카드 경로를 함께 사용할 수 없다. 세밀한 제어를 위해 와일드카드 매칭을 사용할 수 있다. 글로브 패턴 매칭은 마이크로매치로 한다. 마이크로매치나 글로브에 방문하여 글로브화 예시를 더 자세히 알아보세요. 사용자 정의 매칭 전체 제어를 위해 어떤 요청을 프록시로 해야 하는지 여부를 결정하는 사용자 지정 함수를 제공할 수 있다.

 

createProxyMiddleware에서 설정할 수 있는 경로의 종류가 꽤나 많았다!!

 

난 처음에 '**' 와일드카드를 썼는데 그렇게하니까 기존 페이지가 요청한 경로를 server에서 못찾는 듯 한 에러가 떴다...

 

 

후기는 아래 주소...(해결법은 여기 안적혀 있음) : xively.tistory.com/19

[react + node.js] GET http://localhost:3000/ 404 (Not Found) 에러 시 확인해야 할 것

 

보니까 여러 경로에서 proxy를 허용해주고자 한다면 [ ] 배열형태를 쓰면 되는 것이였다... 이 간단한 것을 몰랐군

 

기존 src에 만들어 뒀던 setupProxy.js파일을 수정하였다.

 

setupProxy.js

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

module.exports = function (app){
    app.use(
        createProxyMiddleware(['/api','/hello'], {
            target: 'http://localhost:3001',
            changeOrigin: true
        })
    )
};

 

이런식으로 추가해주면 되는 것이였다.

---

참고로 ['/api', '**'] 이런건 안된다.... 

 

그리고 파일형식을 proxy에서 허용해주고 싶다면

-> createProxyMiddleware('/*.html', {...}) 이렇게 하면 된다고 적혀있따!!

 

이렇게 proxy 여러개 설정할 사람은 없을 것 같지만... 혹시 나같은 분이 있을까봐 기록해놓기로 했따.

다들 즐코딩~~~ ヽ(✿ﾟ▽ﾟ)ノ