ASP.Net Core — IApplicationBuilder.Map, SPA и статические файлы

Я собираюсь поговорить о конфигурациях 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 размещал приложение. В этом случае наш сервер не размещает наше клиентское приложение.

Вам нужно будет установить serverpath в соответствии с подкаталогом, из которого вы хотите запустить клиентское приложение.

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

На этом этапе не забудьте обновить baseHref для сборки. в противном случае, когда скрипты в csproj вызывают build, они не будут указывать на правильный basehref.

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

Конфигурации Startup.cs

Помните, как я сказал во время разработки, что сервер не содержит клиента? Я бы предложил запускать по одному во время разработки. Важно то, что вы обновляете serverPath package.json, чтобы проверить путь 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;
    });
});

вы можете протестировать производственную установку, закомментировав код разработки и запустив npm запустить сборку в соответствующих папках clientapp перед запуском кода C#. Просто убедитесь, что сгенерированная папка dist не зарегистрирована в вашем репозитории git.

Надеюсь, теперь вы лучше понимаете, как это работает в среде разработки, как создавать инструкции по сборке и как это будет работать в производственной среде.