Nginx conf for prerendering Angular SPA

Question

So I have next configuration for my Angular SPA app:

server {
        listen 80;
        server_name idj.rtech.rs;
        return 301 https://example.com$request_uri;
}

server {

        listen 443 ssl; # managed by Certbot
        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
        include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

        root /var/www/example.com/dist;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name idj.rtech.rs;

        location / {

            # First attempt to serve request as file, then
            # as directory, then fall back to displaying a 404.
            try_files $uri @prerender;
        }

        location @prerender {
        #proxy_set_header X-Prerender-Token YOUR_TOKEN;

        set $prerender 0;
        if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
            set $prerender 1;
        }
        if ($args ~ "_escaped_fragment_") {
            set $prerender 1;
        }
        if ($http_user_agent ~ "Prerender") {
            set $prerender 0;
        }
        if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
            set $prerender 0;
        }

        #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
        resolver 8.8.8.8;

        if ($prerender = 1) {

            #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
            set $prerender "service.prerender.io";
            rewrite .* /$scheme://$host$request_uri? break;
            proxy_pass $prerender;
        }
        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }
}

But still, my app, when shared on fb or any social media, is just getting static tags, or not tags at all.

Can someone point out where the mistake is, and what I am doing wrong?

Should I also set anything in angular (except dynamic updating tags), or is it just for nginx config?

Also I heard about rendertron, is that easier to setup? What's the nginx conf for that?

UPDATE 1:

So hitting: curl http://127.0.0.1:3010/https://example.com is returning the prerendered page (I am hosting prerender on port 3010)

Hitting curl https://example.com is returning static angular.

Hitting curl -A "twitterbot" https://example.com doesn't return anything.

Hitting curl -A "twitterbot" -v https://example.com returns following:

< HTTP/1.1 400 Bad Request
< Server: nginx/1.10.3 (Ubuntu)
< Date: Wed, 19 Sep 2018 11:16:54 GMT
< Content-Type: text/html;charset=UTF-8
< Transfer-Encoding: chunked
< Connection: keep-alive
< Vary: Accept-Encoding

Answer 1

In your case, the try_files might be serving back the index page when it test the $uri before @prerender is even run. Can you try the following config where I've moved the try_files after the prerender config?

server {
        listen 80;
        server_name idj.rtech.rs;
        return 301 https://example.com$request_uri;
}

server {

        listen 443 ssl; # managed by Certbot
        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
        include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

        root /var/www/example.com/dist;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name idj.rtech.rs;

        location / {

            #proxy_set_header X-Prerender-Token YOUR_TOKEN;

            set $prerender 0;
            if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
                set $prerender 1;
            }
            if ($args ~ "_escaped_fragment_") {
                set $prerender 1;
            }
            if ($http_user_agent ~ "Prerender") {
                set $prerender 0;
            }
            if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
                set $prerender 0;
            }

            #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
            resolver 8.8.8.8;

            if ($prerender = 1) {

                #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
                set $prerender "service.prerender.io";
                rewrite .* /$scheme://$host$request_uri? break;
                proxy_pass $prerender;
            }

            try_files $uri $uri/ =404;
        }
}