关于 .NET Core 3.1 和 Angular SSR spa.UseSpaPrerendering 替代方案的问题

Question

我创建这篇文章是为了从社区中获得一些见解。不久前，随着 .NET Core 3.0 的发布，众所周知且广泛使用的用法spa.UseSpaPrerendering已被标记为过时。

大约在 2019 年初，我在一个使用 Angular 但需要 SEO 和更好的加载性能的项目中使用 .NET Core 实现了 SSR。

1 年后（现在，2020 年初），他们希望在不同的项目中也有同样的情况。但它已经使用了 Core 3.1。我们立即注意到了 Depricated 标志，所以我开始寻找自己做的方法。

根据过去的经验，SSR 问题有两部分，第一部分是让您的 Angular 应用程序能够在服务器端实际运行。因此，摆脱或解决所有无法在服务器端执行的东西（解决窗口 API 的使用，通过在 Angular 中使用 isPlatform 东西）。第二部分是实际让 .NET Core 启动 Angular CLI 以开始实际的预渲染。这是使用UseSpaPrerendering.

分析告诉我们自己解决问题的文档并检查我过去的代码，事情实际上开始变得有意义了。

我查看了 package.json 文件中的命令，执行的 2 个主要命令build:ssr实际上是预编译浏览器/... 文件旁边的整个 server/main.js。第二个命令是serve:ssr，它将由UseSpaPrerendering代码执行（至少这是我的假设）。

在实践中，我们的 CI/CD 将执行build:ssr并发布所有文件到运行 .NET Core 运行时的应用服务器。并使用UseSpaPrerendering代码然后执行serve:ssr.

现在跳到我需要找到解决方案的现在。我想我也可以自己运行必要的命令。所以在我的 Angular 中排除了一些非 SSR 兼容的代码后，我自己运行了build:ssr命令，然后是serve:ssr命令。效果很好，我的 Angular 应用程序是 SSR 渲染的，由节点本身而不是 .NET Core 提供。

下一步是我在我的 .NET Core 启动文件中尝试过。现在我build:ssr自己做了（因为在生产中它会由 CI/CD 完成）并且我start在 package.json 中重新编写了脚本来运行命令npm run serve:ssr。我使用spa.UseAngularCliServer(npmScript: "start");startup.cs 中的代码启动了该命令，然后我就拥有了它，我的 .NET Core 运行时同时启动了我的 API 和我的 SSR Angular 应用程序。

到目前为止一切顺利，但现在只有 1 个问题。我的 SSR Angular 默认托管在端口 4000 上，并且还侦听该端口（我可以在输出中看到），而我的 API 侦听端口 5000(http) 和 5001(https)。

所以现在我有几个关于这个的问题：

1. 这是现在这样做的正确方法吗？
2. 我如何确保在生产中，当人们进入我的应用程序时，节点侦听器将启动？
3. 如果我将 .NET Core API 和 Angular SSR 应用程序完全分开会更好吗？因此也分别部署它们？

Answer 1

当涉及到在 azure 或其他东西上部署项目时，我也在 netcore 3.1 和 Angular 上苦苦挣扎。你发现了什么吗？能提供一下你的启动文件吗？当我使用 dotnetpublish 时，package.json 不会复制到publish/ClientApp 目录，因此使用的命令spa.UseAngularCliServer()失败或者只是找不到/index.html。

现在，我在本地运行我的项目，如下所示：

app.UseSpa(spa =>
  {
    spa.Options.SourcePath = "ClientApp";
    if (env.IsDevelopment())
    {
      spa.UseAngularCliServer(npmScript: "dev:ssr");
    }
  });