Spring Boot SPA RequestMapping

Spring Boot에서 SPA 페이지를 서비스하려고 했지만.

구글링을 해도 원하는 결과를 얻을순 없었다.

소스 구조는 아래와 같다.

SPA로 빌드된 static 파일들은 /resources 하위에 존재한다.

  • SPA개발시 일반적으로 node dev 서버를 띄워 개발하고 dist를 루트로 바라보고 개발을 진행한다.
  • 때문에, 실제로 SpringBoot에서 서비스 할 경우 http://[도메인]/static은
    resouce의 /static경로가 아니라 , /static/dist/static을 바라봐야 한다.

1.index.hrml 페이지

http://[도메인] 으로 접근시, index.html을 응답해주어야 한다.

우선 /static/dist/index.html에 대한 resource mapping을 한다.

WebMvcConfigureAdapter를 상속하여 addResouceHadlers를 오버라이딩 하고 registry에 index.html에 대한 resourceMapping을 추가한다.

/static/dist/static/**에 대한 접근도 SPA의 script 에서는 /static하위로 보기 때문에 resource mapping을 추가한다.

우리는 index.html에 대해 , http://[도메인]/index.html 처럼 static한 접근을 원하는 것이 아니다.

http://[도메인]/** 하위의 모든 요청에 대해 index.html을 서비스하길 원한다.

@Controller 를 작성하여 모든 요청에 대한 처리를 하자

2.SPA RequestMapping

“/” 루트에 대한 RequestMapping을 작성하여 “index.html”을 리턴하고 index.html에 대해 맵핑된 /static/dist/index.html을 보여줄수 있다.(getIndex 메소드)

다음으로 모든 요청에 대해 index.html페이지를 서비스하기 위한 RequestMapping을 하자.

@RequestMapping에는 @PathVariable 과 {}를 이용하여

url변수를 지정할수 있다. 또한 path에 대한 매칭도 지원한다.

일차적으로 @RequestMapping(“{path}”)에 대해 아래와 같이 매칭을 하였다.

(swagger-ui를 사용하기 때문에 같이 맵핑하였다. 정규식의 부정? 전방탐색자를 사용하자.)

@RequestMapping(“{path:(?!index\\.html|swagger-ui\\.html).*$}”)

매칭이 될경우 해당 method를 실행하게 되고 index.html을 리턴하거나

미리 작성된 getIndex메소드를 호출하면 된다.

index.html과 swagger-ui.html + 다른 @RequestMapping에서 정의된 url패턴을 제외하고는 작성한 메소드를 호출하여 모든 요청에 대해 index.html을 서비스한다.

! 이런... static 경로에 대한 예외가 필요하다.

/stati/**에 대한 요청들도 해당 requestMapping메소드에서 걸려버려서
index.html이 응답된다.

! webjars도 따로 사용하는 부분이 있어서 이부분에 대한 예외도 필요하다.

path:(?!index\\.html|swaggerui\\.html|webjars|static).*}/**\

위와 같이 예외 할 경로에 대해서도 추가해주었다.

이로써, @RequestMapping되지 않은 모든 요청에 대해 index.html을 서비스하게 되었다.

ps.

  • 이게 정상적인 방법인지는 모르겟다.
  • resourceHandler보다 RequestMapping이 보다 전 단계에서 거치기 때문에 static resource를 접근하는 예외에 대한 케이스를 잘 구분해야한다.
  • 흠, 정적 리소스를 웹어플리케이션 서버에서 서비스해줄 필요는 없다.
  • 복잡도가 늘어나는 것 같기도 하지만, 마땅한 방법을 못찾았다.
  • 좋은 방법을 아신다면 circlee7@gmail.com으로 메일하나 쏴주시길…

→ update : Apache 를 통한 SPA 정적리소스 로 해결하자.
→ update : Nginx 를 이용하여 정적리소스 제공 및 api proxyPass 처리가 Apache 설정 보다 간편하다.

!! Best Practice가 아니라고 생각하기 때문에 언제라도 해당 글을 삭제할 생각이 있습니다.
(다른 개발자들이 , 구글링 했을때 높은 수준의 참고자료가 검색되길 원하기 때문입니다. 꾸벅)

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store