Đặt các tệp tĩnh trong một thư mục khác với wwwroot

môi trường

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1 (Trang Razor, MVC)

Giới thiệu về vị trí mặc định của tệp tĩnh

Theo mặc định, các tệp tĩnh (.js, .css, .png, v.v.) vẫn còn trong thư mục wwwroot. Điều này cho phép người dùng trang web xem .js tệp .css và HTML và lan truyền trên màn hình.

Thư mục triển khai mặc định cho tệp tĩnh Startup.Configure này là wwwroot, gọi các phương pháp app.UseStaticFiles sau đây được mô tả trong phương pháp:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

Đường dẫn đến thư mục vật lý "wwwroot" trong URL là vị trí của "https://<hosting nams>/", Ví dụ: tệp trong "wwwroot\image\sample.png có thể được tham chiếu trong URL thông qua https://<hosting namle>/image/sample.png url.

Các tệp được đặt bên ngoài thư mục wwwroot về cơ bản không thể được tham chiếu từ URL trên web.

Làm thế nào để đặt các tập tin tĩnh bên ngoài thư mục wwwroot và thay đổi đường dẫn tham chiếu trong URL

Cấu hình thư mục

Thời gian này, tôi muốn đặt các tập tin hình ảnh trong một thư mục riêng biệt để tham khảo nó trên web trong khi vẫn giữ chức năng của thư mục wwwroot.

Cấu hình thư mục của dự án được hiển thị dưới đây để tham khảo các tệp hình ảnh trong thư mục nội dung của mỗi trang web trong Areas.

Trong trạng thái này, tham chiếu đến sample1.png tệp trong tệp là URL

• https://<Host Namt>/areas/site1/content/image/sample1.png

Và

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

Có vẻ như, nhưng ở đây

• https://<Host Namt>/site1/image/sample1.png

Cung cấp tài liệu tham khảo trong .

Nhân tiện, nếu bạn đặt tệp tĩnh bên ngoài thư mục wwwroot, thao tác xây dựng tệp có thể là Không có. Nếu bạn tiếp tục, bản phát hành sẽ không đặt tệp, vì vậy hãy đảm bảo đặt lại tệp thành nội dung.

Thêm chương trình

Để cho phép tham chiếu đến các tệp tĩnh trong một thư mục khác với wwwroot, Startup.Configure app.UseStaticFiles hãy gọi các phương thức khác trong phương thức như sau:

// 追加
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 Gọi phương thức mà không có tham số sẽ cho phép thư mục wwwroot. Khi bạn vượt qua để StaticFileOptions đối số đầu tiên, bạn có thể thực hiện các thiết lập khác.

StaticFileOptions.FileProvider Vượt qua PhysicalFileProvider các trường hợp của các tài sản và chỉ định các thư mục vật lý để tham khảo như là một tập tin tĩnh. Các tập tin dưới đường dẫn được chỉ định ở đây là các tập tin mà web có thể tham khảo. Nó cũng là RequestPath gốc rễ của URL của các thuộc tính sau:

env.ContentRootPath Thuộc tính chứa đường dẫn gốc (đường dẫn vật lý) của chương trình Web. Bạn có thể kết hợp đường dẫn này và đường dẫn tương đối của thư mục đích.

StaticFileOptions.RequestPath Thuộc tính mô tả đường dẫn gốc của URL tham chiếu đến tệp tĩnh. mặc định wwwroot https://<ホスト名> để Như được hiển RequestPath = "/Site1" thị trong mã ở trên, https://<ホスト名>/Site1 Đó là gốc rễ. Điều này Areas/Site1/Content/xxxx liên kết URL https://<ホスト名>/Site1/xxxx với đường dẫn vật lý.

Lấy sample1 làm ví .png, tệp có Areas/Site1/Content/image/sample.png thể tham https://<ホスト名>/Site1/image/sample.png chiếu đến đường dẫn.

Xác nhận hành động

index.html Đặt thẻ img vào để bạn có thể tham khảo hình ảnh như sau: Đường dẫn cũng đề cập đến hình ảnh của site1 và site2 để xác định chúng.

<!-- 省略 -->

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

Nếu bạn chạy nó và nhìn thấy hình ảnh, điều này đã thành công.