How to deploy Angular 11 Universal to Ubuntu Nginx

Question

I am trying to migrate from my existing CSR Application to Angular Universal SSR and now looking to deploy on production server.

Existing configuration is with Ubunto 18.04 and Nginx with .Netcore 3.1 backend API.

Existing directory structure is:

--html
---All .dotnet assemblies and dlls
---wwwroot
----Angular files

Now after building with cli

npm run build:ssr

As per Angular 11, I have two directories:

server
browser

here I am not clear exactly where to put these directories. Should I put contents of Browser Directory inside wwwroot folder as these files are for Client side rendering?
where to put server directory?
Do I need to install nodejs or express on the server?

FYI, I have this configuration which is working perfectly with CSR:

server {
    listen 80;
    return 301 https://$host$request_uri;
}

server {
    listen 443 default ssl;
    server_name website.com;
    ssl_session_cache  builtin:1000  shared:SSL:10m;
    ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
    ssl_prefer_server_ciphers on;
    gzip on;
    gzip_static on;    
    gzip_types font/woff2 text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
    gzip_proxied  any;
    gzip_vary on;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;

         location / {
           index index.html
         #try_files $uri$args $uri$args/ /index.html;
        #try_files $uri $uri/ /index.php?$args;
         #try_files $uri $uri/ index.html;
        #try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;
        #expires -1;
            add_header Pragma "no-cache";
            add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
            try_files $uri$args $uri$args/ $uri/ /index.html =404;
        root /home/winnie/www/html/wwwroot;
    }

        location /api/ {
             proxy_pass http://localhost:5000;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection keep-alive;
             proxy_set_header Host $host;
             proxy_cache_bypass $http_upgrade;
            proxy_redirect http://localhost:5000 https://website.com;
        root /home/winnie/www/html;
        }

        location /content/ {
             proxy_pass http://localhost:5000;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection keep-alive;
             proxy_set_header Host $host;
             proxy_cache_bypass $http_upgrade;
            proxy_redirect http://localhost:5000 https://website.com;
        root /home/winnie/www/html;
        }


    ssl_certificate /etc/letsencrypt/live/website.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/website.com/privkey.pem; # managed by Certbot
}

I am just looking to tweak into this configuration to handle Angular SSR Request.

Have gone through many articles like

https://github.com/angular/universal-starter/issues/514 comment from m98

But here in my case there is no server.js file.

https://blog.daudr.me/painless-angular-ssr/ article also gives some insight but not with much clarity.

Hope you guys a best way to deploy.

How to deploy Angular 11 Universal to Ubuntu Nginx

0 Answers