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" は、物理フォルダの名前で、2番目の"/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配下のファイルに限定されます。

ディレクトリ参照の有効化

通常のWebアプリではこの機能は不要ですが、時には、ディレクトリの参照を有効にしたい場合があります。

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"がルーティングのパスを指定です。

以下、ブラウザの表示例です。