연습 - 대체 경로 만들기

4분

이제 사용자가 앱으로 이동할 수 있도록 대체 경로를 만들겠습니다.

최신 코드 끌어오기

Azure Static Web Apps는 이전 연습에서 선택한 분기에 GitHub Actions 워크플로 파일을 추가했습니다. 먼저 Git에서 코드를 가져와서 이 파일을 가져옵니다.

다음 단계에 따라 Git에서 코드 변경 내용을 끌어옵니다.

Visual Studio에서 ShoppingList 솔루션을 엽니다.
GitHub에서 최신 변경 내용을 가져옵니다.

이제 Windows 탐색기의 .github/workflows 폴더에서 워크플로 파일을 볼 수 있습니다(Visual Studio 솔루션의 일부가 아닌 파일).

라우팅 규칙 만들기

앱을 게시하기 전에 대체 경로를 포함하는 라우팅 규칙을 만듭니다.

파일 staticwebapp.config.json 만들기

프로젝트에 staticwebapp.config.json 파일이 없는 경우 다음 단계를 사용하여 파일을 만들 수 있습니다.

Visual Studio에서 클라이언트 프로젝트 내에 있는 wwwroot 폴더를 마우스 오른쪽 단추로 클릭합니다.
추가 -> 새 항목을 선택합니다.
사용 가능한 템플릿에서 JSON 파일을 선택하고 이름을 staticwebapp.config.json으로 지정하고 Enter 키를 누릅니다.

staticwebapp.config.json이 생성되면 다음 대체 경로를 포함하도록 파일을 업데이트합니다.

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

Git에 변경 내용 푸시

이제 변경 내용을 로컬 Git 리포지토리에 저장하고 커밋합니다. 그런 다음, 해당 변경 내용을 GitHub로 푸시합니다.

대체 경로를 시도합니다.

GitHub Actions 워크플로는 앱을 빌드하고 배포합니다.

브라우저의 리포지토리로 이동하고 GitHub 작업의 진행률을 감시합니다. 다음 단계에 따라 진행률을 확인합니다.

작업 메뉴를 선택합니다.
워크플로 메뉴 아래에서 Azure Static Web Apps CI/CD 워크플로 항목을 선택합니다.
오른쪽의 작업 실행에서 최신(맨 위) 링크를 선택합니다.
빌드 및 배포 작업 링크를 선택합니다.

웹앱 및 API를 빌드하고 게시할 때 GitHub 작업의 진행률을 볼 수 있습니다.

앱이 다시 배포된 후 해당 앱을 찾아보세요. URL에 /products가 표시됩니다. 이제 F5 키를 눌러 대체 경로를 테스트하여 브라우저를 새로 고칩니다. 라우팅 규칙의 대체 경로 덕분에 앱이 다시 로드됩니다.