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

  • 将打包后的 React或Vue 与 WebApi 部署在同一站点已关闭评论
  • 32 次浏览
  • A+
所属分类:.NET技术
摘要

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

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

准备

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

调整

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

 // 默认文件 app.UseDefaultFiles(); // Default.html、Default.htm、index.html、index.htm  // 静态文件 app.UseStaticFiles(); // 可访问 wwwroot 下的静态文件  // Configure the HTTP request pipeline. if (app.Environment.IsDevelopment()) {     app.UseSwagger();     app.UseSwaggerUI(); }  app.UseAuthorization();  app.MapControllers();  // 映射回退路由以为客户端路由提供 index.html app.MapFallbackToFile("index.html");  

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

<Route path="/:nthParam*" component={DefaultLayout} /> // 如果前端路由有此配置或类似此方式的,推荐使用下方方法 
 // 一定要在认证之前添加,否则会认证失败 app.UseRouting();  // 静态文件 app.UseStaticFiles();  // 默认文件 app.UseDefaultFiles();  // Configure the HTTP request pipeline. if (app.Environment.IsDevelopment()) {     app.UseSwagger();     app.UseSwaggerUI(); }  app.UseAuthorization();  if (!app.Environment.IsDevelopment()) {     DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();     defaultFilesOptions.DefaultFileNames.Clear();     // 设置首页,默认为 index.html     defaultFilesOptions.DefaultFileNames.Add("index.html");     app.UseDefaultFiles(defaultFilesOptions); }  // 使用 MapWhen 方法来排除 /api 路径的请求 app.MapWhen(context => !context.Request.Path.StartsWithSegments("/api"), appBuilder => {     appBuilder.UseEndpoints(endpoints =>     {         // 映射回退路由以为客户端路由提供 index.html         endpoints.MapFallbackToFile("index.html");     }); });  app.MapControllers();