vite 환경에서 public 폴더 안의 데이터 사용하기

비디오 파일 예시

1. public 폴더 안에 videos 폴더 만들기

이처럼 public 폴더 안에 videos 폴더를 만들고 그 안에 비디오 파일을 넣어야 한다.

2. .env 파일 안에 환경변수 만들기

VITE_PUBLIC_URL = 깃허브배포주소or로컬호스트 주소
//배포 시에는 다음과 같이 한다
VITE_LOCAL_PUBLIC_URL=로컬호스트 주소
VITE_DEPLOY_PUBLIC_URL=배포주소

3. video 태그에 적용하기

//로컬에선 VITE_LOCAL_PUBLIC_URL, 배포 시엔 VITE_DEPLOY_PUBLIC_URL가 된다.
const PUBLIC_URL =
    import.meta.env.MODE === "development"
      ? import.meta.env.VITE_LOCAL_PUBLIC_URL
      : import.meta.env.VITE_DEPLOY_PUBLIC_URL;

<ReactPlayer
  url={PUBLIC_URL + "/videos/test.mp4"}
/>

url='/videos/test.mp4' 을 통해 불러와 사용한다.

주의점

• 비디오 폴더는 무조건 public 폴더 밑에 종속되어야한다.
• src위치 설정해줄때는 비디오폴더가 어디 있던지 간에 앞에 경로위치 다 무시하고 "/videos/test.mp4"라고 선언해야한다,
  • 즉, 만약 내가 있던 자바스크립트 파일에서 비디오 경로가 "../../videos/test.mp4"여도 무조건 "/videos/video-2.mp4"라고 선언해야한다.