[Spring Boot + Maven] WAR 배포 후 폰트 다운로드 실패 및 폰트 깨짐 문제

문제 발생

이번에 Spring boot + Maven + Vue.js 프로젝트를 세팅하는 작업을 했는데,
최근에 이 프로젝트를 maven clean package 하여, 그 결과물인 WAR 파일을
Tomcat 에 배포하면 폰트가 깨지는 현상이 있었습니다.
CSS, JS 가 다 적용되는데 정확히 font 만 문제가 발생하더군요.

브라우저 개발자 도구의 console 에는 다음과 같은 Warning 문구들이 여러개 보였습니다.

Failed to decode downloaded font: http://localhost:8080/css/ff_font.woff2

maven-resources-plugin 문제

약간 헤매던 중, 후배분께서 검색을 열심히 하셔서 문제 해결법을 알아냈습니다.
문제는 Maven 에 있었습니다.

기존에는 pom.xml 이 아래처럼 작성되어 있었는데요.

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
      <outputDirectory>${basedir}/target/classes/static</outputDirectory>
      <resources>
        <resource>
          <directory>${basedir}/src/frontend/dist</directory>
          <filtering>true</filtering>
        </resource>
      </resources>
    </configuration>
</plugin>

아래처럼 nonFilteredFileExtensions 태그를 추가해주니 잘 해결되더군요

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
      <outputDirectory>${basedir}/target/classes/static</outputDirectory>
      <resources>
        <resource>
          <directory>${basedir}/src/frontend/dist</directory>
          <filtering>true</filtering>
        </resource>
      </resources>
      
      <!-- 변경 [시작] -->
      <nonFilteredFileExtensions>
        <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        <nonFilteredFileExtension>svg</nonFilteredFileExtension>
        <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
        <nonFilteredFileExtension>woff</nonFilteredFileExtension>
        <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
      </nonFilteredFileExtensions>
      <!-- 변경 [끝] -->
      
    </configuration>
</plugin>

이렇게 하고 다시 War 로 묶어서 Tomcat 에 배포하니 폰트가 제대로 적용되는 걸 확인했습니다.

원인 분석

이 문제는 <filtering>true</filtering> 때문에 발생한 겁니다.
maven-resources-plugin > filter 공식 문서 를 보면 filtering 의 자세한 기능이 나옵니다.

요약하자면 filtering=true 를 세팅하고 maven package 를 하면...

• 지정한 resource 의 파일 안에 @ @, ${..} 등 약속된 문자열이 보이면,
• 해당 문자열을 일종의 placeholder 를 인식하고,
• 해당 placeholder 에 maven <properties> 에 세팅한 값을 넣어주는 기능입니다.

더 심플한 해결법

filter 의 기능이 정말 필요할까요? 저는 전혀 필요없다고 생각합니다.
개인적으로 <filtering>true</filtering> 그냥 안 쓰는 걸 추천합니다.
그러면 자연스럽게 <nonFilteredFileExtensions> 도 필요 없습니다.
더불어서 다른 resource 파일들에 대해서도 filter 기능에 의해 본의 아니게
원본 파일이 변경되는 불상사가 발생하지 않습니다.

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
      <outputDirectory>${basedir}/target/classes/static</outputDirectory>
      <resources>
        <resource>
          <directory>${basedir}/src/frontend/dist</directory>
          <!--<filtering>true</filtering>-->
        </resource>
      </resources>
      <!--
      <nonFilteredFileExtensions>
        <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        <nonFilteredFileExtension>svg</nonFilteredFileExtension>
        <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
        <nonFilteredFileExtension>woff</nonFilteredFileExtension>
        <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
      </nonFilteredFileExtensions>
      -->
    </configuration>
</plugin>

참고링크

• 해결법을 제공해준 블로그 글
• 원인분석: maven-resources-plugin > filter 기능
• binaries-filtering