Angular Universal：如何推向生产环境？

Question

我刚开始探索Angular Universal和服务器端渲染。我有一个现有的项目，使用Angular Universal指南，我已经将其运行起来了。

然而，文档没有明确说明如何将其应用于生产环境。

---

• 我需要两个不同的构建版本吗，一个用于浏览器，另一个由NodeJS / Express应用程序提供服务？
• 我是否需要像NGINX这样的负载均衡器，将请求转发到Build 1或Build 2？
• 总的来说，我的问题是：在成功按照Angular Universal指南操作后，如何将Angular应用程序推向生产环境？

---

目前，在所有构建命令完成后，我最终会得到一个看起来像这样的 /dist 文件夹：

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

- Dzhuneyt

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

- David

Answer 2

使用Universal，客户端和服务器应用程序一起工作。

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

一些请求需要在加载页面之前（在ngOnInit之前）执行，这些请求需要由服务器应用程序执行以呈现动态html。

其他请求不需要由服务器运行，应该由客户端应用程序完成。

为了处理这个问题，您应该使用transferState，以避免重复运行同一个请求。

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

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

http://pm2.keymetrics.io/

- lovis91