ASP.NET 코어 MVC에 여러 블라저 웹 어셈블리 배포
환경
- 비주얼 스튜디오
-
- 비주얼 스튜디오 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 필요하지 않습니다.
실행
각 페이지의 블래저 웹어셈블리가 올바르게 작동하는지 확인하려면 실행합니다.