将静态文件放在 wwwroot 以外的文件夹中

环境

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1 （Razor 页面， MVC）

关于静态文件的默认放置位置

默认情况下，静态文件（.js、.css、.png等）将保留在 wwwroot 文件夹下。 这允许网站用户直接查看 .js 和 .css 文件以及 HTML 并在屏幕上传播。

此静态文件的默认部署文件夹是 Startup.Configure wwwroot，它调用方法 app.UseStaticFiles 中描述的以下方法：

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

物理文件夹"wwwroot"的路径在URL中为"https：//<主机名>/"的部位， 例如，"wwwroot\image\sample.png"中的文件在 URL 中可以通过 https：//<主机名>/image/sample.png引用。

放置在 wwwroot 文件夹之外的文件基本上不能从 Web 上的 URL 引用。

如何将静态文件放在 wwwroot 文件夹之外，并更改 URL 中的引用路径

文件夹配置

这一次，我想将图像文件放在单独的文件夹中，以便在 Web 上引用它，同时保留 wwwroot 文件夹的功能。

项目的文件夹配置如下所示，以引用 Areas 中每个站点的内容文件夹中的图像文件。

在此状态下，引用 sample1.png 文件中的文件的 URL 是

• https：//<主机名>/areas/site1/content/image/sample1.png

和

• https：//<主机名>/site1/content/image/sample1.png

可能看起来，但在这里

• https：//<主机名>/site1/image/sample1.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.FileProvider 将 PhysicalFileProvider 属性的实例传递给 ，并指定要作为静态文件引用的物理文件夹。 此处指定的路径下的文件是 Web 可以引用的文件。 它还是 RequestPath 以下属性的 URL 的根：

env.ContentRootPath 属性包含 Web 程序的根路径（物理路径）。 您可以合并此路径和目标文件夹的相对路径。

StaticFileOptions.RequestPath 属性描述引用静态文件的 URL 的根路径。 默认 wwwroot https://<ホスト名> 以 如上面的 RequestPath = "/Site1" 代码所示， https://<ホスト名>/Site1 是根。 这 Areas/Site1/Content/xxxx 会将 URL https://<ホスト名>/Site1/xxxx 与 的物理路径关联。

以 sample1.png为例 Areas/Site1/Content/image/sample.png ，文件 https://<ホスト名>/Site1/image/sample.png 可以引用为 的路径。

操作确认

index.html 将 img 标记放在 中，以便可以按如下方式引用图像： 路径还引用 site1 和 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" />
<!-- ここまで追加 -->

如果你运行它，并看到图像，这是成功的。