[스프링]js, img, css 404 error

에러 발생

스프링에서 js, img, css 폴더들이 경로가 잡히지 않았다.

에러 주요 발생 환경

아래의 사진에서도 나와있지만, 잘 모르는 사용자가 있을것 같아 보충 설명을 한다.

스프링 구조는 1개의 톰캣으로 돌리고 그 아래에 여러 프로젝트를 포함시켰다. 

에러 발생문구

필자의 경우 "GET http://localhost:8080/js/jquery-3.3.1.min.js net::ERR_ABORTED 404"라는 에러가 발생했다.

이런경우 단순 컴퓨터의 에러인줄 알았으나! 그것이 아니였다. 결론적으로 말해주자면, 톰캣 매핑 주소의 문제였다.

servlet-context.xml 파일

<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory --> <resources mapping="/resources/**" location="/resources/" /> <resources location="/js/" mapping="/js/**"/> <resources location="/css/" mapping="/css/**"/> <resources location="/img/" mapping="/img/**"/>

필자는 경로를 이렇게 잡아줬고 파일들은 webapp밑에 css, img, js 폴더가 있고 각각 파일들이 각 폴더 안에 있다.

이런경우 정상적으로 작동해야되는게 맞다. 

단, 아래의 사진처럼 톰캣 매핑 주소가 / 으로 되어있지않다면 필자와 같은 혹은 비슷한 문제가 발생할 것이다.

해결책

사진과 같이 톰캣설정하는게 있는데 필자는 springStudy라는 프로젝트명으로 /kr Path를 가지고있다.

이것이 위와 같은 오류를 발생하는 범인이였다. 다른 개발자들을 보면 보통 톰캣 설정을 /kr이 아닌 / 으로 변경해놓는다. 따라서 필자와 같은 에러가 발생했다. 그렇다면 /kr을 냅두고 사용하는 방법이 무엇인가?

변경 : /kr -> /

톰캣에 경로가 /kr 이라면 /js 는 /kr/js/~.js, /kr/img/~.jpg, /kr/css/~.css 이런식으로 수정한다.

하지만, 매번 /kr을 붙이는게 번거롭기 때문에 개발자들이 각 프로젝트에 하나의 톰캣을 실행하는게 아닐까생각해본다. 이런 정보는 누가 가르쳐주지 않기 때문에 유용한 정보가 되리라 생각한다.

도움이 되셨다면 

좋아요와 구독 부탁드립니다.