[Nuxt3] 빌드 시 cdnURL 사용(preload, prefetch)

일단 시작! 시작이 반!

한 사이트에서 프로젝트를 분리하고

Nginx 프록시를 통해 root 경로를 설정하다 보니,

절대 경로로 적용된 assets들이 올바른 경로를 찾지 못하는 문제가 발생했다.

웹사이트 볼륨이 커지면서 assets를 효율적으로 관리하기 위해 CDN을 도입할 필요가 생겼다.

개발 시에는 로컬의 assets들이 /assets/과 /public/을 바라본다
신경쓸 부분 없이 잘 나온다.

빌드 시 cdn을 바라보게 설정 시작
Nuxt 공식문서에 나온 cdnURL 설정 적용
https://nuxt.com/docs/api/nuxt-config#cdnurl

Nuxt Configuration

nuxt.config에 적용

//nuxt.config.ts
export default defineNuxtConfig({
  cdnURL: 'https://cdn.sample.com/assets/'
})

빌드 시 적용한대로 잘 나온다!

하지만 왜 인지 assets 이미지들이 prefetch로 head에 도배가 되었다.

prefetch 도배되지않게 설정 찾기
발견!

export default defineNuxtConfig({
  cdnURL: 'https://cdn.sample.com/assets/',
  hooks: {
    'build:manifest': (manifest) => {
      for (const key in manifest) {
        const file = manifest[key]
        file.preload = false
        file.prefetch = false
      }
    }
  }
})

군더더기 없이 잘 나온다.

 

하지만 prefetch, preload를 설정하지 못한다. 
일단 서비스 후 다른 대책이 필요하겠다.