ASP.Net Core - IApplicationBuilder.Map, SPA и статические файлы - PullRequest
Новая
       43

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

0 голосов
/ 07 февраля 2019

Я хочу использовать 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" });

Но безрезультатно.

Что такое секретный соус для обслуживания Angular SPA по другому маршруту в ASP.Net Core?

Редактировать: Отвечая @Michael - Iискал это, чтобы в конечном итоге разместить несколько приложений, но я подумал, что это может не стоить хлопот.Я хочу быть в состоянии выполнять «ng serve» при разработке приложений и запускаться под управлением Asp.Net Core при развертывании.Если одна вещь работает, другая становится сломанной.Вот и решил пока заняться этим.

1 Ответ

0 голосов
/ 15 апреля 2019

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

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

   // ...
   "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;
    });
});

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

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

...