将打包后的 React或Vue 与 WebApi 部署在同一站点
  PB47afX38vqn 2天前 4 0

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

准备

  • 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();
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2天前 0

暂无评论