Deploy Angular 17+ Server Side Rendering with Nginx as Proxy

You’re ready to deploy your Angular 17+ Server Side Rendering application, and wanna do it with Nginx sitting in front. Good. Welcome!

Below is the configuration code I use regarding Nginx.

But first, to run the SSR of Angular on the server, I use pm2. I’m not the one to teach you how to install pm2 or what pm2 is. 😉

Start the Angular pm2 service like so:

$ pm2 start ~/to-angular-build-folder/dist/server/server.mjs --name ssr.angular
$ pm2 status

│ id │ name               │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├────┼────────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0  │ ssr.angular    │ default     │ N/A     │ fork    │ 368436   │ 20m    │ 0    │ online    │ 0%       │ 45.1mb   │ your-username │ disabled │

$ pm2 startup

$ pm2 save

Note that, by default, SSR runs on port 4000. Therefore if you wanna change that, you should change that in your server.js file in your Angular root folder, BEFORE the build. Or you can override it with your env variable upon starting the SSR in PM2

Now to the Nginx.

upstream ssr_edu_node {
    server 127.0.0.1:4000; # angular running via pm2
}


server {
    listen 80;

    server_name my.domain;

    root /home/username/apps/angular/dist/edu/browser;

    error_log /var/log/nginx/angular-error.log;
    access_log /var/log/nginx/angular-access.log;

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

    # Add and remove as you wish
    location @ssr-backend {
        proxy_pass http://ssr_edu_node; # but leave this alone
        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;
    }


    listen 443 ssl; # managed by Certbot
    #.....
    # certbot ssl config here. Usually automatically added.
}

server {
    if ($host = my.domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen  80;
    server_name my.domain;
    return 404; # managed by Certbot
}

And so that’s how you get your Angular SSR to be served by Nginx. Since Nginx sits in front, you get to use all the goodness of Nginx, including Caching, Load Balancing, Rate limiting and whatever you wish, although you may not need it, since Angular is outta the box extensively optimized and ready to scale!

Hope to catch you in the next one. Cheers!