ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Spring Boot] 서버 재시작 없이 html 변경하기 (thymeleaf)
    Back-End/Spring Boot 2023. 3. 29. 10:48

     

     

    프로젝트를 진행하다보면 front단의 수정이 여러번 발생한다. Spring Boot를 사용하면 정적 소스들을 수정해도 브라우저에 바로 적용되지 않는 걸 확인할 수 있다. 즉) 서버를 항상 재시작해야한다. 

     

    이는 여간 불편한 게 아니다. 그리하여 서버 재시작 없이 html, js 등 정적 파일 수정시 반영될 수 있도록 설정하고자한다. 

     

     

    📑  1. devtools dependency 추가 

     

    implementation 'org.springframework.boot:spring-boot-devtools'

     

     

    📑 2. application.properties 파일 수정 

     

    # 정적 리소스에 변화가 있을 때 바로 반영한다.
    spring.devtools.livereload.enabled=true

    # thymeleaf 참조 경로
    spring.thymeleaf.prefix=classpath:/templates/spring.thymeleaf.suffix=.html

    # thymeleaf에 대한 캐시를 남기지 않는다. cache=false 설정(운영시는 true)
    spring.thymeleaf.cache=falsespring.freemarker.cache=false

    # templates 디렉토리에 파일이 있는지 없는지 체크, 없으면 에러를 발생시킨다.
    spring.thymeleaf.check-template-location=true

     

     

    보통 여기까지 추가해주면 수정 사항이 반영 된다는 블로그들이 많던데 내 환경에선 정상 동작 되지 않았다 ㅠㅠ 

     

     

    📑 3. Edit Configuration

     

    Run > Edit Configuration 클릭 후 build and run의 우측에 modify option을 클릭한다.

     

     

     

    update 작업 시 클래스 및 리소스 업데이트와 , 프레임 비활성화 시 클래스 및 리소스 업데이트르 선택해주고 apply를 클릭한다. 

     

     

     

    여기까지 작업하면 서버를 리로드 하지 않아도 thymeleaf, html에서 수정한 내용이 서버에 적용된다. ( 환경에 따라 시간이 조금 소요될 수 있다.)

     

     

    🚩 추가로)  컨트롤러 수정 작업 서버 재시작 없이 반영하기 

     

    수정한 파일이 있을 경우 build에서 recomplie '수정파일' 클릭하면 컨트롤러에서 값을 수정해도 화면단에 적용된 걸 확인할 수 있다. 

     

     

     

    <TestController>

     

    아래와 같을 때 model의 저장해주는 data의 값을 변경해주고 위에 작업을 실행 시 화면에 출력되는 값도 변경되어 있는 걸 확인할 수 있다. 

    package com.project.library;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    
    @Controller
    public class TestController {
    
        @GetMapping("/")
        public String home(Model model){
            model.addAttribute("data","게스트입니다");
            return "home";
        }
    }

     

    <home.html>

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    메인페이지 입니다.<br>
    <span th:text="${data}"></span>
    </body>
    </html>

     

     

     

    반응형

    댓글

Designed by Tistory.