Vite + Vanilla JS를 이용해서 간단한 웹을 개발했습니다. 하지만, github pages로 배포하는 과정(참고 문서)에서 아래 이미지와 같은 이슈가 발생했습니다.
에러 내용을 확인해 보니, 브라우저가 index.html에 있는 script 태그를 읽지 못했습니다. 그래서 main.js에 작성되어 있던 js 로직과 import 된 css를 읽지 못했고, style과 사용자 인터렉션이 하나도 없는 깡통 html만 렌더링 되었습니다.
<!-- 에러 당시, 빌드 된 index.html 코드 -->
<html>
<head>
...head tags
<script type="module" crossorigin src="/developerQuo.github.io/assets/index-d502bee3.js"></script>
</head>
<body>
...body tags
</body>
</html>
원인 파악과 해결
초기에는 github page가 레포지토리 이름으로 렌더링 되도록 설정했습니다. 이후 정상적으로 배포되는 걸 확인한 후, url이 github.io로 끝나도록(https://{username}.github.io) 변경하기 위해,github 저장소 이름(developerquo.github.io)을 변경했었습니다. 하지만 이때부터, js module을 읽지 못한다는 콘솔 에러가 발생했습니다.그리고 개발 환경의 빌드, 배포 작업에서는 같은 이슈가 발생하지 않아 혼란스러웠습니다.
문제는 github pages 배포를 위해 작성했던 vite.config.js의 base에 있었습니다.
배포 초기에는 https://<USERNAME>.github.io/<REPO>/와 같이 배포를 했기에, base: /<REPO>/와 같이 설정했습니다. 하지만 url을 https://<USERNAME>.github.io로 배포하도록 변경하는 과정에서, 이를 업데이트하지 않았습니다. 변경 당시, Vite.js에서 이 설정 파일과 변수가 어떤 역할을 하는지 정확히 이해하지 않았습니다. 공식 문서를 확인한 후에는, 아래 이미지와 같이 기본 base url로 변경했습니다.
vite 공식 문서에 따르면 이 base 설정의 에셋을 가져오는 것과 관련 있습니다. 배포하고자 하는 디렉터리 경로가 base로 설정되어야 하는데, base가 잘못 설정되어 있어서 build 된 js와 css를 가져오지 못했던 것입니다.
JS(import), CSS(url()), 그리고 .html 파일에서 참조되는 에셋 파일의 URL들은 빌드 시 이 Base Path를 기준으로 가져올 수 있도록 자동으로 맞춰지게 됩니다. Vitejs - Public Base Path
vite.config.js 코드 수정 이후, github actions로 build 된 asset의 index.html은 다음과 같이 수정되어 있었습니다.
하지만, script의 경로가 잘못되어 js asset을 찾지 못했을 때, 왜 서버에서 text/html로 응답을 하고 Strict MIME type checking에서 에러가 발생되는지 파악하지 못했습니다. 이 부분은 추후에 시간을 더 들여 이유를 파악할 예정입니다.
※ github actions와 env variables github actions에서 env variables를 사용하기 위해 repository settings의 repository Environment secrets를 등록해 뒀었습니다. 하지만 repository 이름을 변경하니, secret을 인식하지 못하는 에러가 같이 발생했습니다. 그래서 기존 Environment secret을 삭제하고, Repository secrets에 새로 등록하니 actions에서 정상적으로 인식되었습니다.
