대체 경로 구성

완료됨

쇼핑 목록에 해당하는 제품 목록을 표시하는 프런트 엔드 애플리케이션의 클라이언트 쪽 경로 /products가 있습니다. 제품 링크를 선택하여 앱에서 /products로 이동하면 브라우저의 주소 표시줄을 통해 현재 위치가 /products임을 확인합니다. 이 페이지에 있는 동안 브라우저를 새로 고칠 때 다시 한 번 제품을 새로 고치고 표시하려고 합니다. 그러나 대체 경로가 없으면 페이지를 찾을 수 없다는 404 오류가 표시됩니다.

브라우저는 /products를 제공하도록 호스팅 서버에 요청을 보내기 때문에 페이지를 새로 고치면 404 오류가 표시됩니다. 하지만 서버에는 제공할 products 페이지가 없습니다.

다행히도 대체 경로를 만들면 이 문제가 쉽게 해결됩니다. 대체 경로는 일치하지 않는 모든 페이지를 서버에 쌍으로 구성하는 경로입니다.

대체 경로 구성

Azure Static Web Apps는 앱의 소스 폴더에 있는 선택적 staticwebapp.config.json 파일에 정의된 사용자 지정 라우팅 규칙을 지원합니다. navigationFallback 개체에서 탐색 대체 경로를 정의할 수 있습니다. 일반적인 대체 경로 구성은 이 예제와 같습니다.

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}

설정	값	Description
rewrite	/index.html	경로가 다른 파일과 일치하지 않는 경우 제공할 파일입니다.
제외	["/_framework/*", "/css/*"]	대체 라우팅에서 무시할 경로입니다.

탐색 대체 규칙은 staticwebapp.config.json 파일에 표시되는 다른 라우팅 규칙 이후에 적용됩니다.

경로 파일 위치

staticwebapp.config.json의 권장 위치는 워크플로 파일에서 app_location으로 설정된 폴더입니다. 그러나 파일은 애플리케이션 소스 코드 폴더 내의 어느 위치에나 배치할 수 있습니다.