spa.UseAngularCliServer（）中间件如何服务网页？ [英] How does spa.UseAngularCliServer() middleware serve a webpage?

问题描述

我使用Visual Studio 2017（版本15.7.2）创建.Net Core 2.1 Angular应用程序

I create a .Net Core 2.1 Angular application with Visual Studio 2017 (ver. 15.7.2)

我想知道spa.UseAngularCliServer（）如何在开发模式下提供页面。

I wonder how spa.UseAngularCliServer() serves a page in development mode.

1. 在调试模式下，没有尽管网页已正常加载，但ClientApp或wwwroot文件夹中的 dist文件夹。
   dist文件夹在哪里？

1. In debug mode, there is no "dist" folder in the ClientApp or wwwroot folder, though the webpage is loaded normally. Where is the dist folder?

看起来像spa中间件启动了angular-cli dev服务器，但该网页实际上是由托管IIS Express。
ng服务与IIS Express有何关系？

It looks like that the spa middleware start an angular-cli dev server, but the webpage is actually hosted by IIS Express. How does "ng serve" relate to IIS Express?

starup.cs表单

Form starup.cs

app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });

推荐答案

尽管通过将请求代理到 Angular Development Server ，该代理不是由IIS代理，而是由ASP.NET Core本身代理。 IIS不了解Angular Dev Server侦听的端口。

Although that's done by proxying requests to the Angular Development Server , the proxying is not proxied by IIS , but by ASP.NET Core itself . IIS has no idea about the port listened by Angular Dev Server .

1. UseAngularCliServer（ start）首先会调用命令

npm start -- --port {dynamic_port}

{dynamic_port} 此处是在 RunTime 中计算的。因为 npm 命令已经存在在 package.json 中配置，它将通过 ng serve---port {dynamic_port} 启动开发服务器。

The {dynamic_port} here is computed at RunTime .Since the npm command has been already configured in package.json , it will then start a dev server byng serve -- --port {dynamic_port} .

1. 如果 ng服务完美运行，它将为代理创建一个普通的 HttpClient 并使用它执行代理（将请求与普通<$一起转发到 Angular Dev Server c $ c> HttpClient ，然后将响应复制为自己的响应）。 WebSocket 代理将以类似的方式发生。

1. if the ng serve run flawlessly , it will create a plain HttpClient for proxy and use it to perform proxy (forward requests to Angular Dev Server with the plain HttpClient , and copy the response as it's own response) . The WebSocket proxy will take place in a similar way .

您可以找到 GitHub 上的源代码。易于阅读和理解。

You can find the source code on GitHub . It's easy to read and understand .

在内部， UseAngularCliServer（npmScript： start）将调用 AngularCliMiddleware 执行步骤1 和步骤2 。步骤1通过以下方式完成：

Internally , the UseAngularCliServer(npmScript: "start") will invoke AngularCliMiddleware to do step 1 and step 2 . The step 1 is done by :

var angularCliServerInfoTask = StartAngularCliServerAsync(sourcePath, npmScriptName, logger);

StartAngularCliServerAsync 方法将找到可用的TCP port，然后运行命令 npm start---port {port} 开始 ng服务：

The StartAngularCliServerAsync method will find an available TCP port , and run command npm start -- --port {port} to start ng serve :

private static async Task<AngularCliServerInfo> StartAngularCliServerAsync(
    string sourcePath, string npmScriptName, ILogger logger)
{
    var portNumber = TcpPortFinder.FindAvailablePort();
    logger.LogInformation($"Starting @angular/cli on port {portNumber}...");
    var npmScriptRunner = new NpmScriptRunner( sourcePath, npmScriptName, $"--port {portNumber}", null); 
    // ...
}

在此处查看完整的代码

步骤2通过以下方式完成：

And the Step 2 is done by :

public static void UseProxyToSpaDevelopmentServer(this ISpaBuilder spaBuilder, Func<Task<Uri>> baseUriTaskFactory)
{
    // ...
    // Proxy all requests to the SPA development server
    applicationBuilder.Use(async (context, next) =>
    {
        var didProxyRequest = await SpaProxy.PerformProxyRequest( context, neverTimeOutHttpClient, baseUriTaskFactory(), applicationStoppingToken, proxy404s: true);
    });
}

PerfromProxyRequest（）的实现可以找到这里。对于普通请求，它只需使用普通的 HttpClient 转发它们，并将响应复制为自己的响应即可。

The implementation of PerfromProxyRequest() can be found here . For normal requests , It simply forward them using a plain HttpClient and copy the response as its own response .

返回您的问题：

dist文件夹在哪里？

Where is the dist folder?

因为已经配置了 spa.UseAngularCliServer（ start）：

if (env.IsDevelopment())
{
    spa.UseAngularCliServer(npmScript: "start");
}

所有这些请求将由angular cli启动的本地开发服务器处理。结果，磁盘上根本没有 dist 。如果手动运行命令 ng serve 也会发生同样的情况。

All those requests will be processed by local dev server launched by angular cli. As a result , there's no dist on disk at all . The same will take place if you run the command ng serve manually .

如何

How does "ng serve" relate to IIS Express?

IIS不了解Angular Dev Server侦听的端口。收到传入消息时，IIS会将其发送到您的ASP.NET Core服务器。如果该请求不能被staticFiles，MVC或您在 UseSpa（）之前配置的任何其他中间件处理，则ASP.NET Core会将其转发到Dev Server。

IIS has no idea about the port listened by Angular Dev Server. When there's an incoming message , IIS just sends it to your ASP.NET Core server . If the request cannot be processed by staticFiles , MVC , or any other middlewares that you've configured before UseSpa() , ASP.NET Core will forward it to the Dev Server .

这篇关于spa.UseAngularCliServer（）中间件如何服务网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！