iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 10
1
Modern Web

.Net Core 網站開發 101系列 第 10

Static Files 靜態檔案

靜態 HTML、CSS、圖檔和 JavaScript 之類的靜態檔案,一般都是由應用程式直接提供給客戶端。在 ASP.NET Core 應用程式中,需要做一些設定來提供這類型的靜態資源。

提供靜態檔案

靜態檔案可以放在網站根目錄底下的任何路徑,預設目錄是在 /wwwroot,也可以透過 IWebHostBuilder.UseWepRoot 來設定應用程式的 webroot 路徑。使用 MVC 範本建立專案時,會自動產生以下目錄:https://ithelp.ithome.com.tw/upload/images/20181024/20107875E3Q1X5bmUJ.png

要啟用提供靜態檔案的服務,還需要在 Startup.Configure 方法中呼叫 UseStaticFiles 方法,將靜態檔案的中介層加入請求 pipeline 中。範例程式碼可以參考這邊

public void Configure(IApplicationBuilder app)
{
    // some middlewares
    app.UseStaticFiles();
    // some other middlewares
}

正確設定後,就可以在網頁中使用預設靜態目錄中的檔案了。

<img src="~/images/banner1.svg" alt="banner 1"/>

其實也可以將 webroot 以外的目錄作為靜態檔案的來源。假如現在有產生另一個目錄 AnotherStaticSource

https://ithelp.ithome.com.tw/upload/images/20181024/20107875wqDfEHaYzJ.png

我們可以透過以下程式,將 AnotherStaticSource 也做為靜態檔案的目錄:

public void Configure(IApplicationBuilder app)
{
    // some middlewares
    app.UseStaticFiles();

    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), "AnotherStaticSource")),
        RequestPath = "/AnotherStaticSource"
    });
    // some other middlewares
}

FileProvider 是設定取得檔案的方式;RequestPath 則是設定對應的請求路徑。依此設定後,便可以取得 AnotherStaticSource 目錄中的檔案了。

<img src="~/AnotherStaticSource/banner3.svg" alt="banner 3"/>

StaticFileMiddleware 提供的靜態檔案都可以公開存取,如果需要檢查存取合法性,需要:

  • 把檔案存在 UseStaticFiles 設定的靜態檔案目錄以外
  • 透過 Controller/Action 驗證,再回傳 FileResult 物件
public class StaticFilesController : Controller
{
    public IActionResult Banner2()
    {
        var file = Path.Combine(
            Directory.GetCurrentDirectory(),
            "FileResults",
            "banner2.svg");

        return PhysicalFile(file, "image/svg+xml");
    }
}

View 中使用這個語法來取得檔案:

<img src="@Url.Action("Banner2", "StaticFiles")" alt="banner 2" />

參考資料


上一篇
Middleware 中介層 - 2/2
下一篇
Environments 多重環境
系列文
.Net Core 網站開發 10131

尚未有邦友留言

立即登入留言