티스토리 뷰

C#

C#: Blazor IIS 배포 후 Route 이슈

개태형님 2021. 12. 13. 00:20

Blazor는 SPA에서의 url로 인한 라우팅을 지원한다.

이는 NavigationManager의 NavigateTo 함수를 사용하면 된다.

 

예를 들어, index 페이지에서 login 페이지로 라우팅을 해야 하는 상황을 가정해보자.

index.razor 파일에 아래와 같은 코드가 작성될 것이다.

[Inject] private NavigationManager NavigationManager { get; set; }

NavigationManager.NavigateTo("/login");

 

그리고 디버깅을 해보면, 아래와 같은 프로세스를 예상한다.

  1. https://localhost:포트/index 이동
  2. NavigateTo 함수 호출
  3. Blazor의 라우터가 경로를 해석하여 페이지 전환
  4. https://localhost:포트/login 이동
  5. 아주 잘 된다.

 

이번에는 IIS에 배포 후 로컬 테스트와 같은 프로세스를 돌리는 상황을 보자.

  1. funny.com 이라는 도메인으로 웹사이트를 추가
  2. 이 웹사이트에는 BlazorServer와 APIService 2개의 애플리케이션이 돌아갈 예정
  3. 그러면 새로 만든 웹사이트 밑으로 응용프로그램을 2개 추가해야 함
  4. BlazorServer의 응용프로그램 이름은 CoolApp 라고 지정 후 추가
  5. APIService의 응용프로그램 이름은 CoolService 라고 지정 후 추가
  6. 이제 나의 Blazor index 페이지로 접근하는 경로는, https://funny.com/CoolApp/index 가 될 것임
  7. 브라우저를 킨 후 https://funny.com/CoolApp/index 를 입력하니 열심히 만든 index 페이지가 잘 보임
  8. 자.. 그럼 아까 로컬에서 테스트했던 login 페이지로의 이동을 해볼까?
  9. NavigateTo 함수가 호출되고, Blazor의 라우터가 경로를 해석하여 페이지가 전환
  10. 어..? 404 Not Found 에러가 뜸
  11. 당황하여 주소창을 보니 https://funny.com/login 이라고 되어있는 게 보임

 

무슨 설정을 잘못했을까.. 곰곰히 생각해보니..

아! 전에 Flutter를 IIS로 배포할때도 비슷한 라우팅 문제가 있었지.

_Host.cshtml 파일을 열고 base태그의 href를 수정해봤다.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MyBlazor</title>
    
    <!-- 이렇게 되어 있던 base 태그를 -->
    <!-- <base href="~/"> -->
    
    <!-- 응용프로그램명이 기본경로로 잡히도록 수정 -->
    <base href="/CoolApp/">
</head>

 

여전히 안 된다.

상대경로를 넣어봐도 안 되고, base href를 동적 반영 해줘도 안 된다.

내가 아는 모든 지식을 총 동원해도 안 된다.

결국 구글 검색을 통해 방법을 찾아냈다.

(https://stackoverflow.com/questions/68318735/why-is-blazor-wasm-routing-not-using-correct-base-uri-once-deployed-on-a-server)

 

해결방법은 너무 간단했다.

NavigateTo 함수의 인자로 들어가는 경로의 prefix '/'를 제외 하면 된다.

[Inject] private NavigationManager NavigationManager { get; set; }

// [ X ] https://funny.com/login 으로 이동됨
// NavigationManager.NavigateTo("/login");

// [ O ] https://funny.com/CoolApp/login 으로 이동됨
NavigationManager.NavigateTo("login");

 

그냥 바로 찾아볼 껄.

저작자표시

'C#' 카테고리의 다른 글

C#: 나의 Blazor 웹앱을 Electron위에 올려보자  (0) 2022.07.02
C#: Blazor Server에 Google OAuth 연동  (12) 2021.12.21
C#: Blazor 전역 로그인 체크  (0) 2021.12.01
C#: Property Copy  (0) 2021.11.28
C#: 프로그램 구동 시 관리자 권한으로 재실행  (0) 2021.11.22
공유하기 링크
댓글
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday