创建 Angular/React 应用程序时的 .Net 本地主机服务器

IT技术 angular reactjs asp.net-core
2021-05-03 02:27:05

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

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

在启动前端部分（Angular 或 React）的Webpack Dev server同时，也会启动一个，用于容纳 Webpack 创建的 bundles 中的前端编译代码；我们可以通过检查（通过 Chrome 开发工具）index.html包含这些包来看到这一点。为了完全理解，这些捆绑包在物理上并不位于任何地方；它们被加载到内存中并且可以通过 Webpack Dev Server 访问。如果我们独立运行前端应用程序，我们可以通过localhost:4200 (Angular) 或localhost:3000 (React)访问这个 Dev 服务器。所以，我的问题是：

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

如果有 Webpack Dev 服务器，那么我们有两台服务器，我们应该解决 CORS 问题。如果没有，IIS 如何处理诸如Hot Module Replacement(HMR)？中间件的确切作用是UseAngularCliServer什么？

1个回答

根据您在我的回答下的评论，我猜您误解了 CORS 概念。引用自 MDN：

跨源资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头告诉浏览器让在一个源上运行的 Web 应用程序可以访问来自不同源的选定资源。

CORS 用于控制 浏览器（或类似浏览器的客户端，例如Electron）的行为。

在这种情况下，浏览器不知道有关的WebPack开发服务器什么，所以就会有否在所有CORS问题：

+-------+          +------+               +--------+
|       |          |      |               |        |
|       |          |      |               |        |
|       +---------->      |               |        |
|       |  Request |      +--------------->        |
|       |          |      |               | Kestrel|
|Browser|          | IIS  | Reverse Proxy |        |
|       |Response  |      |               |        |
|       <----------+      <---------------+        |
|       |          |      |               |                   +-------------+
|       |          |      |               |  For Spa Requests:|             |
|       |          |      |               |  -----------------> Webpack Dev |
|       |          |      |               |        |  Proxy   |  Server     |
|       |          |      |               |        <----------+             |
+-------+          -------+               +--------+          +-------------+
  1. 浏览器只与 IIS 对话。然后IIS将请求代理到您的 ASP.NET CoreKestrel服务器（由于您使用的是ASP.NET Core 2.1，我假设它以进程外模式运行）。
  2. 请注意，是您的Kestrel服务器将请求发送到 Webpack Dev Server。您Kestrel在开发环境中充当代理并将相关请求转发到 Webpack Dev Server。

如您所见，浏览器将所有流量发送到 ，IIS并从IIS. 浏览器只知道一台服务器，即 IIS。

此外，IIS 对 HMR 一无所知。当开发人员访问该页面的SPA，有一个WebSocket连接您的浏览器之间建立IIS。IIS只是将其转发到Kestrel. 然后Kestrel将其转发到您的Webpack Dev Server. 当开发者更改 SPA 的源代码时，该文件watcher会通知浏览器动态重新加载。

[编辑]：回答你的回答问题

是否可以找到启动 Webpack Dev Server 的端口？本地主机：xxx

这个端口是在运行时动态计算的。ASP.NET Core 不公开 API 供开发人员访问。但作为一个外观图释知道端口号，你可以在你找到它的日志信息。

例如，我使用 VS Code 来调试应用程序：

在此处输入图片说明

其它你可能感兴趣的问题
上一篇在父类中扩展类和使用类属性 下一篇Angular 1.X ng-options 等效使用 React