Розміщення статичних файлів у папках, крім wwwroot

Середовищі

Візуальна студія

• Visual Studio 2019

ASP.NET ядро

• 3.1 (Сторінка бритви, MVC)

Про розташування статичних файлів за промовчанням

Статичні файли (.js, .css, .png тощо) за замовчуванням знаходяться в папці wwwroot. Це дозволяє користувачам веб-сайтів бачити .js та .css файли безпосередньо разом з HTML та відображати їх на екрані.

Типовою текою розташування для цього статичного файла є wwwroot, Startup.Configure оскільки вона викликає такий app.UseStaticFiles спосіб, описаний у методі:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

Шлях до фізичної папки "wwwroot" - "https://<ім'я хоста>/" в URL-адресі. Наприклад, файл у файлі wwwroot\image\sample.png можна знайти в URL-адресі в розділі https://<ім'я хоста>/image.png і зразок.]

Файли, розміщені за межами папки wwwroot, по суті не посилаються з URL-адреси в Інтернеті.

Як розмістити статичні файли на додаток до папки wwwroot і змінити шлях посилання за URL

Конфігурація папки

На цей раз я хочу залишити функцію папки wwwroot, але і помістити файл зображення в окрему папку, щоб на нього можна було посилатися в Інтернеті.

Конфігурація папки проекту повинна бути наступною, щоб ви могли бачити файли зображень в папці "Вміст" кожного сайту в областях.

У цьому стані URL-адреса .png у форматі sample1.png

• https://<ім'я хоста>/арени/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 фізичну папку, на яку має посилатися властивість, як статичний файл під час передавання екземпляра . Указаний тут файл містить файл, на який можна посилатися в Інтернеті. Він також може бути RequestPath коренем URL для наступних властивостей:

env.ContentRootPath Властивість містить кореневий шлях (фізичний шлях) веб-програми. Це гарна ідея, щоб поєднати це з відносним шляхом до цільової папки.

StaticFileOptions.RequestPath Властивість описує кореневий шлях URL-адреси, яка посилається на статичний файл. За промовчанням на основі https://<ホスト名> файлу використовується wwwroot . Як і в RequestPath = "/Site1" наведеному вище коді, якщо ви пишете https://<ホスト名>/Site1 є коренем. Це Areas/Site1/Content/xxxx зв'язує фізичний https://<ホスト名>/Site1/xxxx шлях з URL-адресою.

Використовуючи 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" />
<!-- ここまで追加 -->

Якщо ви запускаєте його і бачите зображення, це успіх.