상세 컨텐츠

본문 제목

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

React, Node.js, Express

by Jjiveloper 2021. 4. 10. 08:00

본문

728x90

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

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

 

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

 

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

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

 

http-proxy-middleware

The one-liner node.js proxy middleware for connect, express and browser-sync

www.npmjs.com

약 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) 에러 시 확인해야 할 것

계속 화면에 CAN NOT GET: 뭐 이런식으로 떴었다. 브라우저 console창을 확인하니 GET http://localhost:3000/ 404 (Not Found) 이런 에러가 떠있더라 서버가 문제인지 프론트엔드가 문제인지 한참 찾아봤는데 우.

xively.tistory.com

 

보니까 여러 경로에서 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 여러개 설정할 사람은 없을 것 같지만... 혹시 나같은 분이 있을까봐 기록해놓기로 했따.

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

728x90
반응형

관련글 더보기