ASP.NET Core 3.1 为 React 应用程序提供静态文件:index.html 和图标已找到,但 js 文件未找到
ASP.NET Core 3.1 Serving static files for react application: index.html and icons found, but js files not
我创建了一个 ASP.NET Core 3.1 Web 应用程序,并在另一个文件夹中使用 create-react-app 工具创建了 React 应用程序。我正在尝试连接这些应用程序,但是当我打开映射的端点时,我只能看到 index.html 已下载,并且找不到 js 文件。
我将特定路径映射到 SPA,因为将来我需要再提供一个 SPA。
ASP.NET核心启动:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors();
services.AddControllersWithViews();
services.AddSpaStaticFiles(config =>
{
config.RootPath = "../clients/game-app/build";
});
// ...
}
public void Configure(IApplicationBuilder app)
{
app.UseCors(x => x
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader());
// ...
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseRouting();
app.MapWhen(c => c.Request.Path.Value.ToLower().StartsWith("/game"), client =>
{
client.UseSpa(spa =>
{
spa.Options.SourcePath = "../clients/game-app";
spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "../clients/game-app/build"))
};
if (_env.IsDevelopment())
spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
});
});
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
文件夹结构:
root
- Project.sln
- clients
- game-app
- build
- files created by create-react-app
- Project
- ...
- Startup.cs
- wwwroot/game-app/build - copy of build from game-app folder
我发誓它像现在一样工作。我什至承诺保存所有内容,因为我为此苦苦挣扎。但现在它停止工作了。我怀疑我做错了什么是我在提交之前没有关闭反应开发服务器。
现在不工作了:
根本原因是什么?
好的,问题是当我尝试使用一些映射路径作为反应端点时:
app.MapWhen(c => c.Request.Path.Value.ToLower().StartsWith("/game"), client => {...});
此端点开始充当静态文件提供程序,因此我可以毫无问题地获取 index.html。但是 index.html 包含指向这种格式的 js 文件的链接:
/static/js/bundle.js
which leads to
localhost:4000/static/js/bundle.js
但是正确的地址是
localhost:4000/game/static/js/bundle.js
我在这里找到的解决方法:https://github.com/aspnet/Templating/issues/555
我添加到package.json:
"homepage": "http://localhost:3000/game", // webpack dev server address
它奏效了。
我创建了一个 ASP.NET Core 3.1 Web 应用程序,并在另一个文件夹中使用 create-react-app 工具创建了 React 应用程序。我正在尝试连接这些应用程序,但是当我打开映射的端点时,我只能看到 index.html 已下载,并且找不到 js 文件。 我将特定路径映射到 SPA,因为将来我需要再提供一个 SPA。 ASP.NET核心启动:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors();
services.AddControllersWithViews();
services.AddSpaStaticFiles(config =>
{
config.RootPath = "../clients/game-app/build";
});
// ...
}
public void Configure(IApplicationBuilder app)
{
app.UseCors(x => x
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader());
// ...
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseRouting();
app.MapWhen(c => c.Request.Path.Value.ToLower().StartsWith("/game"), client =>
{
client.UseSpa(spa =>
{
spa.Options.SourcePath = "../clients/game-app";
spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "../clients/game-app/build"))
};
if (_env.IsDevelopment())
spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
});
});
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
文件夹结构:
root
- Project.sln
- clients
- game-app
- build
- files created by create-react-app
- Project
- ...
- Startup.cs
- wwwroot/game-app/build - copy of build from game-app folder
我发誓它像现在一样工作。我什至承诺保存所有内容,因为我为此苦苦挣扎。但现在它停止工作了。我怀疑我做错了什么是我在提交之前没有关闭反应开发服务器。
现在不工作了:
根本原因是什么?
好的,问题是当我尝试使用一些映射路径作为反应端点时:
app.MapWhen(c => c.Request.Path.Value.ToLower().StartsWith("/game"), client => {...});
此端点开始充当静态文件提供程序,因此我可以毫无问题地获取 index.html。但是 index.html 包含指向这种格式的 js 文件的链接:
/static/js/bundle.js
which leads to
localhost:4000/static/js/bundle.js
但是正确的地址是
localhost:4000/game/static/js/bundle.js
我在这里找到的解决方法:https://github.com/aspnet/Templating/issues/555
我添加到package.json:
"homepage": "http://localhost:3000/game", // webpack dev server address
它奏效了。