스프링부트 + SPA 한번에 배포하기

SPA 어플리케이션 프론트엔드 배포를 하는 방법을 크게 3가지로 분류해보면

 

1. nginx, apache 등 webserver를 ec2등의 서버에 띄워서 배포하기

2. 아마존 S3 정적 웹호스팅으로 띄우기

3. 스프링부트 프로젝트에 정적페이지로 백엔드 서버와 같이 띄우기 

 

나는 원래 2번의 방법을 주로 이용했었다. S3설정도 쉽고 업로드 하는 방법도 간단해

배포때 마다 S3로 들어가 파일을 삭제하고 새로 빌드한 파일로 교체해줬다.

 

그러나 스프링부트 자체에 내장되어 있는 톰캣을 이용해 정적 페이지를 띄울 수 있는 방법을 알고 난 후

백엔드와 연동하는 SPA를 배포할땐 3번째 방법을 이용하기로 했다!

 

사실 방법이랄게 있나 싶지만 ㅋㅋ..

 

아래 처럼 부트프로젝트 resoureces > static 파일 안에 index.html을 넣어주면

해당 파일을 기본 페이지로 띄워준다.

물론 컨트롤러에서 '/' 기본 url 설정이 안되어 있어야하고 spring web 의존성이 추가 되어 있어야한다.

 

 

프론트엔드 프로젝트를 빌드 할 때마다 static폴더 안으로 파일이 들어가게 설정해놓으면 더욱 간편한데

 

vue의 경우엔

 

vue.config.js 파일에 요런 식으로 작성해주면 빌드 시 마다 자동으로 static 폴더에 빌드파일이 들어간다.

module.exports = {
    outputDir: '../src/main/resources/static',
}

 

react의 경우엔 아직 해결책을 못찾았다....ㅠ

 

해당파일을 static폴더에 놓고 부트 프로젝트를 실행해보면 

아래처럼 실행이 잘된다..!

작업시엔 서버포트를 따로 설정해 vscode에서 작업하면 된다 :)