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

我一直在寻找在启用“服务器端渲染”的服务器上托管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才能安装.哪种方式对我来说似乎不对?

任何人都可以帮助我托管我的应用程序启用“服务器端呈现”.

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

是.不幸的是,我使用的是Nginx.但是,这种方法在Apache或其他方面不应该有任何不同.

这就是我在生产中托管我的服务器端渲染角度应用程序的方式(我在DO上).我写了一篇关于它的文章on my blog

在构建SSR之后,你应该有这样的东西:

enter image description here

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

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

它应该在localhost:4000上运行

下面的Nginx虚拟服务器块应该通过您的Nginx将所有请求代理到服务器端呈现角色应用程序.

下面的nginx conf实际上既可以提供角度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?;
}

我希望这可以帮助你.

相关文章
相关标签/搜索