Azure BlobStorage SPA 프로젝트 배포시 Route를 찾지못하는 문제

문제상황

Azure BlobStorage에 react와 같은 SPA 웹을 정적페이지로 배포하고
Azure CDN을 통해 접근했을때 SPA 내부의 route를 찾지 못하는 문제.

Error : The requested content does not exist. (404)
ErrorCode : WebContentNotFound

---

CDN 구성은 위와 같다.

스토리지의 정적 웹 사이트 설정은 위와 같다.

---

https://domain.com/index.html (O)
위 URL에는 접근이 가능하고 해당 url에서 /login 라우트로 SPA 내에서 이동이 가능하다. 하지만,

https://domain.com/login (X)
위 URL을 주소창을 통해 바로 접근하거나 새로고침을 하면 SPA의 route로 이동하지 않고 CDN을 통해 스토리지 서버에서 login 파일을 찾기 때문에 404를 만나게 된다.

---

해결방법

1. 가장 좋은 해결방법은 Storage + CDN 대신
   Azure Static Web Apps 서비스를 이용하는 것이다.

2. 두번째 방법은 브라우저에서 서버로 요청을 보내지 않도록 해시 로케이션을 사용하는 것이다. 브라우저는 URL 뒤에 #가 붙을때, 서버로의 요청이 아닌 페이지 내 섹션으로 이동하는 것으로 이해한다.
   https://domain.com/login 대신 https://domain.com/#/login 를 사용한다.

React-Router-Dom 사용 예제

const router = createHashRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

---

Ref.

• https://camerondwyer.com/
• https://reactrouter.com/en/main/routers/create-hash-router