How to proxy /grafana with nginx?

I've setup and started default grafana and it works as expected on http://localhost:3000. I'm trying to proxy it with nginx where I have ssl installed. I'm trying to have it respond to https://localhost/grafana but it just serves the following:

{{alert.title}}

I have this in my nginx server block:

location /grafana {
     proxy_pass         http://localhost:3000;
     proxy_set_header   Host $host;
}

It seems nginx supports rewriting the requests to the proxied server so updating the config to this made it work:

location /grafana {
     proxy_pass         http://localhost:3000;
     rewrite  ^/grafana/(.*)  /$1 break;
     proxy_set_header   Host $host;
}

My grafana.ini also has an updated root:

[server]
root_url = %(protocol)s://%(domain)s:%(http_port)s/grafana

Adding on to @AXE-Labs answer, you don't need to rewrite the URL.

nginx.conf

location /grafana/ {
     proxy_pass         http://localhost:3000/;
     proxy_set_header   Host $host;
}

grafana.ini update root:

[server]
root_url = %(protocol)s://%(domain)s:%(http_port)s/grafana/

Notice the additional / in the location block, that makes all the difference.

If you want to see the entire file, please visit https://gist.github.com/mvadu/5fbb7f5676ce31f2b1e6 where I have rever proxy setup for Infludb as well as grafana.

I got the same problem when using nginx and grafana on docker, in two different containers. Passed the following options to docker-compose on grafana service, following http://docs.grafana.org/installation/behind_proxy/#nginx-configuration-with-sub-path:

- GF_SERVER_DOMAIN=foo.bar.com
- GF_SERVER_ROOT_URL=%(protocol)s://%(domain)s:/grafana

But it didn't work, and my browser's console shows: net::ERR_CONTENT_LENGTH_MISMATCH.

So, to fix it, I added the following line to my nginx config:

location /grafana/ {
  proxy_pass http://monitoring_grafana:3000/;
  proxy_max_temp_file_size 0; # THIS MADE THE TRICK!
}