Question

我刚刚开始探索Angular Universal和Server Side Rendering。我有一个现有项目，可以使用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

Answer 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

Answer 2

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

基本上，您可以将请求分为两种类型：

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

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

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

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

http://pm2.keymetrics.io/

Angular Universal：如何转向生产？

2 个答案: