호스트된 여러 ASP.NET Core Blazor WebAssembly 앱

아티클
02/09/2024

참고 항목

이 문서의 최신 버전은 아닙니다. 이 문서의 최신 버전은 .NET 7 버전을 참조하세요.

이 문서에서는 여러 Blazor WebAssembly 앱을 호스트하도록 호스트된 Blazor WebAssembly 앱을 구성하는 방법을 설명합니다.

구성

포트/도메인 호스팅(예: 또는) 또는secondapp.comfirstapp.com/ 경로 하위 경로 호스팅(예/:5002:5001/FirstApp: 및)과 같이 호스팅 요구 사항과 /SecondApp일치하는 이 문서의 버전을 선택합니다.

현재 호스팅 선택을 통해 이 문서에서는 포트/도메인 호스팅(예: :5001/:5002 또는 firstapp.com/secondapp.com)을 다룹니다.

아래 예제에서 다음을 수행합니다.

호스트된 Blazor WebAssembly 앱의 프로젝트 이름은 MultipleBlazorApps라는 폴더의 MultipleBlazorApps입니다.
두 번째 클라이언트 앱이 추가되기 전 솔루션의 세 개 프로젝트는 Client 폴더의 MultipleBlazorApps.Client, Server 폴더의 MultipleBlazorApps.Server 및 Shared 폴더의 MultipleBlazorApps.Shared입니다.
초기(첫 번째) 클라이언트 앱은 Blazor WebAssembly 프로젝트 템플릿에서 만든 솔루션의 기본 클라이언트 프로젝트입니다.
두 번째 클라이언트 앱은 SecondClient라는 폴더의 MultipleBlazorApps.SecondClient 솔루션에 추가됩니다.
필요에 따라 서버 프로젝트()는MultipleBlazorApps.Server 페이지 또는 보기를 Pages 또는 MVC 앱으로 Razor 제공할 수 있습니다.
첫 번째 클라이언트 앱은 포트가 5001이거나 호스트가 firstapp.com인 브라우저에서 액세스할 수 있습니다. 두 번째 클라이언트 앱은 포트가 5002이거나 호스트가 secondapp.com인 브라우저에서 액세스할 수 있습니다.

현재 선택 항목을 사용하여 이 문서에서는 경로 하위 경로 호스팅(예: /FirstApp 및 /SecondApp)을 다룹니다.

아래 예제에서 다음을 수행합니다.

호스트된 Blazor WebAssembly 앱의 프로젝트 이름은 MultipleBlazorApps라는 폴더의 MultipleBlazorApps입니다.
두 번째 클라이언트 앱이 추가되기 전 솔루션의 세 개 프로젝트는 Client 폴더의 MultipleBlazorApps.Client, Server 폴더의 MultipleBlazorApps.Server 및 Shared 폴더의 MultipleBlazorApps.Shared입니다.
초기(첫 번째) 클라이언트 앱은 Blazor WebAssembly 프로젝트 템플릿에서 만든 솔루션의 기본 클라이언트 프로젝트입니다.
두 번째 클라이언트 앱은 SecondClient라는 폴더의 MultipleBlazorApps.SecondClient 솔루션에 추가됩니다.
필요에 따라 서버 프로젝트(MultipleBlazorApps.Server)는 페이지 또는 보기를 공식 Razor Pages 또는 MVC 앱으로 제공할 수 있습니다.
두 클라이언트 앱 모두 프로젝트 Properties/launchSettings.json 파일에서 정의한 MultipleBlazorApps.Server 기본 포트를 해당 applicationUrl 값으로 사용합니다. 첫 번째 클라이언트 앱은 하위 경로의 브라우저에서 /FirstApp 액세스할 수 있습니다. 두 번째 클라이언트 앱은 하위 경로의 브라우저에서 /SecondApp 액세스할 수 있습니다.

이 문서에 표시된 예제에는 다음을 위한 추가 구성이 필요합니다.

예제 호스트 도메인, firstapp.com 및 secondapp.com에 있는 앱에 직접 액세스.
TLS/HTTPS 보안을 사용하도록 설정하는 클라이언트 앱 인증서.
다음 기능을 위해 서버 앱을 Pages 앱으로 Razor 구성합니다.
- Razor 구성 요소를 페이지 또는 보기에 통합.
- Razor 구성 요소를 미리 렌더링.

이전 구성은 이 문서의 범위를 벗어납니다. 자세한 내용은 다음 리소스를 참조하세요.

.NET CLI를 사용하는 경우 옵션을 전달 -ho|--hosted 하거나 IDE에서 프로젝트를 만들 때 Visual Studio에서 Blazor WebAssembly ASP.NET Core Hosted 확인란을 선택하여 기존 호스팅 Blazor WebAssembly솔루션을 사용하거나 프로젝트 템플릿에서 새 호스트 Blazor WebAssembly 된 솔루션을 만듭니다.

이 솔루션에 MultipleBlazorApps라는 폴더를 사용하고 프로젝트 이름을 MultipleBlazorApps라고 지정합니다.

솔루션에 새 폴더를 만듭니다 SecondClient. 새 폴더에 라는 MultipleBlazorApps.SecondClient두 번째 Blazor WebAssembly 클라이언트 앱을 추가합니다. 프로젝트를 독립 실행형 Blazor WebAssembly 앱으로 추가합니다. 독립 실행형 Blazor WebAssembly 앱을 만들려면 .NET CLI를 사용하는 경우 옵션을 전달 -ho|--hosted 하지 않거나 Visual Studio를 사용하는 경우 ASP.NET Core Hosted 확인란을 사용하지 마세요.

프로젝트를 다음과 같이 변경 MultipleBlazorApps.SecondClient 합니다.

폴더에서 FetchData 폴더로 Client/Pages 구성 요소(Pages/FetchData.razor)를 복사합니다SecondClient/Pages. 독립 실행형 Blazor WebAssembly 앱은 날씨 데이터에 대한 프로젝트의 컨트롤러를 Server 호출하지 않고 정적 데이터 파일을 사용하므로 이 단계가 필요합니다. 추가된 FetchData 프로젝트에 구성 요소를 복사하여 두 번째 클라이언트 앱은 날씨 데이터에 대한 서버 API에 대한 웹 API 호출도 합니다.
폴더 weather.json 의 SecondClient/wwwroot/sample-data 파일이 사용되지 않으므로 폴더를 삭제합니다.

다음 표에서는 폴더 및 프로젝트가 추가된 후 SecondClient 솔루션의 폴더 및 MultipleBlazorApps.SecondClient 프로젝트 이름을 설명합니다.

실제 폴더	프로젝트 이름	설명
`Client`	`MultipleBlazorApps.Client`	Blazor WebAssembly 클라이언트 앱
`SecondClient`	`MultipleBlazorApps.SecondClient`	Blazor WebAssembly 클라이언트 앱
`Server`	`MultipleBlazorApps.Server`	ASP.NET Core 서버 앱
`Shared`	`MultipleBlazorApps.Shared`	공유 리소스 프로젝트

이 MultipleBlazorApps.Server 프로젝트는 두 Blazor WebAssembly 클라이언트 앱을 제공하고 MVC 컨트롤러를 통해 클라이언트 앱의 FetchData 구성 요소에 날씨 데이터를 제공합니다. 필요에 따라 MultipleBlazorApps.Server 프로젝트는 페이지 또는 보기를 기존 Razor Pages 또는 MVC 앱으로 제공할 수도 있습니다. 페이지 또는 보기 제공을 사용하도록 설정하는 단계는 이 문서의 뒷부분에 설명되어 있습니다.

참고 항목

이 문서의 데모에서는 프로젝트 및 SecondApp MultipleBlazorApps.SecondClient 프로젝트에 대한 MultipleBlazorApps.Client 정적 웹 자산 경로 이름을 FirstApp 사용합니다. 이름 "FirstApp" 및 "SecondApp"은 데모용으로만 사용됩니다. 다른 이름은 클라이언트 앱(예: App1/App2,Client22Client1/1/ 또는 유사한 명명 체계)을 구분할 수 있습니다.

포트 또는 도메인을 통해 클라이언트 앱에 요청을 라우팅하는 경우 "FirstApp" 및 "SecondApp"는 내부적으로 요청을 라우팅하고 정적 자산에 대한 응답을 제공하는 데 사용되며 브라우저의 주소 표시줄에 표시되지 않습니다.

참고 항목

요청이 이러한 이름을 사용하여 두 클라이언트 앱으로 라우팅되기 때문에 "" 및 "FirstAppSecondApp"도 브라우저의 주소 표시줄에 표시됩니다. 다른 유효한 URL 경로 세그먼트가 지원되며, 경로 세그먼트는 정적 웹 자산을 내부적으로 라우팅하는 데 사용되는 이름과 엄격하게 일치시킬 필요가 없습니다. 내부 정적 자산 라우팅 및 앱 요청 라우팅 모두에 "FirstApp" 및 "SecondApp"를 사용하는 것은 이 문서의 예제에서 소집을 위한 것일 뿐입니다.

첫 번째 클라이언트 앱의 프로젝트 파일(MultipleBlazorApps.Client.csproj)에서 프로젝트의 정적 자산에 FirstApp 대한 기본 경로를 설정하는 값을 가진 속성 <PropertyGroup> 에 추가 <StaticWebAssetBasePath> 합니다.

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

MultipleBlazorApps.SecondClient 앱의 프로젝트 파일(MultipleBlazorApps.SecondClient.csproj)에서 다음을 수행합니다.

SecondApp 값을 사용하여 <PropertyGroup>에 <StaticWebAssetBasePath> 속성을 추가합니다.
```
<StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
```

MultipleBlazorApps.Shared 프로젝트에 대한 프로젝트 참조를 <ItemGroup>에 추가합니다.

<ItemGroup>
  <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" />
</ItemGroup>

서버 앱의 프로젝트 파일(Server/MultipleBlazorApps.Server.csproj)에서 추가된 MultipleBlazorApps.SecondClient 클라이언트 앱에 대한 프로젝트 참조를 <ItemGroup>에 만듭니다.

<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />

서버 앱의 Properties/launchSettings.json 파일에서 포트 5001 및 5002에서 클라이언트 앱에 액세스하도록 프로필(MultipleBlazorApps.Server)을 구성 applicationUrl Kestrel 합니다. 예제 도메인을 사용하도록 로컬 환경을 구성하는 경우 URL applicationUrl 은 포트를 사용하고 firstapp.com secondapp.com 사용하지 않을 수 있습니다.

참고 항목

이 데모에서 포트를 사용하면 로컬 호스팅 환경을 구성할 필요 없이 로컬 브라우저에서 클라이언트 프로젝트에 액세스할 수 있으므로 웹 브라우저가 호스트 구성 firstapp.com 및 secondapp.com을 통해 클라이언트 앱에 액세스할 수 있습니다. 프로덕션 시나리오에서 일반적인 구성은 하위 도메인을 사용하여 클라이언트 앱을 구분하는 것입니다.

예시:

이 데모의 구성에서 포트가 삭제됩니다.
호스트는 하위 도메인을 사용하도록 변경됩니다. 예를 들면 사이트 방문자의 경우 www.contoso.com으로, 관리자의 경우 admin.contoso.com으로 변경됩니다.
추가 클라이언트 앱에 대해 추가 호스트를 포함할 수 있으며, 서버 앱이 페이지 또는 보기를 제공하는 Razor Pages 또는 MVC 앱인 경우 하나 이상의 호스트가 필요합니다.

서버 앱에서 페이지 또는 보기를 제공하려는 경우 Properties/launchSettings.json 파일에서 아래 applicationUrl 설정을 사용하여 다음 액세스를 허용합니다.

필요에 따라 Razor Pages 또는 MVC 앱(MultipleBlazorApps.Server 프로젝트)은 포트 5000의 요청에 응답합니다.
첫 번째 클라이언트(MultipleBlazorApps.Client 프로젝트)에 대한 요청에 대한 응답은 포트 5001에 있습니다.
두 번째 클라이언트(MultipleBlazorApps.SecondClient 프로젝트)에 대한 요청에 대한 응답은 포트 5002에 있습니다.

"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",

서버 앱이 페이지 또는 보기를 제공하지 않고 Blazor WebAssembly 클라이언트 앱만 제공하도록 계획하려는 경우 다음 설정을 사용하여 다음 액세스를 허용합니다.

첫 번째 클라이언트 앱은 포트 5001에서 응답합니다.
두 번째 클라이언트 앱은 포트 5002에서 응답합니다.

"applicationUrl": "https://localhost:5001;https://localhost:5002",

서버 앱의 Program.cs 파일에서 UseHttpsRedirection에 대한 호출 뒤에 표시되는 다음 코드를 제거합니다.

서버 앱에서 페이지 또는 뷰를 제공하려는 경우 다음 코드 줄을 삭제합니다.
```
- app.UseBlazorFrameworkFiles();
```
```
- app.MapFallbackToFile("index.html");
```

서버 앱이 Blazor WebAssembly 클라이언트 앱만 제공하도록 하려면 다음 코드를 삭제합니다.

- app.UseBlazorFrameworkFiles();

...

- app.UseRouting();

- app.MapRazorPages();
- app.MapControllers();
- app.MapFallbackToFile("index.html");

정적 파일 미들웨어를 그대로 둡니다.

app.UseStaticFiles();

클라이언트 앱에 요청을 매핑하는 미들웨어를 추가합니다. 다음 예제에서는 요청 포트가 첫 번째 클라이언트 앱의 경우 5001이거나 두 번째 클라이언트 앱의 경우 5002이거나 요청 호스트가 firstapp.com 첫 번째 클라이언트 앱 또는 secondapp.com 두 번째 클라이언트 앱에 대한 경우 실행되도록 미들웨어를 구성합니다.

참고 항목

로컬 브라우저와 함께 로컬 시스템에서 호스트(firstapp.com/secondapp.com)를 사용하려면 이 문서에서 다루지 않는 추가 구성이 필요합니다. 이 시나리오의 로컬 테스트에서는 포트를 사용하는 것이 좋습니다. 일반적인 프로덕션 앱은 하위 도메인 www.contoso.com(사이트 방문자의 경우) 및 admin.contoso.com(관리자의 경우)을 사용하도록 구성됩니다. 이 문서에서 다루지 않으며 사용되는 기술에 따라 다른 DNS 및 서버 구성을 사용하면 앱은 다음 코드에서 명명된 호스트의 요청에 응답합니다.

줄을 Program.cs제거한 app.UseBlazorFrameworkFiles(); 위치에 다음 코드를 배치합니다.
```
app.MapWhen(ctx => ctx.Request.Host.Port == 5001 || 
    ctx.Request.Host.Equals("firstapp.com"), first =>
{
    first.Use((ctx, nxt) =>
    {
        ctx.Request.Path = "/FirstApp" + ctx.Request.Path;
        return nxt();
    });

    first.UseBlazorFrameworkFiles("/FirstApp");
    first.UseStaticFiles();
    first.UseStaticFiles("/FirstApp");
    first.UseRouting();

    first.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", 
            "FirstApp/index.html");
    });
});

app.MapWhen(ctx => ctx.Request.Host.Port == 5002 || 
    ctx.Request.Host.Equals("secondapp.com"), second =>
{
    second.Use((ctx, nxt) =>
    {
        ctx.Request.Path = "/SecondApp" + ctx.Request.Path;
        return nxt();
    });

    second.UseBlazorFrameworkFiles("/SecondApp");
    second.UseStaticFiles();
    second.UseStaticFiles("/SecondApp");
    second.UseRouting();

    second.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}", 
            "SecondApp/index.html");
    });
});
```
Warning

호스트 헤더(예: HttpRequest.Host 및RequireHost)를 사용하는 API는 클라이언트에서 스푸핑될 수 있습니다.

호스트 및 포트 스푸핑을 방지하려면 다음 방법 중 하나를 사용합니다.
- 포트가 검사되는 위치(ConnectionInfo.LocalPort)를 사용합니다 HttpContext.Connection .
- 호스트 필터링을 사용 하세요.

클라이언트 앱에 요청을 매핑하는 미들웨어를 추가합니다. 다음 예제에서는 요청 하위 경로가 /FirstApp 첫 번째 클라이언트 앱 또는 /SecondApp 두 번째 클라이언트 앱에 대한 경우 실행되도록 미들웨어를 구성합니다.

줄을 Program.cs제거한 app.UseBlazorFrameworkFiles(); 위치에 다음 코드를 배치합니다.

app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/FirstApp", 
    StringComparison.OrdinalIgnoreCase), first =>
{
    first.UseBlazorFrameworkFiles("/FirstApp");
    first.UseStaticFiles();
    first.UseStaticFiles("/FirstApp");
    first.UseRouting();

    first.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}",
            "FirstApp/index.html");
    });
});

app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/SecondApp", 
    StringComparison.OrdinalIgnoreCase), second =>
{
    second.UseBlazorFrameworkFiles("/SecondApp");
    second.UseStaticFiles();
    second.UseStaticFiles("/SecondApp");
    second.UseRouting();

    second.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}",
            "SecondApp/index.html");
    });
});

각 클라이언트 앱에서 기본 경로를 설정합니다.

첫 번째 클라이언트 앱의 index.html 파일(Client/wwwroot/index.html)에서 하위 경로를 반영하도록 태그 값을 업데이트 <base> 합니다. 후행 슬래시가 필요합니다.
```
<base href="/FirstApp/" />
```
두 번째 클라이언트 앱의 index.html 파일(SecondClient/wwwroot/index.html)에서 하위 경로를 반영하도록 태그 값을 업데이트 <base> 합니다. 후행 슬래시가 필요합니다.
```
<base href="/SecondApp/" />
```

UseStaticFiles에 대한 자세한 내용은 ASP.NET Core Blazor 정적 파일을 참조하세요.

UseBlazorFrameworkFiles 및 MapFallbackToFile에 대한 내용은 다음 리소스를 참조하세요.

참고 항목

.NET 참조 원본의 설명서 링크는 일반적으로 다음 릴리스의 .NET을 위한 현재 개발을 나타내는 리포지토리의 기본 분기를 로드합니다. 특정 릴리스를 위한 태그를 선택하려면 Switch branches or tags(분기 또는 태그 전환) 드롭다운 목록을 사용합니다. 자세한 내용은 ASP.NET Core 소스 코드(dotnet/AspNetCore.Docs #26205)의 버전 태그를 선택하는 방법을 참조하세요.

클라이언트 앱에서 서버 API로 /WeatherForecast 의 요청은 요청을 만드는 클라이언트 앱에 따라 달라집니다 /FirstApp/WeatherForecast /SecondApp/WeatherForecast . 따라서 서버 API에서 날씨 데이터를 반환하는 컨트롤러 경로는 경로 세그먼트를 포함하도록 수정해야 합니다.

서버 앱의 일기 예보 컨트롤러(Controllers/WeatherForecastController.cs)에서 클라이언트 요청 경로를 고려하여 기존 경로([Route("[controller]")]) WeatherForecastController 를 다음 경로로 바꿉니다.

[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]

서버 앱에서 페이지를 제공하려는 경우 서버 앱의 Pages 폴더에 IndexRazor 페이지를 추가합니다.

Pages/Index.cshtml:

@page
@model MultipleBlazorApps.Server.Pages.IndexModel
@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from Razor Pages!</p>
            </div>
        </div>
    </div>
</body>
</html>

Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

참고 항목

앞의 Index 페이지는 데모용으로만 최소한의 예제입니다. 앱에 레이아웃, 스타일, 스크립트 및 가져오기와 같은 추가 Razor Pages 자산이 필요한 경우 Razor Pages 프로젝트 템플릿에서 만든 앱에서 가져옵니다. 자세한 내용은 의 Razor Pages 소개를 참조하세요.

서버 앱에서 MVC 보기를 제공하려는 경우 Index 보기 및 Home 컨트롤러를 추가합니다.

Views/Home/Index.cshtml:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from MVC!</p>
            </div>
        </div>
    </div>
</body>
</html>

Controllers/HomeController.cs:

using Microsoft.AspNetCore.Mvc;

namespace MultipleBlazorApps.Server.Controllers;

public class HomeController : Controller
{
    public IActionResult Index() => View();
}

참고 항목

앞의 Index 보기는 데모용으로만 최소한의 예제입니다. 앱에 레이아웃, 스타일, 스크립트 및 가져오기와 같은 추가 MVC 자산이 필요한 경우 MVC 프로젝트 템플릿에서 만든 앱에서 가져옵니다. 자세한 내용은 ASP.NET Core MVC 시작을 참조하세요.

서버 앱의 페이지 또는 보기에서 클라이언트 앱 중 하나의 Razor 구성 요소를 사용하는 방법에 대한 자세한 내용은 ASP.NET Core Razor 구성 요소 미리 렌더링 및 통합을 참조하세요.

앱 실행

MultipleBlazorApps.Server 프로젝트를 실행합니다.

https://localhost:5001에서 초기 클라이언트 앱에 액세스합니다.
https://localhost:5002에서 추가된 클라이언트 앱에 액세스합니다.
서버 앱이 페이지 또는 보기를 제공하도록 구성된 경우 https://localhost:5000에서 Index 페이지 또는 보기에 액세스합니다.

https://localhost:{DEFAULT PORT}/FirstApp에서 초기 클라이언트 앱에 액세스합니다.
https://localhost:{DEFAULT PORT}/SecondApp에서 추가된 클라이언트 앱에 액세스합니다.
서버 앱이 페이지 또는 보기를 제공하도록 구성된 경우 https://localhost:{DEFAULT PORT}에서 Index 페이지 또는 보기에 액세스합니다.

앞의 예제 URL {DEFAULT PORT} 에서 자리 표시자는 프로젝트 Properties/launchSettings.json 파일의 값에 applicationUrl 정의된 MultipleBlazorApps.Server 기본 포트입니다.

Important

(또는dotnet run) 명령(.NET CLI)을 사용하여 dotnet watch 앱을 실행할 때 명령 셸이 솔루션 폴더에서 Server 열려 있는지 확인합니다.

Visual Studio의 시작 단추를 사용하여 앱을 실행하는 경우 프로젝트가 시작 프로젝트(솔루션 탐색기 강조 표시됨)로 설정되어 있는지 MultipleBlazorApps.Server 확인합니다.

정적 자산

자산이 클라이언트 앱의 wwwroot 폴더에 있는 경우 구성 요소에 정적 자산 요청 경로를 제공합니다.

<img alt="..." src="{PATH AND FILE NAME}" />

{PATH AND FILE NAME} 자리 표시자는 wwwroot 아래의 경로 및 파일 이름입니다.

예를 들어 wwwroot의 vehicle 폴더에 있는 지프 이미지(jeep-yj.png)에 대한 원본:

<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />

RCL(Razor 클래스 라이브러리) 지원

Razor RCL(클래스 라이브러리)을 솔루션에 새 프로젝트로 추가합니다.

솔루션 탐색기에서 솔루션을 마우스 오른쪽 단추로 클릭하고 추가>새 프로젝트를 선택합니다.
Razor 클래스 라이브러리 프로젝트 템플릿을 사용하여 프로젝트를 만듭니다. 이 섹션의 예제에서는 프로젝트 이름 ComponentLibrary(RCL의 어셈블리 이름이기도 함)를 사용합니다. 지원 페이지 및 보기 확인란을 선택하지 마세요.

호스트된 각 Blazor WebAssembly 클라이언트 앱에서 RCL 프로젝트에 대한 프로젝트 참조를 만듭니다. 솔루션 탐색기에서 각 클라이언트 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가>프로젝트 참조를 선택하면 됩니다.

다음 방법 중 하나를 사용하여 클라이언트 앱에서 RCL의 구성 요소를 사용합니다.

RCL 네임스페이스의 구성 요소 맨 위에 @using 지시문을 놓고 구성 요소에 대한 Razor 구문을 추가합니다. 다음 예제는 어셈블리 이름이 ComponentLibrary인 RCL에 대한 것입니다.
```
@using ComponentLibrary

...

<Component1 />
```
구성 요소에 Razor 구문과 함께 RCL의 네임스페이스를 제공합니다. 이 방법을 사용하는 경우 구성 요소 파일의 맨 위에 @using 지시문이 필요하지 않습니다. 다음 예제는 어셈블리 이름이 ComponentLibrary인 RCL에 대한 것입니다.
```
<ComponentLibrary.Component1 />
```

참고 항목

@using 지시문을 각 클라이언트 앱의 _Import.razor 파일에 배치할 수도 있습니다. 이 경우 RCL의 네임스페이스를 해당 프로젝트의 구성 요소에서 전역적으로 사용할 수 있습니다.

다른 정적 자산이 RCL의 wwwroot 폴더에 있는 경우 ASP.NET Core를 사용하여 클래스 라이브러리에서 재사용 가능한 Razor UI의 지침에 따라 클라이언트 앱의 정적 자산을 참조합니다.

<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />

{PACKAGE ID} 자리 표시자는 RCL의 패키지 ID입니다. <PackageId>가 프로젝트 파일에 지정되지 않은 경우 패키지 ID는 기본적으로 프로젝트의 어셈블리 이름으로 설정됩니다. {PATH AND FILE NAME} 자리 표시자는 wwwroot 아래의 경로 및 파일 이름입니다.

다음 예제에서는 RCL wwwroot 폴더의 폴더에 있는 vehicle 지프 이미지(jeep-yj.png)에 대한 태그를 보여 줍니다. 다음 예제는 어셈블리 이름이 ComponentLibrary인 RCL에 대한 것입니다.

<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />

다음을 통해 공유

호스트된 여러 ASP.NET Core Blazor WebAssembly 앱

구성

앱 실행

정적 자산

RCL(Razor 클래스 라이브러리) 지원

추가 리소스

추가 리소스