[미니프로젝트] 에러 해결 - 상대경로 issue (solved by vite.config.js)

7월 17일 오늘 오후 14:00 회의로 어재 새벽과 오늘 오전 작업물을 

 

merge 하고 다음진행사항에 대한 역할 분담을 하는 시간을 가졌다.

 

PR 을 보내고 서로 리뷰를 주고 ( 충돌이나 문제가 발생할 만한 사항없게끔 분업을 해서 이번에는 별 내용이없었다).

 

문제없이  merge가 완료되었고 서로 로컬에서 실행하면서 문제없음을 확인도 하였다.

 

다만 배포가 진행되고 있는 GitHub Page 에서 문제가 발생했다

 

이미지가 연결되지 않았다.

 

로컬에서 실행할때는 문제가 없었고, 코드 상으로도 전혀 문제가 있을 코드가 아니었다.

<!--상대경로로 올바르게 작성했다-->
<img src="/img/sungrae/sungrae.jpg"
	class="img-fluid order-md-1 p-0 bg-primary-subtle border border-5 rounded-circle profile"
    alt="..."/>

패키지 내부의 구조는 변하지 않기 때문에, 상대경로를 사용하여 img/sungrae 폴더의 사진 파일을 참조하게 했다.

 

그렇기때문에 더더욱 문제점을 찾기가 어려웠다.

 

 

해결

우선은, 코드의 문제는 아니었다. 

자세한 내막은 이해하지 못했고, 지금으로서는 이해할 필요가 없다고 생각하여 원인에 대해서 간단하게 설명을 듣고 

그 부분에 대해서만 정리를 한다.

 

이유는 npm 을 사용한 github pages 배포 방식에서 패키지 base의 정보가 원인이었다.

vite.config.js 파일에 base : '/nbc-team5/' 이부분

이게 배포 과정에서 붙으면서 상대경로의 root를 참조하는곳이 로컬과 배포에서 달라지게 된것이 원인이었다.

로컬에서의 root

말 그대로 로컬에서 서버를 실행하고 페이지를 실행시킬 때 root는 '/' 였다.이곳에 index.html 도 있고, img 폴더도 있기 때문에 '/img/sungrae/...' 로 이미지 소스 참조가 가능했던것.

 

배포에서의 root

github pages에서 페이지를 배포하고 실행할 때 root는 '/nbc-team5/'이다.nbc-team5 안에 index.html이 있는것이고, img폴더도 있으므로 /nbc-team5/img/sungrae/...로 이미지 소스참조를한다.

export default defineConfig({
  root: path.resolve(__dirname, 'src'),
  publicDir: path.resolve(__dirname, 'public'),
  base: '/nbc-team5/',
  build: {
    outDir: path.resolve(__dirname, 'dist'),
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'src/index.html'),
        sungraeInfo: resolve(__dirname, 'src/sungraeInfo.html'),
        jingeunInfo: resolve(__dirname, 'src/jingeunInfo.html'),
        jeongkiInfo: resolve(__dirname, 'src/jeongkiInfo.html'),
      },
    },
  },
})