[ 삽질 해결 ] AWS EC2 인스턴스 WAR 배포 시, 정적 리소스( CSS, js 등 ) 미적용(깨짐) 문제

 

---

 

💡  WAR 파일을 배포 이후 프로젝트 실행시 정적 리소스가 미적용 되는 문제를 해결해보자 !

※  정적리소스
일반적으로 HTML , CSS , javaScript , 이미지 / 동영상 파일 등과 같이 클라이언트로부터 요청이 오면
서버에서 추가적인 처리 없이 그대로 전달되는 자원

 

 

✅  인스턴스 WAR 배포 정적리소스 미적용 해결

 

 

▶️  War ( Web Application Archive ) 

-  외부 서블릿 컨테이너

•  톰캣 , 제티 등 외부 서블릿 컨테이너에 배포

•  내장서버를 미포함 하기 때문에 외부 서블릿 컨테이너 설정에 의존

 

 

 

-  디렉터리 구조

•  로컬에서 정적리소스는 보통 프로젝트의 main/resources/static 아래에 들어가게 된다.

•  하지만 WAR 배포시 정적리소스들이 WEB-INF/classes/static 으로 들어가게됨 ( 경로가 변경 )

 

 

❗ 프로젝트를 실행하면 CSS 가 미적용되어 웹페이지가 깨지는 현상이 발생

 

 

 

---

 

 

▶️  해결방법

 

 

-  WebConfig 클래스 생성

•  정적리소스를 관리하는 WebConfig 설정 클래스를 만든다.

•  WebMvcConfigurer 인터페이스를 구현함으로써 기본 리소스 위에 새로운 경로들을 추가한다.

•  addResourceHandler .메서드로 오버라이딩 하여 클라이언트에서 오는 /** 패턴의 모든 요청에 대해

    /static/ 디렉토리에서 정적리소스를 찾아 응답하도록 설정한다.

package com.wsd.invest.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        // addResourceHandler 메서드는 정적리소스에 대한 경로 매핑
        // addResourceLocations 로 static/ 디렉토리에서 해당 리소스를 찾도록 한다.
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/");
    }
}

 

 

 

 

-  WAR 파일로 배포된 파일명 ROOT.war 로 변경

•  War 파일을 Tomcat의 webapps 에 배포하면 파일이름이 컨텍스트 경로로 사용된다.

ex) myApp.war  ->  8080/myApp/

 

•  War 파일 이름을 ROOT.war 로 변경하면 서블릿 컨테이너는 애플리케이션의 컨텍스트 경로를

   루트 경로("/") 로 설정하게 된다.

ex) ROOT.war  ->  8080/

 

•  ROOT.war 로 배포하게되는 경우 정적리소스( CSS , js , 이미지 등 ) 에 간단하게 접근 가능해짐