[docker] grafana 컨테이너를 nginx로 연동하기 Develop Tip

다음과 같이 docker-compose.yaml 파일에 Grafana를 연동시켜 봅니다.

  daas_dashboard:
    image: grafana/grafana
    container_name: daas_dashboard
    volumes:
      - "${PWD}/dashboard/var/lib/grafana:/var/lib/grafana"
      - "${PWD}/dashboard/etc/grafana:/etc/grafana"
      - "${PWD}/dashboard/var/log/grafana:/var/log/grafana"
    depends_on:
      - daas_tsdb
    links:
      - daas_tsdb
    expose:
      - 3000
    ports:
      - "3000:3000"
    environment:
      - GF_SERVER_ROOT_URL=http://localhost:3000
      - GF_SECURITY_ADMIN_PASSWORD=admin_xxx

위와 같이 주면 docker-compose 로 실행시킨 호스트에서
http://localhost:3000 으로 접속하면 다음과 같이 잘 보입니다.


문제는 위와 같은 daas_dashboard 라는 컨테이너 서비스는 바로 접속이 되는 것이 아니라,
nginx 가 돌고 있는 컨테이너를 통하여 접속하는 것입니다.

이런 경우에는 일반적으로,

        location /aaa {
            proxy_pass http://daas_backend:34050/aaa;
        }

와 같은 식으로 url prefix를 이용하여 다른 컨테이너에 접속하도록 합니다.

그러려면 
http://localhost:3000
대신
http://localhost:3000/dashboard
라고 dashboard를 추가하고 싶습니다.

메뉴얼을 한참 뒤져서 grafana.ini의 root_url 에

root_url = %(protocol)s://%(domain)s:%(http_port)s/dashboard

라고만 추가하고,

http://localhost:3000/dashboard
라고 웹브라우져에서 열려고 시도하면,

위와 같이 {{alert.title}}
라고 나오며, 서버 로그를 보면, 

404 Not found 오류가 뜨는 것입니다.



결론적으로 다음과 같이 하여 해결하였습니다.

  daas_dashboard:
    image: grafana/grafana
    container_name: daas_dashboard
    volumes:
      - "${PWD}/dashboard/var/lib/grafana:/var/lib/grafana"
      - "${PWD}/dashboard/etc/grafana:/etc/grafana"
      - "${PWD}/dashboard/var/log/grafana:/var/log/grafana"
    depends_on:
      - daas_tsdb
    links:
      - daas_tsdb
    expose:
      - 3000
    ports:
      - "3000:3000"
    environment:
      - GF_SERVER_ROOT_URL=http://localhost:3000/dashboard
      - GF_SECURITY_ADMIN_PASSWORD=admin_xxx

위에서 http://localhost:3000/dashboard
라고 /dashboard를 추가하였습니다.

grafana.ini에서 root_url 을 지정하는 것과 동일합니다.
(위의 환경 변수가 더 이후에 적용되더군요)

이제는 nginx.conf 에 다음과 같은 것을 추가하고,

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

iframe 에서 http://localhost:3000/dashboard
로 접근을 하였더니 잘 동작하였습니다.

위에는 IFrame 으로 잘 컨테이닝 된 모습입니다.

이번에 처음으로 VueJs를 이용해 보았는데,
나름 장점이 많은 프레임워크 같습니다.


어느 분께는 도움이 되셨기를...

덧글

댓글 입력 영역

구글애드텍스트