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

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

환경

비주얼 스튜디오

비주얼 스튜디오 2019

.NET

.NET 5.0

처음에

이 팁은 "코어 MVC 보기에서 Blazor 웹 어셈블리 실행"ASP.NET 에 대한 지식을 가정하므로 ASP.NET 코어 MVC에서 Blazor 어셈블리를 실행하는 방법을 모르는 경우 해당 문서를 참조하십시오.

이전 방법을 사용하면 블라조르 어셈블리를 하나만 배치할 수 있으므로 이 팁을 사용하면 하나 이상을 배치할 수 있습니다.

두 개의 Blazor 어셈블리 만들기

두 블라저 어셈블리가 각각 실행되고 있는지 확인할 수 있으므로 Blazor 어셈블리가 무엇이든 할 수 있습니다. 당분간 의차이를 볼 수 있도록 만들어 주세요. 여기서 왼쪽 메뉴의 색상은 프로젝트의 초기 상태에 대해 변경됩니다.

각 프로젝트를 게시하고 파일을 준비합니다.

ASP.NET 코어 MVC 프로젝트 만들기

이는 프로젝트를 만들기 전에 팁을 기반으로 합니다. 프로젝트를 만든 후에는 'NuGet'을 Microsoft.AspNetCore.Components.WebAssembly.Server 추가합니다.

_Layout.cshtml 수정

이것은 지난 시간과 동일합니다.

<!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 어셈블리를 표시하는 두 가지 보기를 갖게 됩니다.

HomeController 두 작업을 추가합니다. 다시 말하지만, 서버 측은 특히 아무것도하지 않으므로 보기를 반환하기만 하면 됩니다.

홈 컨트롤러.cs

// 省略

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

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

    public IActionResult Blazor2()
    {
      return View();
    }
  }
}

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

뷰가 만들어집니다.

먼저 첫 번째 Blazor 어셈블리를 설정합니다.

블라졸르1.cshtml

@{
  ViewData["Title"] = "Blazor1";
}
@section Styles {
  <base href="/Home/Blazor1/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample1.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>
}

이전 태그의 내용과 다른 점은 기본 태그의 내용이 <base href="/" /> 만들어집니다. <base href="/Home/Blazor1/" />

이 경로를 변경하는 경우 Blazor 어셈블리는 dll과 같은 각 파일을 상대 경로의 이 경로의 루트로 참조할 수 있습니다.

그러나 현재 Blazor 어셈블리 사양은 MVC 작업에 의해 결정된 URL이 이 베이스의 호스트의 상대 경로와 일치하지 않으면 로딩시 블라저 어셈블리가 실패하기 때문에 컨트롤러와 동작이 동일한 경로를 갖다고 지정합니다.

그런데 이 경로의 경우 영향을 하므로 URL이 자동으로 소문자인 경우 소문자여야 합니다.

Blazor2.cshtml 편집도 할 수 있습니다. Blazor1.cshtml 일부 와는 다른 점에 유의하시기 바랍니다.

블레이졸2.cshtml

@{
  ViewData["Title"] = "Blazor2";
}
@section Styles {
  <base href="/Home/Blazor2/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample2.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>
}

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

인덱스.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>

@* 追加 *@
<ul>
  <li><a asp-action="Blazor1">Blazor1</a></li>
  <li><a asp-action="Blazor2">Blazor2</a></li>
</ul>

시작.cs 변경 사항

블라저 웹어셈블리의 경로 경로가 변경되므로 각 경로에 대해 활성화할 수 있습니다.

app.UseBlazorFrameworkFiles("/Home/Blazor1");
app.UseBlazorFrameworkFiles("/Home/Blazor2");

블라저 웹어셈블리 배포

마지막으로 게시된 파일을 wwwroot에 배치했지만 각 페이지에 기본 태그에 대한 경로를 지정했으므로 wwwroot에서 유사한 경로가 있는 폴더를 만듭니다.

게시된 파일의 wwwroot의 내용을 각 폴더에 복사합니다. 이전과 마찬가지로 index.html 필요하지 않습니다.

실행

각 페이지의 블래저 웹어셈블리가 올바르게 작동하는지 확인하려면 실행합니다.

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