vite public html 파일 iframe으로 띄우기

프로젝트 폴더구조

📦public
 ┣ 📂policy
 ┗ ┗ 📜service.html
 📦src
 ┣ 📜App.tsx
 ┣ 📂assets
 ┃ ┣ 📂fonts
 ┣ 📂components
 ┣ 📂containers
 ┗ ...

 

시도한 방법

1. vite.config.ts 파일에 html 경로 지정 ❌

• https://ko.vitejs.dev/guide/build.html#multi-page-app

  build: {
      rollupOptions: {
        input: {
          main: resolve(__dirname, 'index.html'),
          public: resolve(__dirname, 'public/policy/service.html'),
        },
      },
    },

 

 

2. iframe 에서 src 로 띄우기

• https://ko.vitejs.dev/guide/assets.html
  • iframe src='public/policy/service.html' ❌
  • iframe src='dist/policy/service.html' ❌
  • iframe src='/policy/service.html' ✅ 

처음에 두 가지 방법을 적용했었는데, 로컬환경에서는 잘 뜨는데 배포환경에서는 html 파일이 뜨지 않는 문제가 있었다. 알고보니... 해답은 공식문서에 떡하니 있었다.

 

public 디렉터리에 위치해 있는 에셋을 가져오고자 하는 경우, 항상 루트를 기준으로 하는 절대 경로로 가져와야만 합니다. ( public/icon.png 에셋은 소스 코드에서 /icon.png으로 접근이 가능합니다.)

 

코드

 const handleOpenAgreementFile = (htmlFileName: string) => {
    const windowObjReference = window.open();
    windowObjReference?.document.write(
      `<iframe src=/policy/${htmlFileName}.html width='100%' height='100%' frameBorder={0} ></iframe>`,
    );
  };

 

 

이렇게 루트를 기준으로 절대 경로를 가져오니, 로컬환경에서도 배포환경에서도 html 파일이 잘 뜬다.

로컬에서는 로컬 도메인 주소가, 스테이징 서버에서는 스테이징 도메인 주소로 잘 반영되는 것을 확인할 수 있다. 

 

로컬 환경

 

배포 환경