將靜態檔放在 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 以下屬性的網址的根：

env.ContentRootPath 屬性包含 Web 程式的根路徑（物理路徑）。 您可以合併此路徑和目標資料夾的相對路徑。

StaticFileOptions.RequestPath 屬性描述引用靜態檔的 URL 的根路徑。 預設 wwwroot https://<ホスト名> 以 如上面的 RequestPath = "/Site1" 代碼所示， https://<ホスト名>/Site1 是根。 這 Areas/Site1/Content/xxxx 會將網址 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" />
<!-- ここまで追加 -->

如果你運行它，並看到圖像，這是成功的。