spring boot - react 프로젝트 빌드하기 (index.html을 못찾는 문제 해결)

 

https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85

Spring Boot + React.js 개발환경 연동하기

 

위의 페이지를 참고하여 스프링 부트와 리액트를 연결하고, 빌드까지 시도해보려고 했다.

 

앞선 게시글을 보면 알겠지만, 연동까지 성공 후 빌드 후  실행이 안되어서 하루종일 삽질을 했다.

 

 

빌드 후 프로젝트 구조의 모습이다.

빌드까지는 성공적으로 마쳤는데, 이 후 jar 파일을 실행시켰는데 index.html 을 계속해서 찾아가지 못하는 문제가 있었다.

 

스프링 부트의 경우 spring-web을 사용할 경우 localhost:8080 주소를 입력하면 자동으로 static 밑에 있는 index.html을 웰컴페이지로 랜딩한다.

 

그러나 static 하위에 index.html의 페이지를 계속해서 찾지 못하는 문제가 발생했다.

 

내가 참고했던 블로그와 내 프로젝트의 차이점이 무엇인가 하나하나 차근차근 따라해보고 원인을 찾을 수 있었다.

 

 

EnableWebMvc

 

이 EnableWebMvc 어노테이션이 만악의 근원이었다.

 

- 기존코드

@Configuration
@EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("OPTIONS", "GET", "POST", "PUT", "DELETE");
    }
}

 

 

- 변경 코드

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("OPTIONS", "GET", "POST", "PUT", "DELETE");
    }
}

 

 

@EnableWebMvc만 제거해줬을 뿐인데 index.html도 잘 찾아갔고, react와 CORS문제도 발생하지 않았다.

 

EnableWebMvc 어노테이션을 사용하는 순간 세팅이 바뀌는 것 같은데 자세한 내용은 아래 블로그에서 볼 수 있다.

 

https://goodgid.github.io/Spring-Enable-MVC-Annotation/

@EnableWebMvc 어노테이션을 선언하면 무엇이 달라질까?

 

요약하자면, 기존에 springboot가 자동으로 해주던 세팅들을 수동으로 하나하나 해줘야하는 상황이 발생하는 것 같다.

 

위의 상황만 주의한 채로 빌드를 진행하면 spring boot 와 react를 한번에 빌드할 수 있게 된다.