Place static files in folders other than wwwroot

environment

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1 (Razor page, MVC)

About the default placement location for static files

Static files (.js, .css, .png, etc.) are determined to be under the wwwroot folder by default. This allows web site users to see the .js and .css files directly along with HTML and reflect them on the screen.

The default placement folder for this static file is wwwroot Startup.Configure because it calls the following app.UseStaticFiles method described in the method:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

The path of the physical folder "wwwroot" is "https://<host name>/" in the URL. As an example, the file in wwwroot\image\sample.png can be found in the URL under https://<host name>/image.png amp; sample.]

Files placed outside the wwwroot folder are essentially not referenced from a URL on the Web.

How to place static files in addition to the wwwroot folder and change the reference path at the URL

Folder configuration

This time, I want to leave the function of the wwwroot folder, but also place the image file in a separate folder so that it can be referenced on the Web.

The folder configuration of the project should be as follows, so that you can see the image files in the Content folder of each site in The Areas.

In this state, the URL .png the file in sample1.png

• https://<hostname>/arenas/site1/content/image/sample1.png

and

• https://<Hostname>/site1/content/image/sample1.png

it may seem like it would be, but here

• https://<Hostname>/site1/image/sample1.png

to be referenced in .

By the way, if you place a static file in addition to the wwwroot folder, the build action of the file may be missing. If you continue to publish, the file will not be placed, so be sure to set it back to content.

Add a program

To make static files available in non-wwwroot Startup.Configure folders, call additional app.UseStaticFiles methods in the method as follows:

// 追加
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 Calling the method without arguments enables the wwwroot folder. You can add additional StaticFileOptions settings by passing to the first argument.

StaticFileOptions.FileProvider Specifies the PhysicalFileProvider physical folder that you want the property to refer to as a static file while passing an instance of . The file under the path specified here is a file that can be referenced on the Web. It can also be the RequestPath root of the URL for the following properties:

env.ContentRootPath The property contains the root path (physical path) of the Web program. It is a good idea to combine this with the relative path to the target folder.

StaticFileOptions.RequestPath The property describes the root path of the URL that references the static file. The default wwwroot https://<ホスト名> is based on . As in the RequestPath = "/Site1" above code, if you write https://<ホスト名>/Site1 is the root. This Areas/Site1/Content/xxxx linkes the physical https://<ホスト名>/Site1/xxxx path with the URL.

Using sample1.png as an example, Areas/Site1/Content/image/sample.png the file can be https://<ホスト名>/Site1/image/sample.png referenced in the path.

Check operation

index.html Place the img tag so that you can see the image as follows: The path also references site1 and site2 images as defined.

<!-- 省略 -->

<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" />
<!-- ここまで追加 -->

If you run it and see the image, it's a success.