Spring/MVC

[Spring] Controller에서 요청을 받았을 때static 폴더의 파일 반환하기 : html, 이미지, 동영상, 음성 파일 등

Dev.Cho 2024. 4. 5. 07:00

Controller와 정적 리소스

Controller는 요청을 받았을 때 String 값이 반환된다면, 기본적으로 정적 리소스 폴더 resources/static 에서 해당 String 값을 가진 정적 리소스 파일을 찾아 반환한다. 예를 들어 Controller 내부에서 "testpage.html" 값을 String 값으로 반환하면, resources/static/testpage.html 파일을 Response로 반환한다.

@Controller
class HomePageController {

    @GetMapping("/testpage")
    fun getHomePage(): String {
        return "testpage.html"
    }
}

 
다만, 이 기능은 html에 한정된 것이 아니다. 이미지, 동영상, 음성 파일 등 다양한 종류의 정적 파일을 손쉽게 반환할 수 있다.
 
먼저 html 파일을 반환받아 보는 것부터 시작해 보자.
 

Controller에서 html 파일 반환하도록 만들어보기

다음과 같이 생긴 Controller을 만들어보자. 이 Controller에는 /homepage 경로로 요청이 들어왔을 때 resources/static/index.html 파일을 반환해 주기 위한 getHomepage 메서드가 존재한다.

@Controller
class HomePageController {

    @GetMapping("/homepage")
    fun getHomePage(): String {
        return "index.html"
    }
}

 
이제 resources/static 폴더에 index.html 파일을 만들어보자. index.html 파일이 작성된 위치는 src/main/resources/static/index.html이다.

그림1. index.html 파일

 
index.html파일을 만들었으면, 내부는 다음과 같이 채워보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Title</title>
</head>
<body>
    Test Body
</body>
</html>

 
준비가 모두 완료되었으면, 스프링 애플리케이션을 실행하고, /homepage 경로로 요청을 날려보자. 그러면 다음과 같은 결과가 나오는 것을 볼 수 있으며, resources/static/index.html 경로의 파일이 반환된 것을 확인할 수 있으며, Content-Type이 자동으로 text/html로 만들어진 것을 볼 수 있다.
 

그림2. Request와 Response

 
 

Controller에서 이미지 파일 반환해 보기

이번에는 스프링 애플리케이션이 이미지 파일을 반환하도록 만들어보자. 이미지 파일을 반환해 보기 위해 unsplash 사이트에서 임의의 파일을 다운로드하여 static 폴더에 넣는다. 이미지 파일의 이름은 neom-unsplash.jpg이다. 

그림3. neon-unsplash 파일

 
이제 이 이미지 파일을 반환받기 위해 HomePageController에 getImage 메서드를 추가해 보자. getImage 메서드는 /image 경로로 GET 요청이 들어왔을 때 이미지를 찾을 수 있는 경로(neom-unsplash.jpg)를 반환하는 메서드이다.

@Controller
class HomePageController {

    @GetMapping("/image")
    fun getImage(): String {
        return "neom-unsplash.jpg"
    }
}

 
이제 Spring 애플리케이션을 재실행해보고, http://localhost:8080/image 경로로 get 요청을 날려보자. 그러면 다음과 같은 결과가 나오는 것을 볼 수 있다.

그림4. 이미지 파일 반환 받기

 
이때 응답 헤더의 Content-Type 값은 image/jpeg로 되어 있는 것을 확인할 수 있다.

HTTP/1.1 200 
...
Content-Type: image/jpeg
...
Content-Length: 1363890
Date: Sat, 30 Mar 2024 02:53:58 GMT
...

 

 

이미지 파일 반환하는 다른 방법

ResponseEntity로 응답을 감싼다음, 이미지를 Resource 타입으로 만들어 반환할 수도 있다. 

@GetMapping("/image")
fun getImage(): ResponseEntity<Resource> {
    // 이미지 파일을 로드
    val imageResource = ClassPathResource("/static/neom-unsplash.jpg")

    // 이미지 파일의 미디어 타입을 설정
    val mediaType = MediaType.IMAGE_JPEG

    // ResponseEntity를 사용하여 이미지 파일과 함께 적절한 헤더를 반환
    return ResponseEntity.ok()
        .contentType(mediaType)
        .body(imageResource)
}

 

 정리

Spring MVC의 Controller은 반환된 String 값에 해당하는 리소스를 static 폴더에서 자동으로 찾아 반환하며, 리소스의 형식은 html, 이미지, 동영상, 음성 파일 등이 될 수 있다. 스프링은 반환되는 리소스에 맞는 헤더를 자동으로 채워준다. 
 
 

반응형