Cannot make Chronograf work behind Traefik reverse proxy

[MGasztold]

Steps to reproduce: List the minimal actions needed to reproduce the behavior.

1. Launch docker container using official Chronograf image
2. Launch Traefik container to be used as reverse proxy
3. Setup reverse proxy for Chronograf

Expected behavior: Chronograf opens in a web browser using address "https://mydomain.com/chronograf"

Actual behavior:

A blank page opens, see screenshot

Environment info:

• Chronograf version: chronograf:1.8.7 official docker image from docker hub.

Config:

1) /etc/default/chronograf file mounted inside the container with the following content:

CHRONOGRAF_OPTS=--basepath /chronograf

2) Traefik tags for Chronograf docker container

tags = [
  "traefik.enable=true",
  "traefik.http.routers.chronograf-https.tls=true",
  "traefik.http.routers.chronograf-https.rule=Host(`{{base_url}}`) && PathPrefix(`/chronograf`)",
  "traefik.http.routers.chronograf-https.entrypoints=websecure",
  "traefik.http.routers.chronograf-https.middlewares=chronograf-auth",
  # Basic auth
  "traefik.http.middlewares.chronograf-auth.basicauth.users={{basic_auth_htpasswd}}",
]

When I empty the /etc/default/chronograf file and change rule to

"traefik.http.routers.chronograf-https.rule=Host(`{{base_url}}`)",

then page loads up properly when I try just the address https://mydomain.com without any paths, see screenshot

So this means my environment is good and it is just a matter of either Traefik tags being wrong for Chronograf or Chronograf docker container being misconfigured. What may I be doing wrong?

[sranka]

Thank for reporting an issue, I am on it shortly.

[sranka]

@MGasztold it works fine to me with the latest chronograf 1.9.4 (and also with your 1.8.7). I started chronograf with

docker run -p 8888:8888 -e BASE_PATH=/chronograf --name chronograf chronograf:1.9

I and used Apache2 HTTP proxy with

ProxyPass /chronograf http://localhost:8888
ProxyPassReverse /chronograf http://localhost:8888

I have to forcibly reload the page (in Chrome CTRL+SHIFT+R) when loading chronograf UI after any BASE_URL change so that the browser cache is properly invalidated.

When BASE_PATH is used, chronograf serves its whole content at the specified URL prefix, so you can use it as an advantage during troubleshooting. You can try to access chronograf without proxy with /chronograf URL prefix, it has to work to prove that chronograf BASE_PATH configuration is applied. It will help you to know if is a proxy or chronograf configuration issue. You can also try to use a working traefic configuration (without /chronograf) against chronograf configured with /chronograf BASE_PATH, it should make no diffrence to accessing chronograf without a proxy.

[MGasztold]

Hello,

Thank you for your help. I eventually made it work on my side and i am happy :)

I use Hashicorp Nomad to deploy my whole system including Influx DB stack and Traefik for reverse proxy. Everything with docker containers. See my final configuration below:

1) Traefik tags for Chronograf container

tags = [
  "traefik.enable=true",
  "traefik.http.routers.chronograf-https.tls=true",
  "traefik.http.routers.chronograf-https.rule=Host(`{{base_url}}`) && (PathPrefix(`/chronograf`) || PathPrefix(`/chronograf/{.*}`))",
  "traefik.http.routers.chronograf-https.entrypoints=websecure",
  "traefik.http.routers.chronograf-https.service=chronograf",
  "traefik.http.routers.chronograf-https.middlewares=chronograf-auth",

  # Basic auth
  "traefik.http.middlewares.chronograf-auth.basicauth.users={{basic_auth_htpasswd}}",

  "traefik.http.middlewares.chronograf-strip.stripprefix.prefixes=/chronograf"
]

2) Chronograf docker container:

task "chronograf" {
  driver = "docker"
  config {
    image = "chronograf:1.8.7"
    ports = ["chronograf-api"]
    dns_servers = ["${attr.unique.network.ip-address}"]
    volumes = [
      "/storage-pool/analytics-files/chronograf/etc/default/chronograf:/etc/default/chronograf",
      "/storage-pool/analytics-files/chronograf/data/chronograf:/var/lib/chronograf"
    ]
    entrypoint = [
      "chronograf", "--influxdb-url=http://influxdb.service.consul:8086", "--kapacitor-url=http://kapacitor.service.consul:9092"
    ]
  }

  env {
    BASE_PATH = "/chronograf"
  }
}

Maybe this will save somebody some time. Cheers !