Next의 css에서 쓴 font asset을 빌드 시 제대로 받아오지 못하는 이슈

요약

css 내부의 font asset을 받아오는 path를 절대경로가 아닌 상대경로로 바꾸면 된다.

 

문제

css에 url로 정의해 둔 font asset이 개발모드(dev)에서는 잘 적용되다가 실서버(production)에서 반영되지 않는 이슈

 

실제 구현

/* style.css */
@font-face {
  font-family: spoqaSansNeo;
  font-weight: 700;
  src:url('/font/SpoqaHanSansNeo-Bold.ttf');
  src:
    url('/font/SpoqaHanSansNeo-Bold.otf') format("opentype"),
    url('/font/SpoqaHanSansNeo-Bold.ttf') format("truetype");
}

/* next.config.js */
module.exports = withTM({
  assetPrefix: isProd ? 'https://assets.com' : '',
    /* 생략 */
});

/* 파일 경로 */
public
ㄴ font
        ㄴ SpoqaHanSansNeo-Bold.otf
    ㄴ SpoqaHanSansNeo-Bold.ttf
src
ㄴ styles
      ㄴ style.css

위의 코드가 이슈가 발생한 코드의 생략 버전이다.

style.css에서 url로 받아오는 경로는 절대경로로 되어있는데, 이렇게 url을 설정할 경우 dev 모드에서는 잘 동작하지만 build해서 코드를 올리고 나면 production 모드에서 제대로 동작하지 않는다.

 

문제 분석

• css 내부에서 url을 이용해서 asset을 받아올 때, path를 절대 경로로 하는가, 상대 경로로 하는가에 따라 동작이 다르다.
  • 만약 path를 절대 경로로 받아온다면 해당 경로의 asset을 따로 처리하는 기능없이 css 내부에도 path가 그대로 올라가게 된다. 위의 예제에서와 같이 /font/SpoqaHanSansNeo-Bold.otf path 그대로 올라가게 되는 것이다.
  • 만약 path를 상대 경로로 받아온다면 next의 webpack build 시에 해당 경로의 asset을 출력 디렉토리로 내보내고, css 코드에서의 url을 출력 디렉토리의 path로 수정한다. 위의 예제의 경우 다음과 같이 css 파일이 재구성될 것이다.

  • /* style.css */
    
    @font-face {
        font-family: spoqaSansNeo;
        font-weight: 700;
        src:
          url('../../public/font/SpoqaHanSansNeo-Bold.otf') format("opentype"),
          url('../../public/font/SpoqaHanSansNeo-Bold.ttf') format("truetype");
    }

  • 빌드 후에는 webpack에 의해 font asset들이 .next/static/media 경로에 생성되며, 번들된 css 파일(.next/static/css의 css파일)을 살펴보면 그에 맞춰 path가 url(/_next/static/media/SpoqaHanSansNeo-Bold.해시값.ttf)로 바뀌어있음을 알 수 있다.
• prod에서는 assetPrefix가 붙는다.
  • assetPrefix는 asset들의 path에 접두사로 추가되는데, prod일 때만 실행할 수 있도록 next.config.js에 정의해두었으므로 prod(실서버)에서는 url(https://assets.com/_next/static/media/SpoqaHanSansNeo-Bold.해시값.ttf) 로 css 파일이 구성된다.
  • 해당 프로젝트에서는 github action 파일을 구성하여 로컬에서 .next/static 경로에 있던 asset들을 모두 https://assets.com이라는 CDN에 _next/static 경로로 올릴 수 있게 하고 있다.
  • 따라서 prod에서 빌드하기 전 .next/static 에 font asset들이 있어야 위의 경로로 접근할 수 있는 것이다.

 

해결

결국 dev와 prod 모두에서 font가 정상적으로 표시되게 하기 위해서는 우선 .next/static 폴더에 font asset들이 build될 수 있도록 하고, 동시에 css 내부에 url에는 해당 asset의 경로가 정확히 들어갈 수 있도록 해야 한다.

이를 위해서는 url 내부의 path를 상대경로로 바꾸어주기만 하면 된다.

그럼 font asset들은 build시 webpack에 의해 .next/static/media 경로에 생성되고, css 내부의 path도 그에 맞춰 _next/static/media로 세팅될 것이다.

더해서 prod 환경이라면 github action 파일에 의해 CDN의 _next/static/media로 옮겨질 것이며, css 내부의 path는 assetPrefix까지 붙은 경로로 변경되는 과정을 거칠 것이다.

 

 

Bonus

원인을 분석하면서 next 내부의 webpack 코드를 좀 훑어보았다.

css 파일은 webpack/config/blocks/css/index.ts에서 처리하는 방식을 살펴보자.

if (ctx.isClient) {
    // Automatically transform references to files (i.e. url()) into URLs
    // e.g. url(./logo.svg)
    fns.push(
      loader({
        oneOf: [
          markRemovable({
            // This should only be applied to CSS files
            issuer: regexLikeCss,
            // Exclude extensions that webpack handles by default
            exclude: [
              /\.(js|mjs|jsx|ts|tsx)$/,
              /\.html$/,
              /\.json$/,
              /\.webpack\[[^\]]+\]$/,
            ],
            // `asset/resource` always emits a URL reference, where `asset`
            // might inline the asset as a data URI
            type: 'asset/resource',
          }),
        ],
      })
    )
  }

css 파일만을 모아서 처리하며, type을 보면 asset/resource로 되어있다. 이는 file-loader에서의 처리와 동일하고 (참고 : https://webpack.kr/guides/asset-modules/) 파일을 출력 디렉토리로 내보냄과 동시에 해당 경로를 css 번들에 삽입해주는 옵션이다.

→ 따라서 이 부분에서 font asset이 처리되어 출력 디렉토리로 보내지고 해당 경로가 css 번들에 삽입된 것이다.