When trying to access Grafana through an Nginx reverse proxy at https://localhost/grafana, you might encounter unrendered template tags like {{alert.title}} instead of the proper Grafana interface. This typically happens when the proxy configuration isn't properly handling the paths and headers.

Here's a proper Nginx configuration that handles both the path rewriting and necessary headers:

location /grafana/ {
    proxy_pass http://localhost:3000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    # Important for WebSocket connections
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    
    # Adjust timeouts if needed
    proxy_read_timeout 90;
}

You'll also need to configure Grafana to work behind a proxy by modifying /etc/grafana/grafana.ini:

[server]
domain = yourdomain.com
root_url = %(protocol)s://%(domain)s/grafana/
serve_from_sub_path = true

1. Missing Trailing Slash: Notice the trailing slashes in both the location block and proxy_pass. This ensures proper path rewriting.

2. WebSocket Support: Grafana uses WebSockets for live features. Without the Upgrade headers, some functionality may break.

3. Cookie Path Issues: If you're getting authentication problems, try adding:

proxy_cookie_path /grafana/ /;
proxy_cookie_domain localhost $host;

After making changes:

sudo nginx -t
sudo systemctl restart nginx
sudo systemctl restart grafana-server

Check the browser's developer tools (Network tab) to verify all assets are loading correctly from the /grafana/ path.

If you prefer using a subdomain (recommended for production):

server {
    server_name grafana.yourdomain.com;
    
    location / {
        proxy_pass http://localhost:3000;
        # Include all other proxy settings from above
    }
}

Then in Grafana config:

root_url = %(protocol)s://grafana.yourdomain.com/

When trying to proxy Grafana through Nginx with SSL, many developers encounter the {{alert.title}} placeholder instead of the actual Grafana interface. This occurs because Grafana needs specific configuration to work properly behind a reverse proxy.

Here's the proper configuration that handles both routing and headers correctly:

location /grafana/ {
    proxy_pass http://localhost:3000/;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_max_temp_file_size 0;
    proxy_redirect off;
    proxy_buffering off;
}

You must also update Grafana's configuration file (typically at /etc/grafana/grafana.ini):

[server]
domain = yourdomain.com
root_url = %(protocol)s://%(domain)s/grafana/
serve_from_sub_path = true

Trailing Slash Issue: Notice the trailing slash in both location and proxy_pass directives. This is crucial for proper path rewriting.

Header Problems: The X-Forwarded-Proto header is essential when using HTTPS to prevent mixed content issues.

WebSocket Support: For Grafana live features, add these lines:

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

After making changes, always test your Nginx configuration:

sudo nginx -t
sudo systemctl restart nginx
sudo systemctl restart grafana-server