nginx, prerender and angular routing issue - angularjs

Question

I am developing a dynamic angular website (using html5mode to remove the #). It uses Elasticsearch to grab some data and render the contents. nginx is responsible for the mapping to Elasticsearch and my website root.
In order to get the whole site SEO-capable, I am trying to integrate prerender, using a local instance (http://localhost:3000).
I am desperately trying to do apply the prerender magic in combination with an nginx location /angular_test. The default nginx prerender middleware config does not work for locations. Find below my nginx configration:
upstream elasticsearch {
zone elasticsearch 64K;
server localhost:9200;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name angular_test_server;
location /angular_test {
rewrite_log on;
error_log /var/log/nginx/localhost.error_log notice;
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)") {
set $prerender 0;
}
if ($prerender = 1) {
rewrite .* /$scheme://$host$request_uri?;
proxy_pass http://localhost:3000;
break;
}
# support html5mode of angular (fallback to index.html and let angular do the routing)
try_files $uri $uri/ /angular_test/index.html;
}
location /es/ {
rewrite /es/(.*) /$1 break;
proxy_pass http://elasticsearch;
proxy_redirect http://elasticsearch /es/;
}
}
When I access http://localhost/angular_test/search?_escaped_fragment_= I get a 404 because nginx tries to load the file /var/html/www/angular_test/search. This should be covered by angulars routing (see try_files doing a try on the index.html). http://localhost/angular_test?_escaped_fragment_= works just fine
When I use something like the following (as propsed here https://gist.github.com/thoop/8165802), it does not even get into the #prerender location part.
location /angular_test {
# support html5mode of angular (fallback to index.html and let angular do the routing)
try_files $uri $uri/ /angular_test/index.html #prerender;
}
Is there any way to get this setup running with prerender? I have the feeling that I do not use nginx in the right way here...

Answer 1

I figured out the solutions. If is really evil in nginx locations!
It works when the if(...) logic is moved out of the location and to the server. Here is my final configuration:
upstream elasticsearch {
zone elasticsearch 64K;
server localhost:9200;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name angular_test_server;
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)") {
set $prerender 0;
}
location /angular_test {
rewrite_log on;
error_log /var/log/nginx/localhost.error_log notice;
#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 "$host:3000";
rewrite .* /$scheme://$host$request_uri? break;
proxy_pass http://localhost:3000;
}
# support html5mode of angular (fallback to index.html and let angular do the routing)
try_files $uri $uri/ /angular_test/index.html;
}
location /es/ {
rewrite /es/(.*) /$1 break;
proxy_pass http://elasticsearch;
proxy_redirect http://elasticsearch /es/;
}
}