Angular Universal：如何转向生产？答案

【问题标题】：Angular Universal: How to move to production?Angular Universal：如何转向生产？
【发布时间】：2019-08-12 01:50:09
【问题描述】：

我刚刚开始探索 Angular 通用和服务器端渲染。我有一个现有项目，我使用Angular Universal's guide 运行它。

但是，文档没有说明的是，我如何将其应用于生产？

我是否需要 2 个单独的构建，一个用于浏览器，一个由 NodeJS/Express 应用程序提供服务？
我是否需要一些东西（例如 NGINX）来充当负载平衡器并将请求转发到 Build 1 或 Build 2？
一般来说，我的问题是：在成功遵循 Angular Universal 的指南后，如何将 Angular 应用程序投入生产？

目前，在所有构建命令之后，我最终得到一个如下所示的 /dist 文件夹：

/dist/browser/（包含 index.html 文件）
/dist/server/（仅包含 main.js）
/dist/server.js

【问题讨论】：

标签： angular angular-universal

【解决方案1】：

当请求到达后端服务器 (/dist/server.js) 时，服务器将使用服务器包 (dist/server/main.js) 呈现页面 html。该页面将包含生成的 html 和内联的 css，以便在浏览器上快速显示。之后，浏览器还将下载客户端包 (dist/browser/*) 并执行它。

通用服务器不应该直接暴露；您可以使用 nginx 转发请求。这是一个基本的配置示例

server {
    listen 80;
    #...
    root /project/dist/browser;

    location / {
        index index.html;
        #Tries static files, otherwise transfers the request to the nodejs server
        try_files $uri  @universal;
    }


    location @universal {
        #port defined in your server.js
        proxy_pass http://localhost:4000; 
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

    }

要在生产中运行nodeJS服务器，建议使用Louis R指出的pm2。如果你只是想测试原理，只需运行node dist/server.js

【讨论】：

【解决方案2】：

使用 Universal，客户端和服务器应用程序可以协同工作。

基本上你可以将你的请求分成两种类型：

加载页面需要一些（在 ngOnInit 之前），这些请求需要由服务器应用程序执行以呈现您的动态 html。
其他请求不需要由服务器运行，应该由客户端应用程序完成。

要处理这个问题，您应该使用 transferState，以避免运行两次相同的请求。

https://angular.io/api/platform-browser/TransferState

要部署您的应用程序，您将需要 Nginx 或 Apache，指向您 server.ts 中使用的端口。要为您的应用程序提供服务，您只需启动您的节点服务器（在 Angular 文档中使用 express），例如使用 pm2 来管理您的服务器：

http://pm2.keymetrics.io/

【讨论】：