how to configure nginx with angular ssr and pm2

Question

I have a problem that I really no longer know how to configure nginx with pm2 so that when I do f5 it redirects and works for me when they share a link from the web. Currently in Angular Universa I did npm run build: ssr. I create a dist folder and server.js file. Run in pm2 start .... / server.js --name apiweb. Then in nginx configure the file like this.

upstream ssr_khophi_nodejs {
    server 127.0.0.1:4002;
}

server {
        listen 80;
        listen [::]:80;
        root /var/www/fm/html;
        index index.html index.htm;
        server_name www.fm.com.ar fm.com.ar;

    location / {
        try_files $uri @backend;
    }
    location @backend {
        proxy_pass http://ssr_khophi_nodejs;
        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;
    }
}

Does anyone know how the correct configuration would be so that when I do f5 on the web it does not redirect me to the correct link, it tells me "Internal Server Error". I don't know if it is pm2 or angular or nginx.

Regards!

score 2 · Accepted Answer · edited Nov 17 '21 at 13:44

use this as your server block:

server {
    listen 80;
    server_name modernamedia.no;
    location / {
        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;
    }
}

be careful check server.ts and should code like this

  const distFolder = join(process.cwd(), './dist/browser');

and then go angular.json

change all outputPath ( server & client )

 "outputPath": "dist/browser",

 "outputPath": "dist/server",

and now no 500 Internal Server Error

score -1 · Answer 2 · answered Nov 17 '21 at 13:44

server {
    listen 80;
    server_name _;
    location / {
        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;
    }
}

be careful check server.ts and should code like this

  const distFolder = join(process.cwd(), './dist/browser');

and then go angular.json

change all outputPath ( server & client )

 "outputPath": "dist/browser",

 "outputPath": "dist/server",

and now no 500 Internal Server Error

how to configure nginx with angular ssr and pm2

2 Answers2