SPA(Single Page Application)의 Firebase Hosting '404(page not found)' 오류

서론

우여곡절 끝에 firebase hosting을 사용하여 블로그를 열었지만 처음으로 보여 준 선배에게 바로 보고를 받았다.
(소소한 감사를...)

로컬 서버에서 작업할 때는 파악할 수 없었던 문제라 firebase의 베타 테스트 기능이 왜 필요한지 잘 알게 됐다.

 

본론

현상은 이러하다.

1. 사용중에 '새로 고침'이나 '뒤로 가기'를 수행하면 'page not found'를 표시하는 404.html로 이동한다.
2. 주소로 접속하면 다시 이용 가능하다.

언제나 그렇듯 난 웹을 전공 하지도, 정석적으로 배우지도 않아 자세한 이유는 모른다.
최초 문제 접근 키워드는 '파이어베이스 호스팅 새로고침 404'로 운 좋게 해당 오류의 설명을 들을 수 있었다.

https://darrengwon.tistory.com/245

대충 정리하자면 해당 글의 react와 vue.js를 포함한 SPA(Single Page Application)은 전통적인 구조가 아닌
index.html의 단일 페이지 위에서 html5와 javascript를 사용한 여러 페이징을 구현한다는 것 같다.
따라서 '새로 고침'이나 '뒤로 가기'를 시도 할 시 index.html 자체를 초기화 하거나 이전의 무언가로 되돌리려는 동작을 취하면,
당연하게도 없는 페이지로 이동하기에 404오류를 뱉는 것으로 이해했다.

친절하게도 여러 해결 법을 적어 주셨지만 내 환경에선 해당 사항이 없어 다시 여정을 떠난다.

두 번째 접근 키워드는 'spa Firebase Hosting 404'이다.
완전히 동일한 환경은 아니지만, firebase를 사용한다는 점, 그리고 해결 방법으로 올려 준 코드가 어디 있는지 정확히 알고 있었다는 점에서 확신했다.

https://bejda.medium.com/fixing-the-angular-404-on-refresh-issue-in-firebase-f462124afe40
(나도 고양이 키우고 싶다.)

 

결론

찾아낸 방법 대로 firebase.json의 hosting 부분을 다음과 같이 수정했다.

"hosting": {
    "public": "dist",
    "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
    ],
    "rewrites": [{
        "source": "**",
        "destination": "/index.html"
    }]
},

오류는 깔끔히 고쳐졌다.

---

Log

2021.07.22.
기존의 블로그에서 옮겨 옴.