정적 파일을 wwwroot 이외의 폴더에 배치

환경

비주얼 스튜디오

• 비주얼 스튜디오 2019

ASP.NET 코어

• 3.1 (면도기 페이지, MVC)

정적 파일의 기본 배치 위치 정보

정적 파일(.js, .css, .png 등)은 기본적으로 wwwroot 폴더 아래에 있는 것으로 결정됩니다. 이를 통해 웹 사이트 사용자는 html과 함께 .js .css 파일을 직접 보고 화면에 반영할 수 있습니다.

이 정적 파일의 기본 배치 폴더는 Startup.Configure 메서드에 설명된 다음 메서드를 호출하기 때문에 app.UseStaticFiles wwwroot입니다.

public class Startup
{
  // 省略

  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
    // 省略

    app.UseStaticFiles();

    // 省略
  }
}

실제 폴더 "wwwroot"의 경로는 URL에서 "https://&host 이름>/"입니다. 예를 들어, wwwroot\image\sample의 파일.png은 https://&lt&host 이름>/이미지.png 및 샘플 아래의 URL에서 찾을 수 있습니다.]

wwwroot 폴더 외부에 배치된 파일은 기본적으로 웹의 URL에서 참조되지 않습니다.

wwwroot 폴더 외에 정적 파일을 배치하고 URL에서 참조 경로를 변경하는 방법

폴더 구성

이번에는 wwwroot 폴더의 기능을 그대로 두고 싶지만 이미지 파일을 별도의 폴더에 배치하여 웹에서 참조할 수 있도록 합니다.

프로젝트의 폴더 구성은 다음과 같이 해야 영역의 각 사이트의 콘텐츠 폴더에 이미지 파일을 볼 수 있습니다.

이 상태에서 URL은 sample1에서 파일을 .png.png

• https://&hostname>/아레나/site1/콘텐츠/이미지/샘플1.png

그리고

• https://&Hostname>/site1/콘텐츠/이미지/샘플1.png

그것은 것 처럼 보일 수 있습니다., 하지만 여기

• https://&Hostname>/site1/이미지/샘플1.png

에서 참조할 수 있습니다.

그런데 wwwroot 폴더 외에 정적 파일을 배치하는 경우 파일의 빌드 작업이 누락될 수 있습니다. 계속 게시하면 파일이 배치되지 않으므로 다시 콘텐츠로 설정해야 합니다.

프로그램 추가

wwwroot가 아닌 폴더에서 정적 파일을 사용할 수 있도록 하려면 Startup.Configure 메서드의 추가 app.UseStaticFiles 메서드를 다음과 같이 호출합니다.

// 追加
using Microsoft.Extensions.FileProviders;
using System.IO;

// 省略

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  // 省略

  // wwwroot フォルダで静的ファイル参照を有効にする
  app.UseStaticFiles();

  // Site1 用の物理コンテンツフォルダと参照 URL を紐づける
  app.UseStaticFiles(new StaticFileOptions()
  {
    FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Areas/Site1/Content")),
    RequestPath = "/Site1",
  });

  // Site2 用の物理コンテンツフォルダと参照 URL を紐づける
  app.UseStaticFiles(new StaticFileOptions()
  {
    FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Areas/Site2/Content")),
    RequestPath = "/Site2",
  });

  // 省略
}

app.UseStaticFiles 인수 없이 메서드를 호출하면 wwwroot 폴더를 사용할 수 있습니다. 첫 번째 인수를 전달하여 추가 설정을 추가할 수 StaticFileOptions 있습니다.

StaticFileOptions.FileProviderPhysicalFileProvider의 인스턴스를 전달하는 동안 속성이 정적 파일로 참조할 물리적 폴더를 지정합니다. 여기에 지정된 경로 아래에 있는 파일은 웹에서 참조할 수 있는 파일입니다. RequestPath다음 속성에 대한 URL의 루트일 수도 있습니다.

env.ContentRootPath 속성에는 웹 프로그램의 루트 경로(물리적 경로)가 포함되어 있습니다. 이를 대상 폴더에 대한 상대 경로와 결합하는 것이 좋습니다.

StaticFileOptions.RequestPath 속성은 정적 파일을 참조하는 URL의 루트 경로를 설명합니다. 기본 https://<ホスト名> wwwroot는 . RequestPath = "/Site1" 위의 코드와 마찬가지로, 작성하는 경우 https://<ホスト名>/Site1 루트입니다. 이렇게 하면 Areas/Site1/Content/xxxx 물리적 https://<ホスト名>/Site1/xxxx 경로와 URL이 연결됩니다.

예를 들어 sample1.png을 사용하여 Areas/Site1/Content/image/sample.png https://<ホスト名>/Site1/image/sample.png 파일은 경로에서 참조할 수 있습니다.

작업 확인

index.html 다음과 같이 이미지를 볼 수 있도록 img 태그를 배치합니다. 이 경로는 정의된 사이트1 및 site2 이미지를 참조합니다.

<!-- 省略 -->

<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>

<!-- ここから追加 -->
<img src="~/image/sample.png" />
<img src="~/site1/image/sample1.png" />
<img src="~/site2/image/sample2.png" />
<!-- ここまで追加 -->

당신이 그것을 실행하고 이미지를 볼 경우, 그것은 성공입니다.