문제
github pages에 배포 후 라우팅된 페이지에서 새로고침시 404 페이지가 보여지는 문제
원인
github pages는 SPA를 지원하지 않습니다. 그래서 URL이 https://[도메인]에서는 새로고침해도 페이지가 잘 보이지만 https://[도메인]/main에서 새로고침할 경우 깃허브 페이지 서버는 /main를 모르기 때문에 404 에러와 404.html 페이지를 리턴합니다.
해결방법
GitHub Pages 를 사용하는 경우에는 편법이지만 404.html 을 많이 사용해요.
자체적으로 제공해주기 때문이에요.
CI 에서는 그래서 index.html 을 404.html 로 복사하는 스크립트를 추가해주면 될거에요 ;)
GitHub Pages 에서는 라우팅을 지원하지 않기 때문에
CI 에서 빌드할 때 index.html -> 404.html 로 옮겨서 처리해줘야 해요.
그래서 404 페이지를 index 페이지로 잡아줘서 라우팅을 시켜주는방법이에요.
CI에서 빌드할 때 index.html을 404.html로 복사하는 스크립트를 추가해주면 된다!
# CI 설정파일
- name: Install and Build 🔧
run: |
npm install
npm run build
cp dist/index.html dist/404.html정리
github pages에서 라우팅을 지원하지 않아 루트 경로 이외의 경로는
404.html을 반환합니다. 이를 해결하기 위해 빌드 단계에서
index.html과 내용이 같은 404.html을 만들어서 404.html이
반환되었을때 index.html이 보이는 것 처럼 눈속임이 가능하다
코딩입문생입니다,,
CI 에서 빌드할 때 index.html -> 404.html 로 옮겨서 처리해줘야 해요.
라고 하셨는데 "CI에서 빌드할 때" 가 무슨말이고 "CI"가 뭔가요? 에디터→터미널에서 빌드하라는 말씀이신가요? 에디터에서 index.html 파일명을 404.html 로 이름을 바꿔 저장하고 리로드하라는 말씀이신지..