将打包后的 React或Vue 与 WebApi 部署在同一站点
前后端分离的开发中,在部署项目时通常会分开进行部署,而这样又很麻烦,需要配置跨域,域名配置等等
有一些情景下,我们需要采用更为方便的方式去部署,可以参考下方方法进行调整
准备#
- 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();
作者:睡觉对我非常重要
出处:https://www.cnblogs.com/Chowhound/p/18554131
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章