Blazor 서버 측으로 Blazor WASM 실행

Question

참고 :이 게시물은 "지식 공유-Q & A 스타일"게시물입니다. 누군가가이 게시물의 맥락을 잘못 해석했기 때문에 나는 아마도 반대표를 받았을 것입니다.

문제

Blazor WASM은 개발 측면에서 단점없이 Blazor 서버 측보다 쉽게 ​​선호 될 수있었습니다. 현재 Blazor WASM은 모든 기능을 갖춘 디버깅 환경을 지원하지 않으며 시작 속도가 매우 느립니다. 이로 인해 Blazor 서버 측보다 개발 속도가 훨씬 느려집니다. 솔직히 개인적으로 디버깅 경험이 느린 시작보다 개발 속도를 훨씬 느리게한다고 생각하지만.

제안 된 해법

참고 : 이 솔루션으로 인해 발생할 수있는 단점이 확실하지 않기 때문에 "제안 된"단어를 여기에 포함 시켰으므로 아래에서 내 대답에 대해 자유롭게 의견을 말하십시오.

해결책은 단순히 추가 Blazor 서버 측 프로젝트를 생성 한 다음 Blazor WASM 프로젝트를 Blazor 서버 측 프로젝트에 참조하는 것입니다. 그 후 Blazor WASM 면도기 파일과 wwwroot 파일을 올바르게 사용하기 위해 Blazor 서버 측 Startup및 _Host.cshtmlBlazor 서버 측에 약간의 조정을 추가 합니다. 이 솔루션에 대한 단계별 설명은 아래 제안 된 답변을 참조하십시오.

간단 측면에서,이 솔루션은 추가하고 Blazor 서버 측 프로젝트를 구성 하지 않고 만드는 변경 및 상당한 코드 중복 Blazor WASM 프로젝트를.

Answer 1

참고 : 이 예제에서는 Visual Studio 2019 16.7.2를 사용 하고 있으며 템플릿 버전은 현재 3.1.8입니다.

1. Blazor WASM 프로젝트를 만듭니다. ASP.NET Core Hosted 또는 Standalone 옵션이 제대로 작동하지만 나중에 설명 할 구성이 다릅니다. 나머지 옵션은 효과가 없습니다. 이 예제에서는 ASP.NET Core Hosted 를 사용하여 나중에 API 컨트롤러를 사용하는 방법에 대해 설명합니다. 또한 나중에 Blazor 서버 측 프로젝트를 만듭니다.

   
   

---

1. 현재 프로젝트 구조는 아래의 첫 번째 스크린 샷과 유사해야합니다.

   아래 두 번째 스크린 샷에 표시된 Blazor 서버 측 프로젝트에서 강조 표시된 항목을 삭제합니다.

   
   

---

1. Blazor WASM 프로젝트를 Blazor 서버 측 프로젝트로 참조합니다.

   • ASP.NET Core 호스팅 - BlazorWasm.Client& BlazorWasm.Server프로젝트를 모두 참조합니다 .
   • 독립 실행 형 -단일 Blazor WASM 프로젝트를있는 그대로 참조합니다.

---

1. StartupBlazor 서버 측 프로젝트 의 클래스로 이동합니다 . 에서 ConfigureServices(), 제거 WeatherForecastService과 함께를 BlazorServer.Data한 후가에 대한 서비스를 추가 네임 스페이스 HttpClientBlazor WASM 프로젝트에서 면도칼 파일을 사용할 수 있습니다.

   services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(sp.GetRequiredService<NavigationManager>().BaseUri) });
   

   참고 프로덕션에서는 HttpClient. IHttpClientFactory대신 사용하십시오 . 이 문서를 참조 하십시오. IHttpClientFactory를 사용하여 탄력적 인 HTTP 요청을 구현하십시오 .

   ASP.NET Core WASM 프로젝트의 경우

   에서 Configure(), 컨트롤러 '엔드 포인트를 매핑합니다. 이것은 X.Server/ BlazorWasm.Server프로젝트 의 컨트롤러를 사용합니다 .

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapControllers();
       ...
   });
   

---

1. Blazor 서버 쪽 프로젝트 _Host.cshtml의 / Pages 폴더로 이동합니다 . 의 기준 변경 css/site.css에 css/app.cssBlazor WASM 프로젝트의 주요 CSS 파일의 파일 이름이 다르기 때문이다.

   <link href="css/site.css" rel="stylesheet" /> <!-- Previous -->
   <link href="css/app.css" rel="stylesheet" /> <!-- New -->
   

---

1. 마지막으로 태그 App의 type속성을 변경 하고 Blazor WASM 프로젝트 component의 Apprazor 클래스 파일을 참조합니다 . 이 예제에서 App클래스는 BlazorWasm.Client프로젝트에 있습니다.

   <component type="typeof(App)" render-mode="ServerPrerendered" /> <!-- Previous -->
   <component type="typeof(BlazorWasm.Client.App)" render-mode="ServerPrerendered" /> <!-- New -->
   

---

그게 다야! Blazor 서버 쪽 프로젝트를 실행하면 "Loading ..."텍스트없이로드되어야합니다.

• Blazor WASM 프로젝트에 변경 사항이 없으며 코드 중복이 발생하지 않았습니다.
• 변경할 유일한 것은 참조와 launchSettings.json& appsettings.json입니다.
• StartupBlazor 서버 측에 대한 구성의 경우 Blazor WASM 프로젝트에서 확장 메서드를 만들고 Blazor 서버 측 프로젝트에서 사용할 수 있습니다.

참고 : 솔직히 이것이 개발 중 디버깅에만 이상적이라고 생각합니다. WASM 면도기 파일은 여전히 ​​HTTP 요청을 사용하기 때문에 진정한 Blazor 서버 측의 기능을 완전히 활용하지 않기 때문입니다.

---

아래의 피드백을 기대합니다! : DD