[환경 설정] Spring Boot와 React, Thymeleaf를 Gradle을 활용하여 Build 설정

안녕하세요!

저스티에요! 오랜만에 글을 작성하네요 ㅠㅠ

오늘 포스팅 내용은 Spring Boot와 React, Thymeleaf를 Gradle을 활용하여 Build하는 방법에 대한 내용입니다.

Spring Boot와 React에 대한 Gradle Build 설정

Thymeleaf와 React를 함께 사용할 수 있는 설정 방법 및 React 빌드 파일을 gradle.build 파일에 설정하는 방식에 대해 작성되었습니다.

1. React Build 위치 변경 및 CSS, JS 파일 위치 변경하기

설정된 NODE_ENV 값에 따라 개발 환경 및 운영 환경으로 나뉘어 파일명이 다르게 설정하였습니다.

 

1.1 필자는 React 개발할 때 사용한 index.html이 아닌 Thymeleaf로 만든 index.html를 바라보게 설정하였습니다.

[그림 1] webpack.config.js에서 html 파일 위치 변경

1.2 추가로 JS 및 CSS 파일도 Spring Boot Build 폴더에서 불러올 수 있도록 파일 복사 위치를 변경하였습니다.

• JS 파일 위치 변경

[그림 2] webpack.config.js에서 JS 파일 위치 변경

• CSS 파일 위치 변경

[그림 3] webpack.config.js에서 CSS 파일 위치 변경

 

2. React 빌드 및 빌드된 파일을 Spring Build 폴더에 복사하기

[그림 4] React 빌드 및 빌드된 파일을 Spring Build 폴더 복사 설정

설정 파일에서 설정한 사항은 아래와 같습니다.

1. 빌드에서 제외할 파일 설정
   • 빌드에서 제외할 파일 및 복사할 파일을 지정할 수 있지만, 필자는 Thymeleaf에 작성한 Index.html을 사용하지 않고 React에서 빌드한 index.html을 사용하여 작업하려고 해당 부분을 제외하였습니다.
2. 작업할 Task 설정하기
   • processResources에 작업할 작업명을 정의하였습니다. 
3. React Install 및 Build
   • React 작업한 소스를 Install 및 Build 작업을 할 수 있도록 설정하였습니다.
   • 추가로 OS 설정에 따라 command line이 다르게 설정되었습니다.
4. React 빌드된 파일을 Spring Boot Build 폴더내에 복사하기
   • 빌드된 static 폴더 및 index.html 파일 원하는 위치해 복사하도록 설정하였습니다.

 

3 Gradle 빌드 clean & install 진행하기, Spring Boot 빌드된 파일 확인, 빌드된 파일 실행시키기

3.1 Gradle 빌드 clean & install 진행하기

[그림 5] Gradle 빌드

[그림 5]번에서 clean 및 build를 클릭하여 1.2 React 빌드 및 빌드된 파일을 Spring Build 폴더에 복사하기 설정 파일에 작성한 정보를 실행합니다. 그러면 아래 1.3.2 빌드 파일을 확인할 수 있습니다.

3.2 빌드 파일 확인하기

[그림 6] Gradle로 빌드하여 Spring Boot Build 폴더 내에 들어온 파일

[그림 6]를 보시면 static 내부에는 [그림 4]의 4번에 작성된 React 빌드 파일들이 원하는 위치에 파일이 복사된 것을 확인할 수 있습니다! 추가로 Thymeleaf는 [그림 6]의 build - resources - main - templates 폴더 밑에 login.html이 잘 들어간 것을 확인할 수 있습니다!

3.3 빌드된 Spring Boot 및 React 실행하여 확인하기

[그림 7] jar 파일 실행 방법

[그림 6]에서 build - lib 폴더 위치에서 java -jar 파일.jar로 실행하면 서버가 실행되어 localhost:8080으로 접근 가능한 것을 확인할 수 있습니다.