[英]How to run compiled SPA static files along with ASP.NET Core Web API publish in docker container?
[英]ASP.Net Core - IApplicationBuilder.Map, SPA and static files
我想使用 Asp.Net Core 2.2 来托管我的 Angular 应用程序 - 以及提供 API 请求(在 /api 上)。
所以在 Startup.cs,Configure 中,我设置了以下内容:
app.Map("/home", config =>
{
config.UseSpa(spa =>
{
...
});
});
然而,问题是 runtime.js、polyfills.js 等都没有找到,因为它们被引用为http://localhost:port/filename.ext
我试着用
config.UseSpaStaticFiles(new StaticFileOptions { RequestPath = "/runtime.js" });
但无济于事。
在 ASP.Net Core 的不同路径下为 Angular SPA 提供服务的秘诀是什么?
编辑:回答@Michael - 我正在研究这个以最终托管多个应用程序,但我认为这可能不值得麻烦。 我希望能够在开发应用程序时执行“ng serve”,并在部署时在 Asp.Net Core 下运行。 如果一件事奏效,另一件事就坏了。 所以决定暂时搁置。
我将讨论 csproj 配置、package.json npm 配置以及您的 Startup.cs 代码。
在您的 csproj 文件的底部,您会找到一组在发布应用程序时运行的 npm 命令。
<!--...-->
<PropertyGroup>
<SpaRoot>ClientApp\</SpaRoot>
</PropertyGroup>
<!--...-->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
<!--...-->
如果您想部署两个应用程序,则需要加倍执行所有这些部署说明。
<!--...-->
<PropertyGroup>
<!--...-->
<SpaRoot>ClientApp\</SpaRoot>
<SpaRoot2>ClientApp2\</SpaRoot2>
<!--...-->
</PropertyGroup>
<!--...-->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<!--...-->
<Exec WorkingDirectory="$(SpaRoot2)" Command="npm install" />
<!--...-->
在开发过程中,您可能希望使用 nodejs 来托管应用程序。 在这种情况下,我们的服务器没有托管我们的客户端应用程序。
您将需要设置服务路径以匹配您希望客户端应用程序运行的子目录。
// ...
"start": "ng serve --servePath /app/ --baseHref /app/",
// ...
此时,不要忘记更新构建的 baseHref。 否则当 csproj 中的脚本调用 build 时,它不会指向正确的 basehref。
"build": "ng build --baseHref /app/",
还记得我在开发过程中所说的服务器不托管客户端吗? 我建议在开发时一次运行一个。 重要的是您更新 package.json servePath 以便您测试 url 路径以及所有内容如何链接在一起。
if (env.IsDevelopment())
{
app.UseSpaStaticFiles();
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
// this is calling the start found in package.json
spa.UseAngularCliServer(npmScript: "start");
});
}
else // Production -- in the next section,
最后,我们有我们希望它在生产中的表现。
// how you had it, we will create a map
// for each angular client we want to host.
app.Map(new PathString("/app"), client =>
{
// Each map gets its own physical path
// for it to map the static files to.
StaticFileOptions clientAppDist = new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(
Path.Combine(
Directory.GetCurrentDirectory(),
@"ClientApp\dist"
)
)
};
// Each map its own static files otherwise
// it will only ever serve index.html no matter the filename
client.UseSpaStaticFiles(clientAppDist);
// Each map will call its own UseSpa where
// we give its own sourcepath
client.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
spa.Options.DefaultPageStaticFileOptions = clientAppDist;
});
});
在运行 C# 代码之前,您可以通过注释掉开发代码并在各自的 clientapp 文件夹中运行npm run build来测试生产设置。 只需确保生成的 dist 文件夹未签入您的 git 存储库。
希望您现在对它如何在开发环境中工作、创建构建指令以及它将如何在生产环境中运行有了更好的了解。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.