[머릿말]
캡스톤디자인 프로젝트로 Notion과 Discord를 합친 협업 프로젝트를 진행하고 있다. 처음 접해보는 Spring Boot를 사용하여 백엔드 개발을 하였고, Vue를 사용하여 개발된 프론트엔드와의 연동을 하는 과정에서 오류가 발생했다.
[문제]
두 프로젝트를 병합하기 위해 Spring Boot 프로젝트가 있는 디렉토리에 vue 디렉토리를 생성하고 그 아래에 test라는 이름의 vue 프로젝트를 위치해주었다.
이후 vue.config.js 파일에 4번 줄 내용을 추가해주었다. 이는 npm run build 명령어를 통해 vue 프로젝트를 build 했을 때 생성되는 파일의 경로를 설정하는 것이다.
Terminal에서 vue 프로젝트가 위치한 test 디렉토리로 이동하여 npm run build 명령어를 입력하고 성공하면 위와 같은 화면이 나오고 앞서 outputDir 경로로 설정해준 곳에 빌드 결과 파일이 생성된다.
controller 파일에서 위와 같이 설정을 하고 localhost:8080에 접속하면 오류가 발생했다.
[원인]
이 문제는 생성된 index.html 파일이 templates 디렉토리가 아닌 static 디렉토리에 위치하기 때문에 발생한다. controller에서 return 뒤에 작성하는 파일명은 기본적으로 templates 디렉토리에서 찾는데, 보다시피 index.html 파일은 static 디렉토리에 위치한다.
[해결 방법]
Spring Boot의 application.properties 파일에 누락된 static 경로를 추가해준다.
[결과]