Search code examples
angularnginxelixirphoenix-frameworkprerender

How to Setup Prerender for a Phoenix Application


We're running Prerender on localhost:3000 and our web application is running on localhost:39499. The problem with our site is that Google is not able to see the javascript that's running in Angular.js on our Phoenix application. Our issue is that Pheonix runs a proxy in nginx from the domain name to it's port on localhost, which is preventing us from also running a proxy on nginx to the port where Prerender is being hosted on the server. We would like the nginx to have a nested proxy setup so we go to port 39499 and then to port 3000 if possible. Is there a way to do this on a server with both services running?

Here is our nginx config file in sites-enabled:

# -*- mode: nginx -*-
upstream broad_highway {
    server 127.0.0.1:39499;
}

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


    listen 80;
    listen [::]:80;
    server_name meetings.aahmbny.org;

    location / {
        return 301 https://meetings.aahmbny.org$request_uri;
    }

    # for LetsEncrypt
    location '/.well-known/acme-challenge' {
        default_type "text/plain";
        root /tmp/letsencrypt-auto;
    }


}

server {
    listen 80;
    listen [::]:80;
    server_name beta.meetings.aahmbny.org;

    location / {
        return 301 https://beta.meetings.aahmbny.org$request_uri;
    }

    # for LetsEncrypt
    location '/.well-known/acme-challenge' {
        default_type "text/plain";
        root /tmp/letsencrypt-auto;
    }
}

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name meetings.aahmbny.org;
    gzip on;
    gzip_proxied any;
    ssl_certificate /etc/letsencrypt/live/meetings.aahmbny.org/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/meetings.aahmbny.org/privkey.pem; # managed by Certbot
    ssl_trusted_certificate /etc/letsencrypt/live/meetings.aahmbny.org/fullchain.pem;

    add_header X-Frame-Options DENY;
    add_header X-Content-Type-Options nosniff;

    location = /index.html {
        rewrite  ^ / permanent;
        try_files /index.html =404;
    }

    location / {
        try_files $uri @proxy;
    }

    location /sitemaps {
        alias /home/broad-highway/sitemaps/;
    }

    location @proxy {
        proxy_redirect off;
        proxy_pass http://broad_highway;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host localhost:3000$http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    access_log /var/log/nginx/broad-highway-access.log;
    error_log /var/log/nginx/broad-highway-error.log;

}

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name beta.meetings.aahmbny.org;
    gzip on;
    gzip_proxied any;
    ssl_certificate /etc/letsencrypt/live/beta.meetings.aahmbny.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/beta.meetings.aahmbny.org/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/beta.meetings.aahmbny.org/fullchain.pem;

    add_header X-Frame-Options DENY;
    add_header X-Content-Type-Options nosniff;

    location / {
        try_files $uri @proxy;
    }

    location /sitemaps {
        alias /home/broad-highway/sitemaps/;
    }

    location @proxy {
        proxy_redirect off;
        proxy_pass http://broad_highway;
        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_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    access_log /var/log/nginx/broad-highway-access.log;
    error_log /var/log/nginx/broad-highway-error.log;
}

Solution

  • You might try something like this in order to proxy_pass to your prerender server for crawlers or proxy_pass to your normal server for users:

    location @proxy {
        proxy_redirect off;
    
        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 http://$prerender;
        }
    
        proxy_pass http://broad_highway;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host localhost:3000$http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }