将打包后的 React或Vue 与 WebApi 部署在同一站点

苍原双子星

前后端分离的开发中，在部署项目时通常会分开进行部署，而这样又很麻烦，需要配置跨域，域名配置等等
有一些情景下，我们需要采用更为方便的方式去部署，可以参考下方方法进行调整
准备

• Web Api项目
  
• 一个打包好的前端项目 React或VUE都可以
  

调整

为WebApi项目新增 wwwroot 文件夹，用于放置前端静态文件
在 Program.cs 中增加如下改动

1. // 默认文件
2. app.UseDefaultFiles(); // Default.html、Default.htm、index.html、index.htm
4. // 静态文件
5. app.UseStaticFiles(); // 可访问 wwwroot 下的静态文件
7. // Configure the HTTP request pipeline.
8. if (app.Environment.IsDevelopment())
9. {
10.     app.UseSwagger();
11.     app.UseSwaggerUI();
12. }
14. app.UseAuthorization();
16. app.MapControllers();
18. // 映射回退路由以为客户端路由提供 index.html
19. app.MapFallbackToFile("index.html");

复制代码

以上是最简单的配置方式，HashRouter或BrowserRouter都可以用，不需要再单独为前端配置Nginx重定向，也可以使用下面的方式，过滤指定前缀的不重定向到静态文件

1. [/code][code]// 一定要在认证之前添加，否则会认证失败
2. app.UseRouting();
4. // 静态文件
5. app.UseStaticFiles();
7. // 默认文件
8. app.UseDefaultFiles();
10. // Configure the HTTP request pipeline.
11. if (app.Environment.IsDevelopment())
12. {
13.     app.UseSwagger();
14.     app.UseSwaggerUI();
15. }
17. app.UseAuthorization();
19. if (!app.Environment.IsDevelopment())
20. {
21.     DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();
22.     defaultFilesOptions.DefaultFileNames.Clear();
23.     // 设置首页，默认为 index.html
24.     defaultFilesOptions.DefaultFileNames.Add("index.html");
25.     app.UseDefaultFiles(defaultFilesOptions);
26. }
28. // 使用 MapWhen 方法来排除 /api 路径的请求
29. app.MapWhen(context => !context.Request.Path.StartsWithSegments("/api"), appBuilder =>
30. {
31.     appBuilder.UseEndpoints(endpoints =>
32.     {
33.         // 映射回退路由以为客户端路由提供 index.html
34.         endpoints.MapFallbackToFile("index.html");
35.     });
36. });
38. app.MapControllers();

复制代码

来源:https://www.cnblogs.com/Chowhound/p/18554131
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！