Springboot에서 ResourceTransformer 적용하여 뷰 페이지 렌더링

Springboot로 모놀리틱한 서비스(프론트+백엔드)를 구성하려고 할때
아래와 같은 코드는 정석적인 방법은 아닐 것 입니다.
아마도 보통은 Thymeleaf와 같은 뷰 템플릿 엔진 기술을 사용할 것입니다.

다음에 소개할 내용은 JSP나 Thymeleaf 사용 없이
순수 html,js,css 등을 렌더링 할 때 직면하는 문제 중 하나를 다룹니다.

Springboot로 정적 리소스를 렌더링 할 때

아래와 같이 WebMvc 관련 설정을 해주면 됩니다.

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/views/**")
            .addResourceLocations("classpath:/views/")
            .setCachePeriod(0)
            .resourceChain(true)
            .addResolver(new PathResourceResolver())
        ;
    }
}

만약 root 페이지를 특정 정적 리소스를 표시하고 싶다면

아래와 같이 리다이렉트 해줍니다.

@Controller
public class ViewController {

    @GetMapping("/")
    public String redirect() {
        return "redirect:/views/main/index.html";
    }
}

그러면 간단한 프론트 페이지를 렌더링 할 수 있습니다.

여기서 특정 값이나 서버측 내용을

마치 템플릿 엔진을 사용하는 것처럼 프론트 페이지에 전달하고 싶을 수 있습니다.

가령 아래와 같은 페이지에서 ##CURRENT_ENV## 부분에 서버의 설정값을 표시하려고 합니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World</title>
</head>
<body>
    <div>
        Hello World.
    </div>
    <script>
    var uri = '##CURRENT_ENV##'
    </script>
</body>
</html>

여기서 ResourceTransformer를 사용을 고려해볼 수 있습니다.

@Component
public class CustomResourceTransform implements ResourceTransformer {

    @Override
    public Resource transform(HttpServletRequest request, Resource resource, ResourceTransformerChain transformerChain) throws IOException {
        String resourceStr = IOUtils.toString(resource.getInputStream(), UTF_8);
        resourceStr = resourceStr.replace("##CURRENT_ENV##", "develop");

        return new TransformedResource(resource, resourceStr.getBytes());
    }
}

위와 같이 컴포넌트를 생성하고

원하는 서버측 값을 replace해주는 코드를 작성합니다.

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    private final CustomResourceTransform customResourceTransform;

    public WebMvcConfig(CustomResourceTransform customResourceTransform) {
        this.customResourceTransform = customResourceTransform;
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/views/**")
            .addResourceLocations("classpath:/views/")
            .setCachePeriod(0)
            .resourceChain(true)
            .addResolver(new PathResourceResolver())
            .addTransformer(customResourceTransform) // 추가
        ;
    }
}

그리고 앞서 설정한 WebMvcConfig에 의존성 주입 및 registry에 추가해줍니다.

자, 이제 웹 브라우저를 통해 http://localhost:8080/views/main/index.html 로 접근하면

아래와 같은 결과를 확인 할 수 있습니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World</title>
</head>
<body>
    <div>
        Hello World.
    </div>
    <script>
    var uri = 'develop'
    </script>
</body>
</html>

저작자표시 비영리

'개발 이야기 > Springboot' 카테고리의 다른 글

Testcontainers로 테스트 코드 만들기 (0)	2024.01.07
Springboot Application 로드 시 외부 파일 읽기 & 환경 설정 (0)	2024.01.07
[Kotlin] Spring Batch를 사용한 배치 애플리케이션 작성 (0)	2021.04.05
[Kotlin] Springboot, Mock을 활용한 유닛 테스트(feat. Method Stub) (0)	2021.02.27
[Kotlin] Springboot, AOP를 활용한 요청 데이터 조작(feat. Reflection) (0)	2021.02.09