에 배포까지는 성공적으로 되었는데, 막상 내용물이 아무것도 나오질 않았다.
Github Pages
gh-pages
브랜치를 확인해도 정적 파일들(assets)를 포함하여 모든 파일들이 제대로 push 되어 있었다.
이 문제를 해결하는데 진짜 많은 시간이 걸렸다. 결론적으로 무척이나 간단한 것이었지만, 알아채는데 너무 오랜 시간이 걸렸다.
특히 vite에서 제공하는
특히 vite에서 제공하는
preview
원인
원인은 라우터 문제였다.
히스토리 설정을
라우터 설정을 기준으로 정적 파일(static files)을 만들기 때문에 Github pages에서 이는 딱히 문제가 없었고, 그 결과 404 에러는 띄우지 않았지만 정작 js 파일에서 컴포넌트를 찾을 때, 경로상 매칭이 되지 않아 문제가 발생하였다.
히스토리 설정을
HTML5 Mode(vue: HistoryMode, React: Browser Router)
-
Local
- localhost, 혹은 설정한 네트워크 host로 접근.
- 나의 경우
http://localhost:port
-
Github Pages
-
host:
https://[github-id].github.io -
path:
/[repository-name]
-
host:
/[repository-name]
라우터 설정을 기준으로 정적 파일(static files)을 만들기 때문에 Github pages에서 이는 딱히 문제가 없었고, 그 결과 404 에러는 띄우지 않았지만 정작 js 파일에서 컴포넌트를 찾을 때, 경로상 매칭이 되지 않아 문제가 발생하였다.
해결
저의 경우로 라우터를 설정하기 때문에 이를 기준으로 설명합니다.
vite-plugin-pages
# vite.config.js
import { defineConfig } from "vite";
export default defineConfig({
...,
base: "/[repository-name]/",
Pages({
pagesDir: [
{
dir: "src/pages",
baseRoute: "/[repository-name]",
},
],
}),
...,
})
이처럼
혹은 Github Pages에서 제공하는 Custom Domain을 이용하면 번거로운 설정 없이 사용할 수 있을 것 같다.
repository-name
혹은 Github Pages에서 제공하는 Custom Domain을 이용하면 번거로운 설정 없이 사용할 수 있을 것 같다.
Jr.Frontend Developer / Vue.js Developer