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

비고

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

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

구성 / 설정

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

실제 폴더	프로젝트 이름	Description
`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 앱으로 제공할 수도 있습니다. 페이지 또는 보기 제공을 사용하도록 설정하는 단계는 이 문서의 뒷부분에 설명되어 있습니다.

비고

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

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

비고

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

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

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

MultipleBlazorApps.SecondClient 앱의 프로젝트 파일(MultipleBlazorApps.SecondClient.csproj):

값이 <StaticWebAssetBasePath> 다음인 속성 <PropertyGroup> 에 추가 SecondApp합니다.
```
<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에서 클라이언트 앱에 액세스하도록 프로필(applicationUrl)을 구성 KestrelMultipleBlazorApps.Server 합니다. 예제 도메인을 사용하도록 로컬 환경을 구성하는 경우 URL applicationUrl 은 포트를 사용하고 firstapp.comsecondapp.com 사용하지 않을 수 있습니다.

비고

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

다음은 그 예입니다.

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

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

필요에 따라 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 및 서버 구성을 사용하면 앱은 다음 코드에서 명명된 호스트의 요청에 응답합니다.

줄을 app.UseBlazorFrameworkFiles();제거한 Program.cs 위치에 다음 코드를 배치합니다.
```
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");
    });
});
```
경고

호스트 헤더API는 클라이언트에서 스푸핑될 수 있습니다.

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

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

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

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 정적 파일을 참조하세요.

자세한 UseBlazorFrameworkFilesMapFallbackToFile내용은 다음 리소스를 참조하세요.

비고

문서 링크는 .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]")]

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

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 자산이 필요한 경우 Pages 프로젝트 템플릿에서 만든 앱에서 Razor 가져옵니다. 자세한 내용은 ASP.NET Core의 페이지 아키텍처 및 개념을 참조Razor하세요.

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

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 방법에 대한 자세한 내용은 호스트 Razor 된 솔루션의 MVC 또는 Razor Pages와 ASP.NET Core Blazor WebAssembly 구성 요소 통합을 참조하세요.

앱 실행

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

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

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

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

중요합니다

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

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

정적 자산

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

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

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

예를 들어 다음 폴더의 지프 이미지(jeep-yj.png)에 vehicle 대한 원본입니다 wwwroot.

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

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

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

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

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

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

@using RCL 네임스페이스의 구성 요소 맨 위에 지시문을 배치하고 구성 요소에 대한 구문을 추가 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 jeep-yj.png 폴더의 폴더에 있는 vehicle 지프 이미지(wwwroot)에 대한 태그를 보여 줍니다. 다음 예제는 어셈블리 이름을 ComponentLibrary가진 RCL에 대한 것입니다.

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

추가 리소스

피드백

이 페이지가 도움이 되었나요?

Last updated on 2025-11-11

다음을 통해 공유

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

구성 / 설정

앱 실행

정적 자산

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

추가 리소스

피드백

추가 리소스