带有 OWIN 的静态文件服务器 -> 未找到文件错误答案

【问题标题】：Static file server with OWIN -> files not found error带有 OWIN 的静态文件服务器 -> 未找到文件错误
【发布时间】：2016-04-20 23:52:21
【问题描述】：

我的应用程序正在 Azure Service Fabric 中运行。在我的应用程序中，我使用 angularJS 作为前端的 asp.net web api。我的 web api 是带有 OWIN/Katana 的 self hostet，效果很好。

为了向客户端提供静态文件，我使用的是 OWIN 静态文件服务器。为了使用文件服务器，我从 Service Fabric 示例中进行了配置。

public void Configuration(IAppBuilder appBuilder)
        {   
            HttpConfiguration httpConfig = this.ConfigureWebApi();
            FileServerOptions fileServerOptions = this.ConfigureFileSystem(appBuilder);

            appBuilder.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
            appBuilder.UseWebApi(this.ConfigureWebApi());
            appBuilder.UseFileServer(fileServerOptions);  
        }

private FileServerOptions ConfigureFileSystem(IAppBuilder appBuilder)
        {
            PhysicalFileSystem physicalFileSystem = new PhysicalFileSystem(@".\wwwroot");
            FileServerOptions fileOptions = new FileServerOptions();

            fileOptions.EnableDefaultFiles = true;
            fileOptions.RequestPath = PathString.Empty;
            fileOptions.FileSystem = physicalFileSystem;
            fileOptions.DefaultFilesOptions.DefaultFileNames = new[] { "index.html" };
            fileOptions.StaticFileOptions.FileSystem = fileOptions.FileSystem = physicalFileSystem;
            fileOptions.StaticFileOptions.ServeUnknownFileTypes = true;

            return fileOptions;
        }

文件目录如下所示：

wwwroot

--+ app

----+ content

------+ css

-------- site.css

----+ bower_components

------+ angular

-------- angular.min.js

----- app.js

--- index.html

所有这些文件也在构建后的 bin/Debug/ 文件夹中。当我在浏览器中打开地址 http://localhost:80/ 时，我得到了 index.html 文件。但是除了http://localhost:80/app/app.js 之外的所有其他文件都找不到。

index.html 中的引用如下所示：

<link href="app/content/css/site.css" rel="stylesheet" />
<script src="app/bower_components/angular/angular.min.js"></script>
<script src="app/app.js"></script>

我尝试了很多其他配置，但都不起作用。有什么问题，我看不到吗？

【问题讨论】：

标签： angularjs asp.net-web-api owin self-hosting azure-service-fabric

【解决方案1】：

我发现了问题。要将所有文件从 wwwroot 文件夹复制到 Debug/bin/ 文件夹，我在 Visual Studio 中使用以下命令：XCOPY "$(SolutionDir)WebAppApi.Service\wwwroot" "$(TargetDir)wwwroot" /s /i /y。我认为这与将“复制到输出目录”属性设置为“如果较新则复制”或“始终复制”相同。 XCOPY 命令将所有文件复制到调试文件夹中。但在 Azure Service Fabric 中，还有一个用于所有包含服务的“主”调试文件夹 (\[application name]\pkg\Debug\[service project name]Pkg\Code\wwwroot)。在那个文件夹中没有wwwroot 文件夹，因为除了index.html 和app.js 之外，所有文件都具有“不复制”作为“复制到输出目录”的属性。

【讨论】：

【解决方案2】：

我为同样的问题苦苦挣扎了几个小时。除了我需要复制从 webpack 构建生成的文件。所以我在sfproj文件中添加了follow sn-p。

<PropertyGroup>
  <FrontendApplication>FrontendAppName</FrontendApplication>
</PropertyGroup>
<ItemGroup>
   <ClientSourceFiles Include="$(SolutionDir)$(FrontendApplication)\app\build\**\*.*" />    
</ItemGroup>
<Target Name="CopyAppToPackage" AfterTargets="CollectServiceCodeFiles">
 <Copy SourceFiles="@(ClientSourceFiles)" DestinationFolder="$(SolutionDir)$(ProjectName)\pkg\$(ConfigurationName)\$(FrontendApplication)Pkg\Code\wwwroot\%(RecursiveDir)" />
</Target>

app\build是webpack的输出目录，wwwroot是PhysicalFileSystem使用的目录。

这解决了服务结构构建目标中的任务之一清理包目录的问题。

【讨论】：