다음을 통해 공유

Razor 클래스 라이브러리 프로젝트를 사용하여 ASP.NET Core에서 재사용 가능한 UI 생성하기

작성자: Rick Anderson

Razor 뷰, 페이지, 컨트롤러, 페이지 모델, Razor 구성 요소, 뷰 구성 요소 및 데이터 모델은 Razor 클래스 라이브러리(RCL)로 구축될 수 있습니다. RCL을 패키지하고 다시 사용할 수 있습니다. 응용 프로그램은 RCL을 포함하고, 그 안에 있는 뷰와 페이지를 오버라이드할 수 있습니다. 웹 앱과 RCL에서 모두 보기, 부분 보기, 또는 Razor 페이지를 찾을 수 있는 경우, 웹 앱의 Razor 마크업(.cshtml 파일)이 우선적으로 적용됩니다.

RCL의 빌드 프로세스에 npm과 webpack을 통합하는 방법에 대한 정보는 Razor를 참조하세요.

UI를 포함하는 Razor 클래스 라이브러리 만들기

  • Visual Studio에서 새 프로젝트 만들기를 선택합니다.
  • Razor > 선택합니다.
  • 라이브러리 이름(예: "RazorClassLib") >만들기 생성된 뷰 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 종료 .Views되지 않는지 확인합니다.
  • 지원 페이지 및 보기가 포함된 라이브러리가 필요하면 선택합니다. 기본적으로 구성 요소만 Razor 지원됩니다. 선택하고생성합니다.

Razor 클래스 라이브러리 템플릿은 기본적으로 Razor 구성 요소 개발에 사용됩니다. 지원 페이지 및 보기 옵션은 페이지와 보기를 지원합니다. Blazor에서 RCL 지원에 대한 자세한 내용은 Razor 클래스 라이브러리에서 ASP.NET Core Razor 구성 요소 사용을 참조하세요.

Razor 파일을 RCL에 추가하십시오.

ASP.NET Core 템플릿은 RCL 콘텐츠가 Areas 폴더에 있다고 가정합니다. RCL 페이지 레이아웃 아래를 참조하여 ~/Pages가 아닌 ~/Areas/Pages에서 콘텐츠를 노출하는 RCL을 만드십시오.

RCL 콘텐츠를 참조하세요.

RCL은 다음과 같이 참조할 수 있습니다.

보기, 부분 보기, 페이지 재정의

웹 앱과 RCL에서 모두 보기, 부분 보기, 또는 Razor 페이지를 찾을 수 있는 경우, 웹 앱의 Razor 마크업(.cshtml 파일)이 우선적으로 적용됩니다. 예를 들어 WebApp1에 추가 WebApp1/Areas/MyFeature/Pages/Page1.cshtml 하면 WebApp1의 Page1이 RCL의 Page1보다 우선합니다.

샘플 다운로드에서 우선 순위를 테스트하도록 WebApp1/Areas/MyFeature2 이름을 바꿉니다WebApp1/Areas/MyFeature.

RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 부분 보기를 WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml에 복사합니다. 마크업을 업데이트하여 새로운 위치를 나타내십시오. 앱의 부분이 사용되고 있는 버전을 확인하기 위해 앱을 빌드하고 실행하세요.

호스팅 앱에서 Razor Pages를 사용하는 RCL일 경우, Razor Pages 서비스 및 엔드포인트를 활성화합니다.

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

RCL 페이지 레이아웃

웹 앱의 Pages 폴더 일부인 것처럼 RCL 콘텐츠를 참조하기 위해, 다음 파일 구조로 RCL 프로젝트를 생성하십시오.

  • RazorUIClassLib/Pages
  • RazorUIClassLib/Pages/Shared

RazorUIClassLib/Pages/Shared에는 두 개의 부분 파일, 즉 _Header.cshtml와 _Footer.cshtml가 포함되어 있다고 가정해 보십시오. <partial> 태그를 _Layout.cshtml 파일에 추가할 수 있습니다.

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

호스트 웹 앱에서 _ViewStart.cshtml 파일을 사용하려면 RCL 프로젝트의 Pages 폴더에 _Layout.cshtml 파일을 추가하세요.

@{
    Layout = "_Layout";
}

정적 자산을 포함하여 RCL을 생성하세요.

RCL은 자신의 RCL 또는 RCL을 사용하는 앱에서 참조할 수 있는 보조 정적 자산을 필요로 할 수 있습니다. ASP.NET Core는 소비 애플리케이션에서 사용할 수 있는 정적 자산이 포함된 RCL을 생성할 수 있게 합니다.

RCL의 일부로 동반 자산을 포함하려면, 클래스 라이브러리에 wwwroot 폴더를 만들고 해당 폴더에 필요한 파일을 포함하세요.

RCL을 패킹할 때, wwwroot 폴더에 있는 모든 동반 자산은 패키지에 자동으로 포함됩니다.

dotnet pack 명령어를 사용하고 NuGet.exe 버전 nuget pack보다 사용하지 마십시오.

클라이언트 웹 자산을 빌드 프로세스에 추가하세요.

클라이언트 웹 자산을 빌드 파이프라인에 통합하는 것은 쉽지 않은 일입니다. 클래스 라이브러리Razor에 대한 클라이언트 웹 자산 빌드에 관한 정보를 보려면 여기를 참조하십시오.

정적 자산 제외

정적 에셋을 제외하려면 프로젝트 파일의 $(DefaultItemExcludes) 속성 그룹에 원하는 제외 경로를 추가하세요. 항목들은 세미콜론(;)으로 구분하십시오.

다음 예에서는 lib.css 폴더의 wwwroot 스타일시트가 정적 자산으로 간주되지 않아 게시된 RCL에 포함되지 않습니다.

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

Typescript 통합

RCL에 TypeScript 파일을 포함하려면 다음 단계를 따르세요:

  • 프로젝트에 Microsoft.TypeScript.MSBuild NuGet 패키지를 추가하세요.

    Note

    .NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 작업 흐름(NuGet 문서)의 패키지 설치 및 관리 섹션에서 확인할 수 있습니다. 올바른 패키지 버전을 NuGet.org에서 확인하세요.

  • TypeScript 파일을 .ts 폴더 외부에 배치하세요. 예를 들어, 파일을 Client 폴더에 배치하십시오.

  • 프로젝트 파일에 다음 마크업을 추가합니다.

    • wwwroot 속성을 사용하여 TypescriptOutDir 폴더에 대한 TypeScript 빌드 출력을 구성합니다.
    • TypeScript 대상을 PrepareForBuildDependsOn 대상의 종속성으로 포함합니다.
    • 출력물을 wwwroot folder에서 제거하십시오.
<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    // Markup removed for brevity.
    <TypescriptOutDir>wwwroot</TypescriptOutDir>
    <PrepareForBuildDependsOn>
      CompileTypeScriptWithTSConfig;
      GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
    </PrepareForBuildDependsOn>
  </PropertyGroup>

  <ItemGroup>
    <Content Remove="wwwroot\{path-to-typescript-outputs}" />
  </ItemGroup>

</Project>

참고된 RCL에서 내용을 소비하다

RCL의 wwwroot 폴더에 포함된 파일은 _content/{PACKAGE ID}/ 접두사를 통해 RCL 또는 소비자 앱에 공개됩니다. 예를 들어, 프로젝트 파일에 Razor.Class.Lib이 지정되지 않고 어셈블리 이름이 <PackageId>인 라이브러리는 _content/Razor.Class.Lib/에 정적 콘텐츠의 경로를 생성합니다. NuGet 패키지를 생성할 때 어셈블리 이름이 라이브러리의 프로젝트 파일에서 패키지 ID<PackageId> 와 동일하지 않은 경우 프로젝트 파일에 지정된 대로 패키지 ID를 {PACKAGE ID}사용합니다.

소비하는 앱은 라이브러리에서 제공하는 정적 자산을 <script>, <style>, <img> 및 기타 HTML 태그와 함께 참조합니다. 소비 앱은 정적 파일 지원을 활성화해야 합니다.

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

빌드 출력(dotnet run)에서 소비 앱을 실행할 때, 개발 환경에서는 기본적으로 정적 웹 자산이 활성화됩니다. 다른 환경에서 자산을 지원하기 위해 빌드 출력에서 실행할 때 UseStaticWebAssets을(를) Program.cs의 호스트 빌더에서 호출하세요.

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.UseWebRoot("wwwroot");
builder.WebHost.UseStaticWebAssets();

builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

애플리케이션을 게시된 출력(UseStaticWebAssets)에서 실행할 때 dotnet publish를 호출할 필요가 없습니다.

다중 프로젝트 개발 흐름

사용 중인 앱이 실행되는 경우:

  • RCL의 에셋은 원래의 폴더에 남아 있습니다. 자산이 소비 애플리케이션으로 이동되지 않습니다.
  • RCL 폴더 내의 wwwroot 모든 변경 내용은 RCL을 다시 빌드한 후 소비 앱을 다시 빌드하지 않고 사용하는 앱에 반영됩니다.

RCL이 빌드되면 정적 웹 자산 위치를 설명하는 매니페스트가 생성됩니다. 사용하는 앱은 런타임에 매니페스트를 읽고 참조된 프로젝트 및 패키지의 자산을 사용합니다. 새 자산이 RCL에 추가되면 사용 중인 앱이 새 자산에 액세스하기 전에 RCL을 다시 빌드하여 매니페스트를 업데이트해야 합니다.

Publish

앱이 게시되면, 모든 참조된 프로젝트 및 패키지의 동반 자산이 wwwroot 아래 게시된 앱의 _content/{PACKAGE ID}/ 폴더로 복사됩니다. NuGet 패키지를 생성할 때 어셈블리 이름이 라이브러리의 프로젝트 파일에서 패키지 ID<PackageId> 와 동일하지 않은 경우 게시된 자산에 대한 {PACKAGE ID} 폴더를 검사할 때 프로젝트 파일에 지정된 대로 패키지 ID를 wwwroot 사용합니다.

추가 리소스

Razor 뷰, 페이지, 컨트롤러, 페이지 모델, Razor 구성 요소, 뷰 구성 요소 및 데이터 모델은 Razor 클래스 라이브러리(RCL)로 구축될 수 있습니다. RCL을 패키지하고 다시 사용할 수 있습니다. 응용 프로그램은 RCL을 포함하고, 그 안에 있는 뷰와 페이지를 오버라이드할 수 있습니다. 웹 앱과 RCL에서 모두 보기, 부분 보기, 또는 Razor 페이지를 찾을 수 있는 경우, 웹 앱의 Razor 마크업(.cshtml 파일)이 우선적으로 적용됩니다.

Razor 클래스 라이브러리를 위한 빌드 프로세스에 npm과 webpack을 어떻게 통합할 수 있는지에 대한 정보는 Razor를 참조하세요.

UI를 포함하는 Razor 클래스 라이브러리 만들기

  • Visual Studio에서 새 프로젝트 만들기를 선택합니다.
  • Razor > 선택합니다.
  • 라이브러리 이름(예: "RazorClassLib") >만들기 생성된 뷰 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 종료 .Views되지 않는지 확인합니다.
  • 지원 페이지 및 보기를 선택하십시오, 보기를 지원할 필요가 있을 경우. 기본적으로, Razor 페이지만 지원됩니다. 선택하고생성합니다.

Razor 클래스 라이브러리 (RCL) 템플릿은 기본적으로 Razor 컴포넌트 개발을 기본 설정으로 합니다. 지원 페이지 및 보기 옵션은 페이지와 보기를 지원합니다.

Razor 파일을 RCL에 추가하십시오.

ASP.NET Core 템플릿은 RCL 콘텐츠가 Areas 폴더에 있다고 가정합니다. RCL 페이지 레이아웃 아래를 참조하여 ~/Pages가 아닌 ~/Areas/Pages에서 콘텐츠를 노출하는 RCL을 만드십시오.

RCL 콘텐츠를 참조하세요.

RCL은 다음과 같이 참조할 수 있습니다.

보기, 부분 보기, 페이지 재정의

웹 앱과 RCL에서 모두 보기, 부분 보기, 또는 Razor 페이지를 찾을 수 있는 경우, 웹 앱의 Razor 마크업(.cshtml 파일)이 우선적으로 적용됩니다. 예를 들어 WebApp1에 추가 WebApp1/Areas/MyFeature/Pages/Page1.cshtml 하면 WebApp1의 Page1이 RCL의 Page1보다 우선합니다.

샘플 다운로드에서 우선 순위를 테스트하도록 WebApp1/Areas/MyFeature2 이름을 바꿉니다WebApp1/Areas/MyFeature.

RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 부분 보기를 WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml에 복사합니다. 마크업을 업데이트하여 새로운 위치를 나타내십시오. 앱의 부분이 사용되고 있는 버전을 확인하기 위해 앱을 빌드하고 실행하세요.

호스팅 앱에서 Razor Pages를 사용하는 RCL일 경우, Razor Pages 서비스 및 엔드포인트를 활성화합니다.

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

RCL 페이지 레이아웃

웹 앱의 Pages 폴더 일부인 것처럼 RCL 콘텐츠를 참조하기 위해, 다음 파일 구조로 RCL 프로젝트를 생성하십시오.

  • RazorUIClassLib/Pages
  • RazorUIClassLib/Pages/Shared

RazorUIClassLib/Pages/Shared에는 두 개의 부분 파일, 즉 _Header.cshtml와 _Footer.cshtml가 포함되어 있다고 가정해 보십시오. <partial> 태그를 _Layout.cshtml 파일에 추가할 수 있습니다.

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

호스트 웹 앱에서 _ViewStart.cshtml 파일을 사용하려면 RCL 프로젝트의 Pages 폴더에 _Layout.cshtml 파일을 추가하세요.

@{
    Layout = "_Layout";
}

정적 자산을 포함하여 RCL을 생성하세요.

RCL은 자신의 RCL 또는 RCL을 사용하는 앱에서 참조할 수 있는 보조 정적 자산을 필요로 할 수 있습니다. ASP.NET Core는 소비 애플리케이션에서 사용할 수 있는 정적 자산이 포함된 RCL을 생성할 수 있게 합니다.

RCL의 일부로 동반 자산을 포함하려면, 클래스 라이브러리에 wwwroot 폴더를 만들고 해당 폴더에 필요한 파일을 포함하세요.

RCL을 패킹할 때, wwwroot 폴더에 있는 모든 동반 자산은 패키지에 자동으로 포함됩니다.

dotnet pack 명령어를 사용하고 NuGet.exe 버전 nuget pack보다 사용하지 마십시오.

정적 자산 제외

정적 에셋을 제외하려면 프로젝트 파일의 $(DefaultItemExcludes) 속성 그룹에 원하는 제외 경로를 추가하세요. 항목들은 세미콜론(;)으로 구분하십시오.

다음 예에서는 lib.css 폴더의 wwwroot 스타일시트가 정적 자산으로 간주되지 않아 게시된 RCL에 포함되지 않습니다.

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

Typescript 통합

RCL에 TypeScript 파일을 포함하려면 다음 단계를 따르세요:

  1. 프로젝트에 Microsoft.TypeScript.MSBuild NuGet 패키지를 추가하세요.

    Note

    .NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 작업 흐름(NuGet 문서)의 패키지 설치 및 관리 섹션에서 확인할 수 있습니다. 올바른 패키지 버전을 NuGet.org에서 확인하세요.

  2. TypeScript 파일을 .ts 폴더 외부에 배치하세요. 예를 들어, 파일을 Client 폴더에 배치하십시오.

  3. wwwroot 폴더의 TypeScript 빌드 결과물을 구성하십시오. 프로젝트 파일 내의 TypescriptOutDir 안에 PropertyGroup 속성을 설정하세요.

    <TypescriptOutDir>wwwroot</TypescriptOutDir>

  4. 프로젝트 파일에 PrepareForBuildDependsOn 내부에 다음 타겟을 추가하여 PropertyGroup 타겟의 종속성으로 TypeScript 타겟을 포함하십시오.

    <PrepareForBuildDependsOn>
  CompileTypeScript;
  GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
</PrepareForBuildDependsOn>

참고된 RCL에서 내용을 소비하다

RCL의 wwwroot 폴더에 포함된 파일은 _content/{PACKAGE ID}/ 접두사를 통해 RCL 또는 소비자 앱에 공개됩니다. 예를 들어, 프로젝트 파일에 Razor.Class.Lib이 지정되지 않고 어셈블리 이름이 <PackageId>인 라이브러리는 _content/Razor.Class.Lib/에 정적 콘텐츠의 경로를 생성합니다. NuGet 패키지를 생성할 때 어셈블리 이름이 라이브러리의 프로젝트 파일에서 패키지 ID<PackageId> 와 동일하지 않은 경우 프로젝트 파일에 지정된 대로 패키지 ID를 {PACKAGE ID}사용합니다.

소비하는 앱은 라이브러리에서 제공하는 정적 자산을 <script>, <style>, <img> 및 기타 HTML 태그와 함께 참조합니다. 소비 앱은 정적 파일 지원을 활성화해야 합니다.

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

빌드 출력(dotnet run)에서 소비 앱을 실행할 때, 개발 환경에서는 기본적으로 정적 웹 자산이 활성화됩니다. 다른 환경에서 자산을 지원하기 위해 빌드 출력에서 실행할 때 UseStaticWebAssets을(를) Program.cs의 호스트 빌더에서 호출하세요.

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.UseWebRoot("wwwroot").UseStaticWebAssets();

builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

참고: .NET 6은 builder.WebHost.UseWebRoot("wwwroot").UseStaticWebAssets 호출만 필요합니다. 추가 정보를 보려면 이 GitHub 이슈를 확인하세요.

애플리케이션을 게시된 출력(UseStaticWebAssets)에서 실행할 때 dotnet publish를 호출할 필요가 없습니다.

다중 프로젝트 개발 흐름

사용 중인 앱이 실행되는 경우:

  • RCL의 에셋은 원래의 폴더에 남아 있습니다. 자산이 소비 애플리케이션으로 이동되지 않습니다.
  • RCL 폴더 내의 wwwroot 모든 변경 내용은 RCL을 다시 빌드한 후 소비 앱을 다시 빌드하지 않고 사용하는 앱에 반영됩니다.

RCL이 빌드되면 정적 웹 자산 위치를 설명하는 매니페스트가 생성됩니다. 사용하는 앱은 런타임에 매니페스트를 읽고 참조된 프로젝트 및 패키지의 자산을 사용합니다. 새 자산이 RCL에 추가되면 사용 중인 앱이 새 자산에 액세스하기 전에 RCL을 다시 빌드하여 매니페스트를 업데이트해야 합니다.

Publish

앱이 게시되면, 모든 참조된 프로젝트 및 패키지의 동반 자산이 wwwroot 아래 게시된 앱의 _content/{PACKAGE ID}/ 폴더로 복사됩니다. NuGet 패키지를 생성할 때 어셈블리 이름이 라이브러리의 프로젝트 파일에서 패키지 ID<PackageId> 와 동일하지 않은 경우 게시된 자산에 대한 {PACKAGE ID} 폴더를 검사할 때 프로젝트 파일에 지정된 대로 패키지 ID를 wwwroot 사용합니다.

추가 리소스

Razor 뷰, 페이지, 컨트롤러, 페이지 모델, Razor 구성 요소, 뷰 구성 요소 및 데이터 모델은 Razor 클래스 라이브러리(RCL)로 구축될 수 있습니다. RCL을 패키지하고 다시 사용할 수 있습니다. 응용 프로그램은 RCL을 포함하고, 그 안에 있는 뷰와 페이지를 오버라이드할 수 있습니다. 웹 앱과 RCL에서 모두 보기, 부분 보기, 또는 Razor 페이지를 찾을 수 있는 경우, 웹 앱의 Razor 마크업(.cshtml 파일)이 우선적으로 적용됩니다.

샘플 코드를 보기 또는 다운로드하기 (다운로드 방법)

UI를 포함하는 Razor 클래스 라이브러리 만들기

  • Visual Studio에서 새 프로젝트 만들기를 선택합니다.
  • Razor > 선택합니다.
  • 라이브러리 이름 지정(예: 'RazorClassLib'), >만들기>다음. 생성된 뷰 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 종료 .Views되지 않는지 확인합니다.
  • 대상 프레임워크를 선택합니다. ☑ 지원 페이지 및 보기를 확인하여 보기를 지원합니다. 기본적으로 구성 요소만 Razor 지원됩니다. 선택하고생성합니다.

기본적으로 RCL(클래스 라이브러리) 템플릿은 Razor 구성 요소 개발로 설정됩니다 Razor. 지원 페이지 및 보기 옵션은 페이지와 보기를 지원합니다.

Razor 파일을 RCL에 추가하십시오.

ASP.NET Core 템플릿은 RCL 콘텐츠가 Areas 폴더에 있다고 가정합니다. RCL 페이지 레이아웃을 참조하여 컨텐츠를 ~/Pages가 아닌 ~/Areas/Pages에 노출하는 RCL을 만드세요.

RCL 콘텐츠를 참조하세요.

RCL은 다음과 같이 참조할 수 있습니다.

보기, 부분 보기, 페이지 재정의

웹 앱과 RCL에서 모두 보기, 부분 보기, 또는 Razor 페이지를 찾을 수 있는 경우, 웹 앱의 Razor 마크업(.cshtml 파일)이 우선적으로 적용됩니다. 예를 들어 WebApp1에 추가 WebApp1/Areas/MyFeature/Pages/Page1.cshtml 하면 WebApp1의 Page1이 RCL의 Page1보다 우선합니다.

샘플 다운로드에서 우선 순위를 테스트하도록 WebApp1/Areas/MyFeature2 이름을 바꿉니다WebApp1/Areas/MyFeature.

RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 부분 보기를 WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml에 복사합니다. 마크업을 업데이트하여 새로운 위치를 나타내십시오. 앱의 부분이 사용되고 있는 버전을 확인하기 위해 앱을 빌드하고 실행하세요.

RCL 페이지 레이아웃

웹 앱의 Pages 폴더 일부인 것처럼 RCL 콘텐츠를 참조하기 위해, 다음 파일 구조로 RCL 프로젝트를 생성하십시오.

  • RazorUIClassLib/Pages
  • RazorUIClassLib/Pages/Shared

RazorUIClassLib/Pages/Shared에는 두 개의 부분 파일, 즉 _Header.cshtml와 _Footer.cshtml가 포함되어 있다고 가정해 보십시오. <partial> 태그를 _Layout.cshtml 파일에 추가할 수 있습니다.

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

호스트 웹 앱에서 _ViewStart.cshtml 파일을 사용하려면 RCL 프로젝트의 Pages 폴더에 _Layout.cshtml 파일을 추가하세요.

@{
    Layout = "_Layout";
}

정적 자산을 포함하여 RCL을 생성하세요.

RCL은 자신의 RCL 또는 RCL을 사용하는 앱에서 참조할 수 있는 보조 정적 자산을 필요로 할 수 있습니다. ASP.NET Core는 소비 애플리케이션에서 사용할 수 있는 정적 자산이 포함된 RCL을 생성할 수 있게 합니다.

RCL의 일부로 동반 자산을 포함하려면, 클래스 라이브러리에 wwwroot 폴더를 만들고 해당 폴더에 필요한 파일을 포함하세요.

RCL을 패킹할 때, wwwroot 폴더에 있는 모든 동반 자산은 패키지에 자동으로 포함됩니다.

dotnet pack 명령어를 사용하고 NuGet.exe 버전 nuget pack보다 사용하지 마십시오.

정적 자산 제외

정적 에셋을 제외하려면 프로젝트 파일의 $(DefaultItemExcludes) 속성 그룹에 원하는 제외 경로를 추가하세요. 항목들은 세미콜론(;)으로 구분하십시오.

다음 예에서는 lib.css 폴더의 wwwroot 스타일시트가 정적 자산으로 간주되지 않아 게시된 RCL에 포함되지 않습니다.

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

Typescript 통합

RCL에 TypeScript 파일을 포함하려면 다음 단계를 따르세요:

  1. 프로젝트에 Microsoft.TypeScript.MSBuild NuGet 패키지를 추가하세요.

    Note

    .NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 작업 흐름(NuGet 문서)의 패키지 설치 및 관리 섹션에서 확인할 수 있습니다. 올바른 패키지 버전을 NuGet.org에서 확인하세요.

  2. TypeScript 파일을 .ts 폴더 외부에 배치하세요. 예를 들어, 파일을 Client 폴더에 배치하십시오.

  3. wwwroot 폴더의 TypeScript 빌드 결과물을 구성하십시오. 프로젝트 파일 내의 TypescriptOutDir 안에 PropertyGroup 속성을 설정하세요.

    <TypescriptOutDir>wwwroot</TypescriptOutDir>

  4. 프로젝트 파일에 ResolveCurrentProjectStaticWebAssets 내부에 다음 타겟을 추가하여 PropertyGroup 타겟의 종속성으로 TypeScript 타겟을 포함하십시오.

    <ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
  CompileTypeScript;
  $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>

참고된 RCL에서 내용을 소비하다

RCL의 wwwroot 폴더에 포함된 파일은 _content/{PACKAGE ID}/ 접두사를 통해 RCL 또는 소비자 앱에 공개됩니다. 예를 들어, 프로젝트 파일에 Razor.Class.Lib이 지정되지 않고 어셈블리 이름이 <PackageId>인 라이브러리는 _content/Razor.Class.Lib/에 정적 콘텐츠의 경로를 생성합니다. NuGet 패키지를 생성할 때 어셈블리 이름이 라이브러리의 프로젝트 파일에서 패키지 ID<PackageId> 와 동일하지 않은 경우 프로젝트 파일에 지정된 대로 패키지 ID를 {PACKAGE ID}사용합니다.

소비하는 앱은 라이브러리에서 제공하는 정적 자산을 <script>, <style>, <img> 및 기타 HTML 태그와 함께 참조합니다. 사용 중인 앱은 다음에서 정적 파일 지원을 사용하도록 설정해야 합니다.Startup.Configure

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseStaticFiles();

    ...
}

빌드 출력(dotnet run)에서 소비 앱을 실행할 때, 개발 환경에서는 기본적으로 정적 웹 자산이 활성화됩니다. 다른 환경에서 자산을 지원하기 위해 빌드 출력에서 실행할 때 UseStaticWebAssets을(를) Program.cs의 호스트 빌더에서 호출하세요.

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });
}

애플리케이션을 게시된 출력(UseStaticWebAssets)에서 실행할 때 dotnet publish를 호출할 필요가 없습니다.

다중 프로젝트 개발 흐름

사용 중인 앱이 실행되는 경우:

  • RCL의 에셋은 원래의 폴더에 남아 있습니다. 자산이 소비 애플리케이션으로 이동되지 않습니다.
  • RCL 폴더 내의 wwwroot 모든 변경 내용은 RCL을 다시 빌드한 후 소비 앱을 다시 빌드하지 않고 사용하는 앱에 반영됩니다.

RCL이 빌드되면 정적 웹 자산 위치를 설명하는 매니페스트가 생성됩니다. 사용하는 앱은 런타임에 매니페스트를 읽고 참조된 프로젝트 및 패키지의 자산을 사용합니다. 새 자산이 RCL에 추가되면 사용 중인 앱이 새 자산에 액세스하기 전에 RCL을 다시 빌드하여 매니페스트를 업데이트해야 합니다.

Publish

앱이 게시되면, 모든 참조된 프로젝트 및 패키지의 동반 자산이 wwwroot 아래 게시된 앱의 _content/{PACKAGE ID}/ 폴더로 복사됩니다. NuGet 패키지를 생성할 때 어셈블리 이름이 라이브러리의 프로젝트 파일에서 패키지 ID<PackageId> 와 동일하지 않은 경우 게시된 자산에 대한 {PACKAGE ID} 폴더를 검사할 때 프로젝트 파일에 지정된 대로 패키지 ID를 wwwroot 사용합니다.

추가 리소스

Razor 뷰, 페이지, 컨트롤러, 페이지 모델, Razor 구성 요소, 뷰 구성 요소 및 데이터 모델은 Razor 클래스 라이브러리(RCL)로 구축될 수 있습니다. RCL을 패키지하고 다시 사용할 수 있습니다. 응용 프로그램은 RCL을 포함하고, 그 안에 있는 뷰와 페이지를 오버라이드할 수 있습니다. 웹 앱과 RCL에서 모두 보기, 부분 보기, 또는 Razor 페이지를 찾을 수 있는 경우, 웹 앱의 Razor 마크업(.cshtml 파일)이 우선적으로 적용됩니다.

샘플 코드를 보기 또는 다운로드하기 (다운로드 방법)

UI를 포함하는 Razor 클래스 라이브러리 만들기

  • Visual Studio 파일 메뉴에서 새>프로젝트를 선택합니다.
  • ASP.NET Core 웹 애플리케이션을 선택합니다.
  • 라이브러리 이름(예: "RazorClassLib") > 을 확인합니다. 생성된 뷰 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 종료 .Views되지 않는지 확인합니다.
  • ASP.NET Core 2.1 이후 버전이 선택되었는지 확인하십시오.
  • Razor >.

RCL은 다음 프로젝트 파일을 포함합니다:

<Project Sdk="Microsoft.NET.Sdk.Razor">

    <PropertyGroup>
        <TargetFramework>netcoreapp3.1</TargetFramework>
        <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
    </PropertyGroup>

    <ItemGroup>
        <FrameworkReference Include="Microsoft.AspNetCore.App" />
    </ItemGroup>


</Project>

Razor 파일을 RCL에 추가하십시오.

ASP.NET Core 템플릿은 RCL 콘텐츠가 Areas 폴더에 있다고 가정합니다. RCL 페이지 레이아웃을 참조하여 컨텐츠를 ~/Pages가 아닌 ~/Areas/Pages에 노출하는 RCL을 만드세요.

RCL 콘텐츠를 참조하세요.

RCL은 다음과 같이 참조할 수 있습니다.

단계별 안내: RCL 프로젝트를 생성하고 Razor 페이지 프로젝트에서 사용하기

프로젝트를 만들기보다 완성된 프로젝트를 다운로드하여 테스트할 수 있습니다. 샘플 다운로드에는 프로젝트를 쉽게 테스트할 수 있도록 하는 추가 코드와 링크가 포함되어 있습니다. 다운로드 샘플과 단계별 지침에 대한 의견을 이 GitHub 이슈에 피드백으로 남길 수 있습니다.

다운로드 앱을 테스트하세요

완성된 앱을 다운로드하지 않았고 대신 웍스루 프로젝트를 만들고 싶다면, 다음 섹션으로 넘어가세요.

Visual Studio에서 .sln 파일을 엽니다. 앱을 실행하세요.

Test WebApp1에 있는 지시를 따르세요.

RCL 생성하기

이 섹션에서는 RCL이 생성됩니다. Razor 파일이 RCL에 추가됩니다.

RCL 프로젝트 생성:

  • Visual Studio 파일 메뉴에서 새>프로젝트를 선택합니다.
  • ASP.NET Core 웹 애플리케이션을 선택합니다.
  • 앱 이름을 RazorUIClassLib> OK로 지정합니다.
  • ASP.NET Core 2.1 이후 버전이 선택되었는지 확인하십시오.
  • Razor >.
  • Razor이라는 이름을 가진 부분 보기 파일을 추가하세요.

Razor 파일 및 폴더를 프로젝트에 추가하십시오.

  • 태그 RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 를 다음 코드로 바꿉다.

    <h3>_Message.cshtml partial view.</h3>

<p>RazorUIClassLib\Areas\MyFeature\Pages\Shared\_Message.cshtml</p>

  • 태그 RazorUIClassLib/Areas/MyFeature/Pages/Page1.cshtml 를 다음 코드로 바꿉다.

    @page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<h2>Hello from a Razor UI class library!</h2>
<p> From  RazorUIClassLib\Areas\MyFeature\Pages\Page1.cshtml</p>

<partial name="_Message" />

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 부분 보기(<partial name="_Message" />)를 사용하려면 이 필요합니다. @addTagHelper 지시문을 포함하는 대신, _ViewImports.cshtml 파일을 추가할 수 있습니다. 다음은 그 예입니다.

    dotnet new viewimports -o RazorUIClassLib/Areas/MyFeature/Pages

    _ViewImports.cshtml에 대한 자세한 내용은 Importing Shared Directives을 참조하십시오.

  • 클래스 라이브러리를 빌드하여 컴파일러 오류가 없는지 확인하십시오.

    dotnet build RazorUIClassLib

빌드 출력에 포함된 항목은 RazorUIClassLib.dll 및 RazorUIClassLib.Views.dll. RazorUIClassLib.Views.dll은(는) 컴파일된 Razor 콘텐츠를 포함하고 있습니다.

Razor UI 라이브러리를 Razor 페이지 프로젝트에서 사용하기

Razor Pages 웹 앱을 생성하세요:

  • 솔루션 탐색기에서 솔루션을 마우스 오른쪽 버튼으로 클릭하고 >추가>새 프로젝트를 선택합니다.

  • ASP.NET Core 웹 애플리케이션을 선택합니다.

  • 앱 이름을 WebApp1로 지정합니다.

  • ASP.NET Core 2.1 이후 버전이 선택되었는지 확인하십시오.

  • 웹 애플리케이션>확인을 선택합니다.

  • Solution Explorer에서 WebApp1을 오른쪽 클릭한 다음 Set as StartUp Project를 선택하세요.

  • 솔루션 탐색기에서 WebApp1을 마우스 오른쪽 버튼으로 클릭하고 빌드 종속성>프로젝트 종속성을 선택합니다.

  • WebApp1의 종속성으로 RazorUIClassLib을 확인하세요.

  • 솔루션 탐색기에서 WebApp1을 마우스 오른쪽 버튼으로 클릭하고 추가>참조를 선택합니다.

  • 참조 관리자 대화 상자에서 RazorUIClassLib>확인을 선택합니다.

앱을 실행하세요.

WebApp1 테스트

/MyFeature/Page1로 이동하여 Razor UI 클래스 라이브러리가 사용 중인지 확인하세요.

보기, 부분 보기, 페이지 재정의

웹 앱과 RCL에서 모두 보기, 부분 보기, 또는 Razor 페이지를 찾을 수 있는 경우, 웹 앱의 Razor 마크업(.cshtml 파일)이 우선적으로 적용됩니다. 예를 들어 WebApp1에 추가 WebApp1/Areas/MyFeature/Pages/Page1.cshtml 하면 WebApp1의 Page1이 RCL의 Page1보다 우선합니다.

샘플 다운로드에서 우선 순위를 테스트하도록 WebApp1/Areas/MyFeature2 이름을 바꿉니다WebApp1/Areas/MyFeature.

RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 부분 보기를 WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml에 복사합니다. 마크업을 업데이트하여 새로운 위치를 나타내십시오. 앱의 부분이 사용되고 있는 버전을 확인하기 위해 앱을 빌드하고 실행하세요.

RCL 페이지 레이아웃

웹 앱의 Pages 폴더 일부인 것처럼 RCL 콘텐츠를 참조하기 위해, 다음 파일 구조로 RCL 프로젝트를 생성하십시오.

  • RazorUIClassLib/Pages
  • RazorUIClassLib/Pages/Shared

RazorUIClassLib/Pages/Shared에는 두 개의 부분 파일, 즉 _Header.cshtml와 _Footer.cshtml가 포함되어 있다고 가정해 보십시오. <partial> 태그를 _Layout.cshtml 파일에 추가할 수 있습니다.

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

Razor 뷰, 페이지, 컨트롤러, 페이지 모델, Razor 구성 요소, 뷰 구성 요소 및 데이터 모델은 Razor 클래스 라이브러리(RCL)로 구축될 수 있습니다. RCL을 패키지하고 다시 사용할 수 있습니다. 응용 프로그램은 RCL을 포함하고, 그 안에 있는 뷰와 페이지를 오버라이드할 수 있습니다. 웹 앱과 RCL에서 모두 보기, 부분 보기, 또는 Razor 페이지를 찾을 수 있는 경우, 웹 앱의 Razor 마크업(.cshtml 파일)이 우선적으로 적용됩니다.

샘플 코드를 보기 또는 다운로드하기 (다운로드 방법)

UI를 포함하는 Razor 클래스 라이브러리 만들기

  • Visual Studio에서 새 프로젝트 만들기를 선택합니다.
  • Razor > 선택합니다.
  • 라이브러리 이름(예: "RazorClassLib") >만들기 생성된 뷰 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 종료 .Views되지 않는지 확인합니다.
  • 지원 페이지 및 보기를 선택하십시오, 보기를 지원할 필요가 있을 경우. 기본적으로, Razor 페이지만 지원됩니다. 선택하고생성합니다.

기본적으로 RCL(클래스 라이브러리) 템플릿은 Razor 구성 요소 개발로 설정됩니다 Razor. 지원 페이지 및 보기 옵션은 페이지와 보기를 지원합니다.

Razor 파일을 RCL에 추가하십시오.

ASP.NET Core 템플릿은 RCL 콘텐츠가 Areas 폴더에 있다고 가정합니다. RCL 페이지 레이아웃 아래를 참조하여 ~/Pages가 아닌 ~/Areas/Pages에서 콘텐츠를 노출하는 RCL을 만드십시오.

RCL 콘텐츠를 참조하세요.

RCL은 다음과 같이 참조할 수 있습니다.

보기, 부분 보기, 페이지 재정의

웹 앱과 RCL에서 모두 보기, 부분 보기, 또는 Razor 페이지를 찾을 수 있는 경우, 웹 앱의 Razor 마크업(.cshtml 파일)이 우선적으로 적용됩니다. 예를 들어 WebApp1에 추가 WebApp1/Areas/MyFeature/Pages/Page1.cshtml 하면 WebApp1의 Page1이 RCL의 Page1보다 우선합니다.

샘플 다운로드에서 우선 순위를 테스트하도록 WebApp1/Areas/MyFeature2 이름을 바꿉니다WebApp1/Areas/MyFeature.

RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 부분 보기를 WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml에 복사합니다. 마크업을 업데이트하여 새로운 위치를 나타내십시오. 앱의 부분이 사용되고 있는 버전을 확인하기 위해 앱을 빌드하고 실행하세요.

호스팅 앱에서 Razor Pages를 사용하는 RCL일 경우, Razor Pages 서비스 및 엔드포인트를 활성화합니다.

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddRazorPages();
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

        endpoints.MapRazorPages();
    });
}

RCL 페이지 레이아웃

웹 앱의 Pages 폴더 일부인 것처럼 RCL 콘텐츠를 참조하기 위해, 다음 파일 구조로 RCL 프로젝트를 생성하십시오.

  • RazorUIClassLib/Pages
  • RazorUIClassLib/Pages/Shared

RazorUIClassLib/Pages/Shared에는 두 개의 부분 파일, 즉 _Header.cshtml와 _Footer.cshtml가 포함되어 있다고 가정해 보십시오. <partial> 태그를 _Layout.cshtml 파일에 추가할 수 있습니다.

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

호스트 웹 앱에서 _ViewStart.cshtml 파일을 사용하려면 RCL 프로젝트의 Pages 폴더에 _Layout.cshtml 파일을 추가하세요.

@{
    Layout = "_Layout";
}

정적 자산을 포함하여 RCL을 생성하세요.

RCL은 자신의 RCL 또는 RCL을 사용하는 앱에서 참조할 수 있는 보조 정적 자산을 필요로 할 수 있습니다. ASP.NET Core는 소비 애플리케이션에서 사용할 수 있는 정적 자산이 포함된 RCL을 생성할 수 있게 합니다.

RCL의 일부로 동반 자산을 포함하려면, 클래스 라이브러리에 wwwroot 폴더를 만들고 해당 폴더에 필요한 파일을 포함하세요.

RCL을 패킹할 때, wwwroot 폴더에 있는 모든 동반 자산은 패키지에 자동으로 포함됩니다.

dotnet pack 명령어를 사용하고 NuGet.exe 버전 nuget pack보다 사용하지 마십시오.

정적 자산 제외

정적 에셋을 제외하려면 프로젝트 파일의 $(DefaultItemExcludes) 속성 그룹에 원하는 제외 경로를 추가하세요. 항목들은 세미콜론(;)으로 구분하십시오.

다음 예에서는 lib.css 폴더의 wwwroot 스타일시트가 정적 자산으로 간주되지 않아 게시된 RCL에 포함되지 않습니다.

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

Typescript 통합

RCL에 TypeScript 파일을 포함하려면 다음 단계를 따르세요:

  1. 프로젝트에 Microsoft.TypeScript.MSBuild NuGet 패키지를 추가하세요.

    Note

    .NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 작업 흐름(NuGet 문서)의 패키지 설치 및 관리 섹션에서 확인할 수 있습니다. 올바른 패키지 버전을 NuGet.org에서 확인하세요.

  2. TypeScript 파일을 .ts 폴더 외부에 배치하세요. 예를 들어, 파일을 Client 폴더에 배치하십시오.

  3. wwwroot 폴더의 TypeScript 빌드 결과물을 구성하십시오. 프로젝트 파일 내의 TypescriptOutDir 안에 PropertyGroup 속성을 설정하세요.

    <TypescriptOutDir>wwwroot</TypescriptOutDir>

  4. 프로젝트 파일에 ResolveCurrentProjectStaticWebAssets 내부에 다음 타겟을 추가하여 PropertyGroup 타겟의 종속성으로 TypeScript 타겟을 포함하십시오.

    <ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
  CompileTypeScript;
  $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>

참고된 RCL에서 내용을 소비하다

RCL의 wwwroot 폴더에 포함된 파일은 _content/{PACKAGE ID}/ 접두사를 통해 RCL 또는 소비자 앱에 공개됩니다. 예를 들어, 프로젝트 파일에 Razor.Class.Lib이 지정되지 않고 어셈블리 이름이 <PackageId>인 라이브러리는 _content/Razor.Class.Lib/에 정적 콘텐츠의 경로를 생성합니다. NuGet 패키지를 생성할 때 어셈블리 이름이 라이브러리의 프로젝트 파일에서 패키지 ID<PackageId> 와 동일하지 않은 경우 프로젝트 파일에 지정된 대로 패키지 ID를 {PACKAGE ID}사용합니다.

소비하는 앱은 라이브러리에서 제공하는 정적 자산을 <script>, <style>, <img> 및 기타 HTML 태그와 함께 참조합니다. 사용 중인 앱은 다음에서 정적 파일 지원을 사용하도록 설정해야 합니다.Startup.Configure

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseStaticFiles();

    ...
}

빌드 출력(dotnet run)에서 소비 앱을 실행할 때, 개발 환경에서는 기본적으로 정적 웹 자산이 활성화됩니다. 다른 환경에서 자산을 지원하기 위해 빌드 출력에서 실행할 때 UseStaticWebAssets을(를) Program.cs의 호스트 빌더에서 호출하세요.

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });
}

애플리케이션을 게시된 출력(UseStaticWebAssets)에서 실행할 때 dotnet publish를 호출할 필요가 없습니다.

다중 프로젝트 개발 흐름

사용 중인 앱이 실행되는 경우:

  • RCL의 에셋은 원래의 폴더에 남아 있습니다. 자산이 소비 애플리케이션으로 이동되지 않습니다.
  • RCL 폴더 내의 wwwroot 모든 변경 내용은 RCL을 다시 빌드한 후 소비 앱을 다시 빌드하지 않고 사용하는 앱에 반영됩니다.

RCL이 빌드되면 정적 웹 자산 위치를 설명하는 매니페스트가 생성됩니다. 사용하는 앱은 런타임에 매니페스트를 읽고 참조된 프로젝트 및 패키지의 자산을 사용합니다. 새 자산이 RCL에 추가되면 사용 중인 앱이 새 자산에 액세스하기 전에 RCL을 다시 빌드하여 매니페스트를 업데이트해야 합니다.

Publish

앱이 게시되면, 모든 참조된 프로젝트 및 패키지의 동반 자산이 wwwroot 아래 게시된 앱의 _content/{PACKAGE ID}/ 폴더로 복사됩니다. NuGet 패키지를 생성할 때 어셈블리 이름이 라이브러리의 프로젝트 파일에서 패키지 ID<PackageId> 와 동일하지 않은 경우 게시된 자산에 대한 {PACKAGE ID} 폴더를 검사할 때 프로젝트 파일에 지정된 대로 패키지 ID를 wwwroot 사용합니다.

추가 리소스

  • Last updated on