ASP.NET Core에서 정적 콘텐츠 제공

소개

이번에는 HTML, CSS, 이미지 및 JavaScript와 같은 정적 파일을 응용 프로그램에서 처리하는 방법을 살펴 보았습니다.
취급하지 않는 앱은 거의 전무하다고 생각하므로, 이것은 필수 지식이어야 한다.

또한 환경을 .NET Core 3.1로 올렸습니다.

wwwroot의 파일의 경우

Startup.cs의 Configure 메서드에 있는 UseStaticFiles 메서드를 호출하여 wwwroot 폴더 아래에 있는 파일을 제공할 수 있습니다.

app.UseStaticFiles();

view측에서, 여기에 있는 파일에 액세스 할 때는, 이하와 같은 기술을 합니다.

<img src="~/images/sample.jpeg" alt="サンプル画像" />

~/ 가 wwwroot 를 가리킵니다. 그래서 이제 wwwroot/images/example.jpg를 참조하게 됩니다.

wwwroot 외부의 파일의 경우

wwwroot의 파일 외에도 다른 폴더의 정적 파일을 제공하려면 Configure 메소드에서 다음과 같은 코드를 작성합니다.

  app.UseStaticFiles(); 

  app.UseStaticFiles(new StaticFileOptions
  {
      FileProvider = new PhysicalFileProvider(
          Path.Combine(Directory.GetCurrentDirectory(), "StaticFiles")),
        RequestPath = "/StaticFiles"
  });

위의 예는 StaticFiles 폴더의 예입니다. 첫 번째 "StaticFiles"는 실제 폴더의 이름이고 두 번째 "/StaticFiles"는 라우팅 경로를 지정합니다.
여기에서는 같은 이름으로 했습니다만, 다른 이름이어도 괜찮습니다.

그럼 시도해 보겠습니다. 프로젝트 바로 아래에 StaticFiles 폴더를 만들고 그 아래에 Images 폴더를 만듭니다.
이 폴더 아래에 모든 이미지 파일을 넣습니다.

자습서에서 만든 index.cshtml에 다음 태그를 추가합니다.

<img src="/staticfiles/images/sample.jpeg" alt="サンプル画像" />

실행해 보겠습니다.
안전하게 이미지가 표시되었습니다.



시도에,

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "StaticFiles")),
    RequestPath = "/StaticFiles"
});

의 부분을 주석 처리해 봅니다.

이미지가 표시되지 않습니다. staticsfiles 폴더에 액세스할 수 없는지 확인할 수 있습니다.

HTTP 응답 헤더 설정

먼저 다음 명령을 사용하여 Microsoft.AspNetCore.Http 패키지를 설치합니다.

dotnet add package Microsoft.AspNetCore.Http --version 2.2.2

그런 다음 StartUp.cs의 Configure 메서드를 다시 씁니다.

using Microsoft.AspNetCore.Http;

…

    var  cachePeriod = 600;
    app.UseStaticFiles(new StaticFileOptions
    {
        OnPrepareResponse = ctx =>
        {
            ctx.Context.Response.Headers.Append("Cache-Control", $"public, max-age={cachePeriod}");
        }
    });

이렇게하면 Response Header에 Cache-Control의 값을 설정할 수 있습니다. 이 예에서는 600초 동안 캐시를 사용하도록 설정합니다.

브라우저에서 확인하면 확실히 Cache-Control이 설정되어 있는지 확인할 수 있습니다.



위의 예에서는, PhysicalFileProvider 로의 지정이 없기 때문에, wwwroot 부하의 파일에 한정됩니다.

디렉토리 참조 사용

일반 웹 앱에서는 이 기능이 필요하지 않지만 때로는 디렉터리 찾아보기를 사용하도록 설정할 수 있습니다.

Startup.Configure에서 UseDirectoryBrowser 메서드를 호출하면 디렉터리에 대한 참조를 사용할 수 있습니다.

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "myimages")),
    RequestPath = "/images"
});
app.UseDirectoryBrowser(new DirectoryBrowserOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "myimages")),
    RequestPath = "/images"
});

위의 코드에서 app.UseStaticFiles 에서/wwwroot/myimages 폴더 아래의 정적 파일을 제공하고 app.UseDirectoryBrowser 에서 디렉토리 참조를 활성화하여 브라우저에서 채우기를 볼 수 있습니다. .
"/images"는 라우팅 경로를 지정합니다.

이하, 브라우저의 표시 예입니다.