Umieszczanie plików statycznych w folderach innych niż wwwroot

Środowiska

Visual Studio

• Visual Studio 2019

Rdzeń ASP.NET

• 3.1 (strona razor, MVC)

Informacje o domyślnej lokalizacji umieszczania plików statycznych

Pliki statyczne (.js, .css, .png itp.) są domyślnie określane jako w folderze wwwroot. Dzięki temu użytkownicy witryny sieci Web mogą zobaczyć .js i .css pliki bezpośrednio wraz z kodem HTML i odzwierciedlić je na ekranie.

Domyślnym folderem umieszczania dla tego pliku statycznego jest wwwroot, Startup.Configure ponieważ wywołuje następującą metodę app.UseStaticFiles opisaną w metodzie:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

Ścieżka folderu fizycznego "wwwroot" to "https://<host name>/" w adresie URL. Na przykład plik w pliku wwwroot\image\sample.png można znaleźć w adresie URL pod adresem https://<nazwa hosta>/image.png przykład.]

Pliki umieszczone poza folderem wwwroot zasadniczo nie są odwoływane z adresu URL w sieci Web.

Jak umieścić pliki statyczne oprócz folderu wwwroot i zmienić ścieżkę odniesienia pod adresem URL

Konfiguracja folderu

Tym razem chcę opuścić funkcję folderu wwwroot, ale także umieścić plik obrazu w osobnym folderze, aby można było się do niego odwoływać w sieci Web.

Konfiguracja folderu projektu powinna być następująca, tak aby można było zobaczyć pliki obrazów w folderze Zawartość każdej witryny w obszarze.

W tym stanie adres URL .png pliku w próbce1.png

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

I

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

może się wydawać, że tak będzie, ale tutaj

• https://<Nazwa hosta>/site1/image/sample1.png

odniesienia w .

Nawiasem mówiąc, jeśli umieścisz plik statyczny oprócz folderu wwwroot, może brakować akcji kompilacji pliku. Jeśli nadal publikujesz, plik nie zostanie umieszczony, więc pamiętaj, aby ustawić go z powrotem do zawartości.

Dodawanie programu

Aby udostępnić pliki statyczne w folderach innych niż wwwroot, Startup.Configure należy wywołać dodatkowe app.UseStaticFiles metody w metodzie w następujący sposób:

// 追加
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 Wywołanie metody bez argumentów umożliwia folder wwwroot. Można dodać dodatkowe StaticFileOptions ustawienia, przechodząc do pierwszego argumentu.

StaticFileOptions.FileProvider Określa PhysicalFileProvider folder fizyczny, do którego właściwość ma być nazywana jako plik statyczny podczas przekazywania wystąpienia . Plik pod określoną w tym miejscu ścieżką jest plikiem, do którego można się odwoływać w sieci Web. Może być również RequestPath katalogiem głównym adresu URL dla następujących właściwości:

env.ContentRootPath Właściwość zawiera ścieżkę główną (ścieżkę fizyczną) programu sieci Web. Dobrym pomysłem jest połączenie tego z względną ścieżką do folderu docelowego.

StaticFileOptions.RequestPath Właściwość opisuje ścieżkę główną adresu URL, który odwołuje się do pliku statycznego. Domyślny element wwwroot https://<ホスト名> jest oparty na programie . Podobnie jak w RequestPath = "/Site1" powyższym kodzie, jeśli napiszesz https://<ホスト名>/Site1 jest korzeniem. Spowoduje to Areas/Site1/Content/xxxx połączenie ścieżki fizycznej z adresem https://<ホスト名>/Site1/xxxx URL.

Za pomocą sample1.png jako przykład, Areas/Site1/Content/image/sample.png plik może https://<ホスト名>/Site1/image/sample.png odwoływać się w ścieżce.

Sprawdź działanie

index.html Umieść znacznik img, aby obraz był widoczny w następujący sposób: Ścieżka odwołuje się również do obrazów site1 i site2 zgodnie z definicją.

<!-- 省略 -->

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

Jeśli go uruchomisz i zobaczysz obraz, to jest to sukces.