Vite로 개발된 웹앱 배포 시 주의점

Vite로 구성된 웹 프로젝트를 배포할 때 npm run build로 배포본을 생성하는데, 이때 경로(path)가 틀려 필요한 리소스를 불러오지 못하는 에러가 발생합니다. vite.config.js 파일에 경로를 명시적으로 지정해주면 됩니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "./",
})

위의 코드 중 7번째 줄을 추가했는데요. 이처럼 base를 지정하지 않으면 상대 경로가 / 로 잡힙니다.

이 부분 이외에도 문자열로 구성된 데이터 파일에 대한 URL에 대해서 주의를 해야 하는데요. 예를들어 glb 모델 파일을 로드할때 /가 아닌 ./로 지정해야 배포시에 데이터를 로드할 수 있습니다.

// 개발에서는 문제가 없지만 배포에서는 문제가 발생함
useGLTF.preload('/city_2.glb')

// 개발에서도, 배포에서도 문제가 없음
useGLTF.preload('./city_2.glb')