.Net localhost серверы при создании приложений Angular / React

Question

Я использую VS2017 / 2019 и .NET Core 2.1 для создания Angular или React приложений.Angular-CLI или create-react-app используется для настройки всего. Все следующее относится к этапу разработки :

Когда мы создаем наш проект .NET, запускается сервер IIS express для размещения нашего приложения.назовите его localhost: 19500 .

В то же время, когда запускается передняя часть (угловая или реактивная), также запускается Webpack Dev server, который вмещает переднюю-конечный скомпилированный код в пакетах, созданных Webpack;мы можем увидеть это, изучив (с помощью Chrome Dev Tools) index.html, который включает эти пакеты.Что касается полного понимания того, что эти пучки физически нигде не расположены;они загружаются в память и доступны через Webpack Dev Server.Если мы запускаем внешнее приложение независимо, мы можем получить доступ к этому серверу разработки с помощью localhost: 4200 (Angular) или localhost: 3000 (React).Итак, мой вопрос:

Правильно ли проведенный выше анализ?Если мы запускаем IIS-сервер, есть ли какой-либо Web-сервер Dev Server, который обслуживает интерфейс, или первый сервер, обслуживающий интерфейсные пакеты ?

Если естьсервер Webpack Dev, тогда у нас есть два сервера, и мы должны решить вопросы CORS.Если нет, как IIS решает такие проблемы, как Hot Module Replacement(HMR)?Какова точная роль промежуточного программного обеспечения UseAngularCliServer?

Answer 1

Согласно вашему комментарию под моим ответом здесь, я думаю, вы неправильно поняли концепцию CORS.Цитируется из MDN :

Распределение ресурсов между источниками (CORS) - это механизм, который использует дополнительные заголовки HTTP, чтобы сообщить браузерам , что веб-приложение должно работать.в одном источнике доступ к выбранным ресурсам из другого источника.

CORS используется для управления поведением Browser (или Browser-like client ,например, Electron).

---

В этом сценарии браузер ничего не знал о сервере Webpack Dev, поэтому будет NO CORSвообще проблемы:

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

1. Браузер общается только с IIS .А затем IIS передает запросы на ваш сервер ASP.NET Core Kestrel (поскольку вы используете ASP.NET Core 2.1, я предполагаю, что он работает в внепроцессном режиме ).
2. Имейте в виду, это ваш Kestrel сервер, который отправляет запросы на Webpack Dev Server .Ваш Kestrel действует как прокси-сервер и перенаправляет связанные запросы на Webpack Dev Server, когда находится в среде разработки.

Как видите, браузер отправляет весь свой трафик на IIS, а также получает все ответы от IIS.Браузер знает только один сервер, т.е. IIS.

Кроме того, IIS не имеет представления о HMR.Когда разработчик обращается к этой странице SPA, между вашим браузером и IIS устанавливается соединение WebSocket .IIS просто пересылает его на Kestrel.А затем Kestrel пересылает его на ваш Webpack Dev Server.Когда разработчик изменяет исходный код SPA, файл watcher уведомит браузер о динамической перезагрузке.

---

[Редактировать] : Чтобы ответить на ваш вопрос ответа

Можно ли найти порт, на котором запущен Web Pack Dev Server?localhost: xxxx

Этот порт вычисляется динамически во время выполнения.ASP.NET Core не предоставляет API для разработчика, чтобы получить к нему доступ.Но как обход , чтобы узнать номер порта, вы можете найти его в вашей log информации.

Например, я использую VS Code для отладки приложения: