创建Angular/React应用程序时的.Net本地服务器 [英] .Net localhost servers when creating Angular/React applications

问题描述

我正在使用VS2017/2019和.NET Core 2.1来创建 Angular 或 React 应用程序. Angular-CLI 或 create-react-app 用于设置所有内容. 以下所有与开发阶段有关 :

在构建.NET项目时，将启动 IIS express 服务器以容纳我们的应用程序，我们将其命名为 localhost:19500 .

在启动前端部分(Angular或React)的同时，也启动了 Webpack Dev服务器，它可以将前端编译的代码容纳在由Webpack;我们可以通过检查(通过Chrome开发工具)包含这些捆绑软件的 index.html 来看到.据完全了解，这些捆绑包实际上并不位于任何地方.它们被加载到内存中，并且可以通过Webpack Dev Server访问.如果我们独立运行前端应用程序，则可以通过 localhost:4200 (Angular)或 localhost:3000 (React)访问此Dev服务器.所以，我的问题是:

我的上述分析正确吗?如果我们启动IIS服务器， 是否有任何Webpack Dev Server服务于前端，或者前者服务于前端包 ?

如果有一个Webpack Dev服务器，那么我们有两个服务器，我们应该解决CORS问题.如果没有，IIS如何处理热模块替换(HMR)之类的问题?中间件 UseAngularCliServer 的确切作用是什么?

解决方案

根据您在我的

I am using VS2017/2019 and .NET Core 2.1 as to create Angular or React applications. Angular-CLI or create-react-app is used for setting everything up. All the following has to do with development stage:

When we build our .NET project, an IIS express server is launched as to accommodate our application, let's name it localhost:19500.

At the same time when the front-end part is being launched (either Angular or React) a Webpack Dev server is launched as well, that accommodates the front-end compiled code in bundles created by Webpack; we can see that by examining (via Chrome Dev Tools) index.html which includes these bundles. As to fully understand that, these bundles are not physically located anywhere; they are loaded in memory and are accessible via Webpack Dev Server. If we run the front-end app independently, we can access this Dev server by localhost:4200 (Angular) or localhost:3000 (React). So, my question is:

Is my above analysis correct? If we launch IIS server, is there any Webpack Dev Server which serves the front-end or the former one serves the front-end bundles?

If there is a Webpack Dev server, then we have two servers and we should solve CORS issues. If there is not, how IIS takes care of issues like Hot Module Replacement(HMR)? What's the exact role of middleware UseAngularCliServer?

解决方案

According to your comment under my answer here, I guess you misunderstood the CORS concept. Quoted from MDN :

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.

CORS is used to control the behavior of Browser(or Browser-like client , e.g Electron ).

---

In this scenario, the browser didn't know anything about the Webpack Dev server, so there will be NO CORS problems at all:

+-------+          +------+               +--------+
|       |          |      |               |        |
|       |          |      |               |        |
|       +---------->      |               |        |
|       |  Request |      +--------------->        |
|       |          |      |               | Kestrel|
|Browser|          | IIS  | Reverse Proxy |        |
|       |Response  |      |               |        |
|       <----------+      <---------------+        |
|       |          |      |               |                   +-------------+
|       |          |      |               |  For Spa Requests:|             |
|       |          |      |               |  -----------------> Webpack Dev |
|       |          |      |               |        |  Proxy   |  Server     |
|       |          |      |               |        <----------+             |
+-------+          -------+               +--------+          +-------------+

1. The browser only talks to IIS. And then IIS proxies the requests to your ASP.NET Core Kestrel server(since you're using ASP.NET Core 2.1, I assume it's running in out-of-process mode).
2. Be aware it is your Kestrel server who sends the requests to Webpack Dev Server. Your Kestrel acts as a proxy and forwards related requests to Webpack Dev Server when in Development environment.

As you can see, the browser sends all its traffic to IIS and also gets all the responses from IIS. The browser knows only one server , i.e. IIS .

Also, IIS has no idea about the HMR. When developer accesses this SPA page, there's a WebSocket connection set up between your browser and IIS. IIS just forwards it to Kestrel. And then Kestrel forwards it to your Webpack Dev Server. When developer changes the source code of SPA, the file watcher will notify the browser to reload dynamically.

---

[Edit] : To answer your answer question

Is it possible to find the port on which Webpack Dev Server is launched? localhost:xxxx

This port is computed dynamically at run-time. ASP.NET Core doesn't expose an API for developer to access it. But as a walkaround to know the port number, you can find it in your log information.

For example, I'm using VS Code to debug the App:

这篇关于创建Angular/React应用程序时的.Net本地服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！