ASP.NET 핵심 MVC보기로 Blazor 웹 어셈블리 실행

페이지 업데이트 : 2022년 7월 17일 일요일

페이지 생성 날짜 : 2022년 3월 30일 수요일

환경

비주얼 스튜디오

비주얼 스튜디오 2019

.NET

.NET 5.0

처음에

Blazor WebAssembly는 클라이언트 기술이므로 웹 서버가 어떻게 작동하는지는 중요하지 않습니다. 그러나 WebAssembly를 클라이언트에 제공하려면 최소한 서버 측 구성이 필요합니다. 서버 프로그램을 Blazor WebAssembly에서 Core MVC ASP.NET 실행해 보겠습니다.

블레이저 웹어셈블리 만들기

이제 Blazor WebAssembly가 작동하는지 확인해야하므로 프로젝트를 만들 때와 동일하게 남겨 둘 것입니다.

프로젝트 이름 또는 솔루션 이름은 임의적입니다.

추가 정보 화면에 표시된 "Core에서 호스팅되는 ASP.NET" 화면은 MVC로도 작동할 수 있지만 결과 프로젝트는 API 서버에 가깝기 때문에 여기에서 확인하지 않습니다.

Blazor WebAssembly 게시

파일을 게시하여 Blazor WebAssembly를 ASP.NET Core MVC 프로젝트에 배포합니다.

프로젝트를 마우스 오른쪽 단추로 클릭하고 게시를 선택합니다.

폴더를 선택합니다.

기본 게시 대상을 그대로 둡니다.

게시 화면이 나타납니다. 다양한 설정을 설정할 수 있지만 지금은 "게시"버튼이 기본값으로 남아 있습니다.

게시가 시작되고 성공적으로 완료될 때까지 기다립니다. 긴 폴더 경로는 실패할 수 있습니다.

파일이 지정된 폴더에 만들어졌는지 확인할 수 있습니다. 상대 경로로 지정되면 대상은 프로젝트에 상대적입니다.

ASP.NET 핵심 MVC 프로젝트 만들기

다음으로 ASP.NET Core MVC 프로젝트를 만듭니다. Visual Studio를 별도로 여는 것은 지루할 수 있으므로 Blazor WebAssembly 솔루션 내에서 만듭니다. 이번에는 두 프로젝트가 연결되어 있지 않기 때문에 별도로 작성하더라도 아무런 문제가 없습니다.

프로젝트 이름은 선택 사항입니다. 다른 설정은 기본값으로 유지됩니다.

Blazor 측은 개발이 완료되었다고 가정하 ASP.NET 핵심 MVC 측의 프로젝트는 신생 기업입니다.

블레이저 어셈블리에 대한 뷰 만들기

이 영역은 실제로 만드는 프로젝트에 따라 변경되므로 해당 프로젝트에 따라 수정하십시오. 여기에서는 샘플 프로젝트의 구성에 따라 수정합니다.

기본적으로 Blazor 어셈블리를 게시 index.html 할 때 생성 된 것과 유사하도록 수정해야합니다.

_Layout.cshtml 수정

Blazor 어셈블리의 CSS를 참조하고 싶기 때문에 직접 쓸 수 있습니다. _Layout.cshtml 가능한 한 대상 페이지에만 적용하기를 원하므로 CSS에 대한 링크를 각 페이지에 작성할 수 있도록 RenderSectionAsync 추가하여 확장 할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - AspNetCoreMvc</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/site.css" />
  @* 追加 *@
  @await RenderSectionAsync("Styles", required: false)
</head>
<body>
  <!-- 以下同じなので省略 -->

Blazor 어셈블리에 대한 페이지 추가

전용 페이지를 추가하여 Blazor 어셈블리를 표시합니다. ASP.NET Core MVC의 일반 페이지 추가 및 절차는 동일합니다.

HomeController 에 다음 작업을 추가합니다. 서버 측은 특히 아무 것도하지 않으므로 뷰를 반환합니다.

홈 컨트롤러.cs

// 省略

namespace AspNetCoreMvc.Controllers
{
  public class HomeController : Controller
  {
    // 省略

    // 追加
    public IActionResult Blazor()
    {
      return View();
    }
  }
}

작업을 마우스 오른쪽 단추로 클릭하여 보기를 추가합니다.

바인딩 할 것이 없으므로 그대로 추가하십시오.

보기가 만들어집니다.

Blazor Assembly의 출판 당시에 생성 된 index.html 것을 사용하여 다음과 같이 리메이크 할 것입니다.

Blazor.cshtml

@{
  ViewData["Title"] = "Blazor";
}
@section Styles {
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

Blazor의 페이지로 이동할 수 있도록 링크를 추가합니다.

index.cshtml

@{
  ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@* 追加 *@
<a asp-action="Blazor">Blazor</a>

Microsoft.AspNetCore.Components.WebAssembly.Server 참조 추가

Startup.cs 필요한 코드를 직접 작성할 필요는 없지만 NuGet에서 Microsoft.AspNetCore.Components.WebAssembly.Server 쉽게 사용할 수 있습니다.

종속성을 마우스 오른쪽 단추로 클릭하고 NuGet 패키지 관리를 선택합니다.

관리 탭을 선택하고 검색 필드에 Microsoft.AspNetCore.Components.WebAssembly.Server를 입력합니다.

같은 이름의 패키지가 표시되므로 설치하십시오.

패키지가 추가되었는지 확인합니다.

시작 변경.cs

app.UseHttpsRedirection(); 줄 다음 줄에 다음 코드를 삽입합니다.

app.UseBlazorFrameworkFiles();

Blazor 웹어셈블리 배포

기본적으로 게시 된 Blazor WebAssembly wwwroot 폴더를 ASP.NEt Coreindex.html 의 wwwroot 폴더에있는 그대로 넣을 수 있지만 더 이상 필요하지 않으므로 삭제해야합니다. 또한 더빙 되었기favicon.ico 때문에 사용할 아이콘을 결정하십시오.

PWA를 사용하여 릴리스할 때 wwwroot 폴더에 제외된 파일(예: 인덱스.html)이 있는 경우 텍스트 편집기와 wwwroot 폴더에서도 열고 제외된 파일에서 레코드를 service-worker-assets.js 삭제해야 합니다. 그렇지 않으면 웹 화면을 열 때 내부 오류가 발생할 수 있습니다.

Blazor 앱을 게시할 때 프로젝트에서 불필요한 파일을 제외하여 수동으로 이 작업을 수행할 필요가 없습니다.

PWA의 경우 내부 오류가 https 환경에 없는 경우 발생합니다. PWA로 설치할 수 없습니다.

실행 확인

ASP.NET 디버그는 코어 MVC 프로젝트를 실행합니다. Blazor 페이지를 방문하여 Blazor 어셈블리의 레이아웃이 페이지에 나타나는지 확인합니다. 왼쪽 메뉴를 선택하고 각 기능이 작동하는지 확인합니다.

URL 정보

페이지에 표시된 Blazor 어셈블리 왼쪽 메뉴를 클릭하면 URL이 변경되는 것을 알 수 있습니다. 이 동작은 ASP.NET Core MVC에서 예상하는 URL 동작을 따르지 않으므로 가능한 경우 Blazor 어셈블리는 URL이 변경되지 않는 방식으로 URL을 만드는 것이 좋습니다.

Blazor 페이지를 열 때

카운터 메뉴를 클릭할 때

변경 로그

2022/7/12

게시된 Blazor 앱의 파일 배치에서 불필요한 파일을 제외할 때 주의할 점이 추가되었습니다.

2022/3/30

초판

IIS의 블라저 웹어셈블리에서 만든 앱 배치

ASP.NET 코어 MVC에 여러 블라저 웹 어셈블리 배포