如何在prod服务器上部署带有服务器端呈现的Angular 4应用程序

Question

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

首先,我已经知道如何托管Angular 4应用程序(没有服务器端渲染).但是我的主要关注点是我想启用我的应用程序 - 服务器端渲染.

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

我的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

任何人都可以帮助我托管启用了“服务器端渲染”的应用程序。

是的。不幸的是，我使用 Nginx。但是，这种方法在 Apache 或诸如此类的东西中不应该有任何不同。

所以这就是我在生产中托管我的服务器端渲染 Angular 应用程序的方式（我正在做）。我在我的博客上写了一篇关于它的文章：

在构建你的 SSR 之后，你应该有这样的东西：

在您设法将dist/文件夹中的所有内容发送到远程服务器后，您可以使用它来运行它pm2（这是我用来运行我的节点应用程序的方法）

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

它应该继续运行 localhost:4000

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

下面的 nginx conf 实际上同时提供了 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?;
}

我希望这可以帮助你。

Answer 2

其实很简单。

使用 shell 转到 Angular 4 项目的目录。并执行以下操作：

$ ng build --prod

这将编译应用程序，结果位于Angular 应用程序根目录的dist文件夹中。

现在您只需将dist文件夹的内容放入 HTTP 服务器并吃爆米花即可。

Cdly，杰里·永布森。