node.js - 如何在 prod 服务器上部署具有服务器端渲染的 Angular 4 应用程序

Question

我一直在寻找大约 3 个小时来在启用了“服务器端渲染”的服务器上托管 Angular 4 应用程序。注意 - 我有一个安装了 Apache (Ubuntu) 的 AWS 服务器。

首先，我已经知道如何托管 Angular 4 应用程序(没有服务器端渲染)。但在这里我主要关心的是我想让我的应用程序启用 - 服务器端渲染。

在我的本地，我使用 npm start 命令，它会自动在 - http://localhost:4000< 上为应用程序提供服务(启用服务器端渲染)/p>

我的 package.json 文件如下所示:

...
"scripts": {
    "serve": "ng serve",
    "prestart": "ng build --prod && ngc && webpack",
    "start": "node dist/server.js",
    "build": "ng build"
},
...

所有这些命令都运行良好。但我很困惑，我应该再次运行

npm start

在生产服务器上，因此它还需要安装 node_modules。在我看来，哪种方式不正确？

谁能帮我托管启用“服务器端渲染”的应用程序。

Answer 1

Can anyone please help me with hosting my app with "server-side rendering" enabled.

是的。不幸的是，我使用 Nginx。但是，这种方法在 Apache 等中应该没有什么不同。

这就是我在生产中托管我的服务器端渲染 Angular 应用程序的方式(我正在做)。我写了一篇关于它的文章on my blog :

构建你的 SSR 后，你应该有这样的东西:

在您设法将 dist/ 文件夹中的所有内容发送到远程服务器后，您使用 pm2 运行它(这是我用来运行我的 Node 应用程序的)

运行pm2 start path/to/dist/server.js --name name_of_process

它应该在 localhost:4000

上运行

下面的 Nginx 虚拟服务器 block 应该将所有请求通过 Nginx 代理到服务器端渲染 Angular 应用程序。

下面的 nginx 配置实际上为您的 Angular SSR 提供​​静态服务，并在请求不是针对静态文件时回退到代理。

upstream ssr_khophi_nodejs {
    server 127.0.0.1:4000;
}

server {
    listen 443 ssl http2;

    server_name staging.khophi.com; # <--- Change this part

    include /etc/nginx/ssl/ssl-params.conf;# <--- Ignore this part if not using SSL
    include /etc/nginx/ssl/khophi.com.ssl;# <--- Ignore this part if not using SSL

    root /home/khophi/khophi.com/ssr/dist/browser; # <-- Notice where we're point to

   location / {
        try_files $uri $uri @backend; # <--- This looks for requests (statics i.e js/css/fonts)
                                      # in /ssr/dist/browser folder. If nothing found, calls @backend
    }

    location @backend {
        # NOTE THERE IS NO TRAILING SLASH AT THE END. NO TRAILING SLASH. NO SLASH. NO!
        proxy_pass http://ssr_khophi_nodejs; # <--- THIS DOES NOT HAVE A TRAILING '/'
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

server {
    listen 80;
    server_name staging.khophi.com;
    return 301 https://$server_name$request_uri?;
}

希望对你有帮助。