静态文件中间件：前后端分离开发合并部署

Bertha 。 2021-06-26 16:06 270阅读 0赞

# 静态文件中间件的能力 #

*  支持指定相对路径
 *  支持目录浏览
 *  支持设置默认文档
 *  支持多目录映射

# 代码实现 #

## 创建项目 ##

创建名字为`StaticFilesDemo`的`ASP.NET Core`项目，类型为`API`

## 创建测试用的静态文件 ##

在根目录创建`wwwroot`文件夹，参照下面结构进行对应文件创建：

具体代码如下：

/wwwroot/index.html

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>静态首页</title>
        <script src="/app.js"></script>
    </head>
    <body>
        <h1>这是静态首页 wwwroot/index.html</h1>
    </body>
    </html>

/wwwroot/app.js

alert("这是/index.html")

/wwwroot/a/index.html

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="a.js"></script>
    </head>
    <body>
        <h1>这是/a/index.html</h1>
    </body>
    </html>

/wwwroot/a/a.js

alert("这是/a/index.html")

## 默认静态文件中间件 ##

在`Startup.Configure`中，将以下代码添加到`app.UseHttpsRedirection();`下一行

app.UseStaticFiles();

运行项目访问`https://localhost:5001/index.html`和`https://localhost:5001/a/index.html`可看到静态页面信息

## 设置默认文件为index.html ##

能起到的效果如下：

`https://localhost:5001` = `https://localhost:5001/index.html`

`https://localhost:5001/a` = `https://localhost:5001/a/index.html`

在`app.UseStaticFiles();`前面添加以下代码即可：

app.UseDefaultFiles();

运行项目访问`https://localhost:5001`和`https://localhost:5001/a`可看到静态页面信息

## 支持目录浏览 ##

注释掉默认文件的那个中间件，添加目录浏览的中间件，代码如下：

app.UseDirectoryBrowser();

然后在`Startup.ConfigureServices`配置目录浏览的服务，代码如下：

services.AddDirectoryBrowser();

运行项目访问`https://localhost:5001`，可以看到`wwwroot`的目录结构

## 多目录映射 ##

当文件支持存在放`wwwroot`这个文件夹的时候，可以使用静态文件中间件的重载来映射其他文件夹，注释掉上一步的代码，将`Startup.Configure`修改如下：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    { 
        if (env.IsDevelopment())
        { 
            app.UseDeveloperExceptionPage();
        }
    
        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseStaticFiles(new StaticFileOptions()
        { 
            FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "file"))
        });
        
        app.UseRouting();
    
        app.UseAuthorization();
    
        app.UseEndpoints(endpoints =>
        { 
            endpoints.MapControllers();
        });
    }

在项目根目录创建`file`文件夹，在里面创建个`file_page.html`文件，随便写点东西，运行项目，访问`https://localhost:5001/file_page.html`，可以看到静态页内容。注意，如果出现同名文件，则先注册的路径优先权更高，如果需要在访问指定文件夹有指定url地址，可以使用`StaticFileOptions`对象的`RequestPath`属性，假设这里的`RequestPath="/myfiles"`，则说明要想访问`file`文件夹的内容，路径前面得加上`myfiles`，例如`https://localhost:5001/myfiles/file_page.html`

# 功能实现 #

有这样一个需求，接口里所有接口的路由都由`api`开始，即`/api/xxx`，静态文件放在默认的`wwwroot`文件夹中，如果访问的地址不是接口，同时也找不到对应的静态文件，则重写到`/index.html`页面，具体代码如下：

修改`WeatherForecastController`，将原本的`[Route("[controller]")]`修改为`[Route("/api/[controller]")]`

修改`Startup.Configure`方法，代码如下：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    { 
        if (env.IsDevelopment())
        { 
            app.UseDeveloperExceptionPage();
        }
    
        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.MapWhen(context =>
        { 
            return !context.Request.Path.Value.StartsWith("/api");
        }, appBuilder =>
        { 
            var option = new RewriteOptions();
            option.AddRewrite(regex: ".*", replacement: "/index.html", skipRemainingRules: true);
            appBuilder.UseRewriter(option);
            appBuilder.UseStaticFiles();
        });
        app.UseRouting();
        app.UseAuthorization();
        app.UseEndpoints(endpoints =>
        { 
            endpoints.MapControllers();
        });
    }

运行项目，访问`https://localhost:5001/api/WeatherForecast`，可以看到正常返回接口信息，访问`https://localhost:5001/a/index.html`可以看到正常访问到`/a/index.html`文件内容，访问`https://localhost:5001/order/get`则会返回`/index.html`文件内容

--------------------

# 静态文件中间件 #

通过`UseStaticFiles()`启用静态文件中间件，它默认将应用程序根目录下`wwwroot`目录映射为网站静态文件根目录。

## 1. 默认文档和目录浏览 ##

网站默认文件为`wwwroot/index.html`，非根目录无默认文件，需要使用`UseDefaultFiles()`中间件设置，默认为该目录下`index.html`文件，也可以通过其重载设定其它默认文件名。

处于安全考虑，默认情况下系统禁止直接访问静态文件所在目录，如果需要启动静态目录浏览，需要注入目录流浪服务并启用目录浏览中间件。

public void ConfigureServices(IServiceCollection services)
    { 
        services.AddControllers();
        services.AddDirectoryBrowser();
    }
    
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    { 
        app.UseDirectoryBrowser();
        app.UseDefaultFiles();
        app.UseStaticFiles();
        
        app.UseRouting();
        app.UseEndpoints(endpoints => {  endpoints.MapControllers(); });
    }

## 2. 自定义目录映射 ##

除了使用默认的`wwwroot`目录，我们也可以配置任意目录映射为任意URL。

app.UseStaticFiles(new StaticFileOptions
    { 
        RequestPath = "/a",
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "files"))
    });

以上代码可以将`/files`目录映射为`/a`路径。`/files/index.html`可通过`/a/index.html`访问，`RequestPath`不指定或指定为`/`时会将目录映射到网站根目录，系统会根据中间件注册顺序搜索文件目录或者匹配路由。

## 3. 重定向 ##

在前后端分离的情况下，前端项目通常编译为一个`index.html`和一组css和js文件。css和js文件通常会部署在CDN服务器上以提升访问速度。前端项目可以部署在Nginx等独立的服务器上， 如果不想为`index.html`设立一个单独的服务器，也可以与Asp.Net Core应用程序一起托管在Kestral服务器中，通过不同路径区分前后端请求，如所有 `/api/*`的请求设为后端请求，其他则都视为前端请求，重定向到`index.html`即可。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    { 
        app.MapWhen(context => !context.Request.Path.Value.StartsWith("/api"), builder =>
        { 
            var options=new RewriteOptions();
            options.AddRewrite(".*", "/index.html", true);
            builder.UseRewriter(options);
    
            builder.UseStaticFiles();
        });
    
        app.UseRouting();
        app.UseEndpoints(endpoints => {  endpoints.MapControllers(); });
    }

使用以上中间件配置，所有`/api/*`请求正常匹配MVC路由，其他请求则全部重定向到`/index.html`

--------------------

# 文件中间件的使用(firstApp) #

### 一、在默认文件夹创建文件 ###

在项目目录->wwwroot->创建一个index.html

<!DOCTYPE html>
    <html>
    <body>
        <h1>Static file from ASP.NET Core!</h1>
    </body>
    </html>

在Startup.cs中添加:

app.UseStaticFiles();

注意:此时代码提示报错,因为没有引用。  
![在这里插入图片描述][20201231171209402.png]  
在NuGet中添加**Microsoft.AspNetCore.StaticFiles**  
![在这里插入图片描述][20201231171239705.png]  
然后,启动生成，并且启动项目  
![在这里插入图片描述][20201231171300434.png]

### 二、自定义文件路径 ###

替换之前的`app.UseStaticFiles()`为

using Microsoft.Extensions.FileProviders;
    
    var staticfile = new StaticFileOptions();
                staticfile.FileProvider = new PhysicalFileProvider(@"D:\");//指定目录 可以是任何的地址
                app.UseStaticFiles(staticfile);

然后再D盘下面新建一个`a.txt` 并且写入"自定义文件路径读取的数据"

重新生成、并且启动项目  
![在这里插入图片描述][20201231171330335.png]

[20201231171209402.png]: /images/20210626/9a50c217b54949b59fd534ddf37da619.png
[20201231171239705.png]: /images/20210626/4fef3ea86e6d4b88947afbee23bf9298.png
[20201231171300434.png]: /images/20210626/414a9a9de74146b5851970230c77768f.png
[20201231171330335.png]: /images/20210626/8430c22a7b604c59a295fc8f154d23e5.png