如何将Grafana部署在Nginx代理后方？配置后界面异常求助

Hey there! Let's sort out that wonky Grafana UI you're seeing behind Nginx—this is a super common hiccup, so we'll walk through the fixes step by step.

Common Culprits & Solutions #

1. Set Grafana's root_url Correctly #

Grafana needs to know its public-facing URL to generate valid paths for CSS, JS, and other assets. Open your grafana.ini (usually located at /etc/grafana/grafana.ini) and update these settings:

[server]
root_url = http://your-domain.com/grafana  # Replace with your actual proxy path/domain
serve_from_sub_path = true  # Required if you're serving Grafana under a subpath like /grafana

After making changes, restart Grafana to apply them:

sudo systemctl restart grafana-server

2. Correct Your Nginx Proxy Configuration #

Most UI breakages come from missing critical headers or incorrect path mapping in Nginx. Here's a tested, working config example (adjust for your subpath/domain):

server {
    listen 80;
    server_name your-domain.com;

    location /grafana/ {
        # Trailing slash after 3000/ is NON-NEGOTIABLE—fixes path mapping
        proxy_pass http://localhost:3000/;
        
        # Pass necessary headers so Grafana knows its context
        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;

        # Fix WebSocket connections (used for live dashboard features)
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Key notes:

• The trailing slash in proxy_pass http://localhost:3000/ ensures requests like /grafana/css/main.css get routed to localhost:3000/css/main.css instead of the broken localhost:3000/grafana/css/main.css.
• X-Forwarded-Proto tells Grafana if it's being served over HTTP or HTTPS, which prevents mixed-content errors if you're using SSL.

3. Troubleshoot Static Asset Loading #

If the UI is missing styles or buttons don't work, open your browser's dev tools (F12 > Network tab) to check for 404 errors on CSS/JS files. Quick fixes:

• Double-check that serve_from_sub_path = true is enabled in grafana.ini if using a subpath.
• Add proxy_cache_bypass $http_upgrade; to your Nginx location block if old cached assets are causing issues.

4. SSL/HTTPS Adjustments (If Applicable) #

If you're serving Grafana over HTTPS, update your Nginx config to handle SSL and pass the correct scheme to Grafana:

server {
    listen 443 ssl;
    server_name your-domain.com;

    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    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;
        
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Don't forget to update grafana.ini's root_url to use https:// instead of http://.

Quick Post-Config Checks #

• Restart both services to apply changes:

  sudo systemctl restart nginx
  sudo systemctl restart grafana-server
  

• Check Grafana logs for errors:

  sudo journalctl -u grafana-server -f
  

• Check Nginx logs for proxy-related issues:

  sudo tail -f /var/log/nginx/error.log
  

内容的提问来源于stack exchange，提问作者Zain Malik