spring boot 에서 html, css, js 변경 시 실시간 반영 방법

 

안녕하세요. 루루개발자 입니다.

최근 스프링 부트 프로젝트 안에서 타임리프로 프론트 개발을 진행 했었는데 html, css, js 변경시 일일이 재빌드 해주는 것이 불편하여 수정이 발생하면 자동으로 리로드 되며 새로고침 되는 기능을 알아보았고 적용한 과정을 공유드리고자 합니다. OS 는 MAC 이며 ide 는 인텔리제이 기준입니다.

 

1) dependencies 추가

build.gradle

dependencies {
  implementation 'org.springframework.boot:spring-boot-devtools'
}

 

2) Run/Debug Configurations 에서 설정 편집

2-1) 상단에 Application 에서 Edit Configurations 를 클릭하여 “Run/Debug Configurations” 설정 창을 띄웁니다.

2-2) 좌측에서 Spring Boot - Application 선택

2-3) Build and run 항목에서 Modify options 클릭하여 아래 옵션들을 추가

2-4) On ‘Update’ action: Update classed and resources 추가

2-5) On frame deactivation: Update classes and resources 추가

 

3) Preferences - Build, Execution, Deployment - Compiler 설정

Build project automatically 체크

 

4) application.yml 설정

application.yml

spring:
  devtools:
    livereload:
      enabled: true
    thymeleaf:
      cache: false
    restart:
      enabled: true

 

5) 크롬에서 확장프로그램 설치

5-1) LiveReload 를 설치합니다.

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

5-2) 상단에 고정시킨 후 해당 아이콘을 클릭하여 LiveReload 기능을 활성화합니다.

💡 가운데 원이 연한 회색이면 OFF 상태이며, 진한 회색이면 ON 상태입니다.

만약 위 LiveReload 확장프로그램이 작동하지 않는다면, 아래 링크의 RemoteLiveReload 를 대신 사용해보세요!
https://chrome.google.com/webstore/detail/remotelivereload/jlppknnillhjgiengoigajegdpieppei?hl=ko

 

 

이제 html, css, js 파일을 수정하고 나서 다시 브라우저의 포커싱이 활성화 되면 그 이후 약 4~5초 정도 후 새로고침 되면서 변경된 내용을 확인 가능 합니다.