Grafana behind reverse proxy (nginx) with subpath

  • What Grafana version and what operating system are you using?

Latest grafana/grafana image (version 11.3.1)

  • What are you trying to achieve?

Trying to run the example from the official tutorial with redirecting localpath/grafana to the grafana pod.

  • How are you trying to achieve it?

I’m using the code from the tutorial.

  • What happened?

I’m seeing “If you’re seeing this Grafana has failed to load its application files” or 502 errors, depending on the changes I make in nginx config.

  • What did you expect to happen?

Access Grafana at http://localhost:80/grafana

  • Can you copy/paste the configuration(s) that you are having problems with?

nginx.conf:

# NGINX config based on this tutorial:
# https://grafana.com/tutorials/run-grafana-behind-a-proxy/

# This is required to proxy Grafana Live WebSocket connections.
map $http_upgrade $connection_upgrade {
  default upgrade;
  '' close;
}

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html index.htm;

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

  # Proxy Grafana Live WebSocket connections.
  location /grafana/api/live/ {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
    proxy_set_header Host $host;
    proxy_pass http://grafana:3000;
    rewrite  ^/grafana/(.*)  /$1 break;
  }
}

docker-compose.yml:

services:
  grafana:
    image: grafana/grafana
    container_name: grafana
    restart: unless-stopped
    ports:
      - '3000:3000'
    networks:
      - network

  nginx:
    image: nginx:latest
    container_name: nginx
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
      - ./index.html:/usr/share/nginx/html/index.html
    ports:
      - '80:80'
    networks:
      - network

networks:
  network:

I also tried it with the grafana.ini config:

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

but it does not change anything.

I also tried using

upstream grafana {
  server localhost:3000;
}

and changing proxy_pass http://grafana:3000; to proxy_pass http://grafana; as in the example (or with server grafana:3000 above), also with no luck.

  • Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.

I’m seeing the “If you’re seeing this Grafana has failed to load its application files” page.

  • Did you follow any online instructions? If so, what is the URL?

Configure Grafana for subpath and then also connect to subpath from nginx

 proxy_pass http://grafana:3000/grafana/;

All gears must be working with that subpath

Thanks @jangaraj but changing it does not fix the issue unfortunately. I’m getting the same error page.

Provide reproducible example (config) + error (e.g. screenshot, browser console requests, …) - make sure you run CTRL+F5 a few times (reload without caching any resources) in your browser - you you have 100% current config in the browser.

I’m seeing this:

The reproducible example is provided in the code snippets. I’m re-deploying it using docker compose, so the config is always fresh because it gets re-deployed. The code snippets above are everything needed to reproduce it. The examples just miss index.html which is a dummy static hello world page.

That’s config. But files in the browser are cached and you don’t consider that a problem.
Your browser loads js/css files, which are expecting grafana on grafanahost:3000 and then you change config to subpath grafanahost:3000/subath and redeploy it with docker-compose. Your browser may still have cached old js/css files grafanahost:3000, so cache clearing is IMPORTANT. You will see it in the browser console where files are pointing - if it is pointing to subpath or not

I also opened it in the private window after re-deploying, same result.

Provide repo, where I can just run docker-compose pls

Here you are Grafana with Nginx reverse proxy · GitHub

I asked for repo. You as a requester should make the easiest way to support you otherwise you will decrease the chance for help. What is the point of community supporters spending an hour just to setup everything and you will pay a minute to write about problem?
There are no changes, which I suggested. Sorry, provide me a repo with exact setup, which I suggested and which didn’t work for you.

I moved it into a repo, but this is exactly the same files you can download with one click from gist GitHub - twolodzko/grafana-sandbox

Yes, but there is no config for Grafana

Configure Grafana for subpath and then also connect to subpath from nginx

I provided a simple, reproducible example of the issue. Could you help me with solving it?

I gave you before:

You said that this is not working, so I asked for exactly this reproducible example.
You provided now repo with vanilla config - there is no config for “Configure Grafana for subpath and then also connect to subpath from nginx”. So from my point of view you didn’t follow my instructions. I’m happy to help if you follow instructions.

Could you then tell me what the config should be, or your idea is that I’d be making random commits until I figure out how to fix it myself…?

You already said that you configured:

So add this to the repo. Only you know how you configured it.

Ok, I added it to the repo.

That’s wrong. You are adding grafana.ini to nginx container. If you did it before, then of course it didn’t work.

Ok, thanks, indeed the code in the repo was wrong. But do I follow correctly from

Configure Grafana for subpath and then also connect to subpath from nginx

 proxy_pass http://grafana:3000/grafana/;

All gears must be working with that subpath

that it is not possible to redirect /grafana → http://grafana:3000 (without the subpath)? Because this is what actually I want to do: to use nginx to redirect from some arbitrary path to Grafana under some address.

I guess it’s possible, but then you may need a billion rewrites/content rewrites to fix the redirect.

Your current setup is almost OK. Configure Grafana to the same port as nginx 80. So Grafana generates all redirects in the same config as nginx expect.