ASP.Net Core - IApplicationBuilder.Map、SPA 和靜態文件

Question

我想使用 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 下運行。 如果一件事奏效，另一件事就壞了。 所以決定暫時擱置。

Answer 1

我將討論 csproj 配置、package.json npm 配置以及您的 Startup.cs 代碼。

.csproj 文件

在您的 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" />
    <!--...-->

配置 package.json

在開發過程中，您可能希望使用 nodejs 來托管應用程序。 在這種情況下，我們的服務器沒有托管我們的客戶端應用程序。

您將需要設置服務路徑以匹配您希望客戶端應用程序運行的子目錄。

   // ...
   "start": "ng serve --servePath /app/ --baseHref /app/",
   // ...

此時，不要忘記更新構建的 baseHref。 否則當 csproj 中的腳本調用 build 時，它不會指向正確的 basehref。

"build": "ng build --baseHref /app/",

Startup.cs 配置

還記得我在開發過程中所說的服務器不托管客戶端嗎？ 我建議在開發時一次運行一個。 重要的是您更新 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 存儲庫。

希望您現在對它如何在開發環境中工作、創建構建指令以及它將如何在生產環境中運行有了更好的了解。