Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~ 2025/09/02 Grafana Meetup Japan #6 よしたけ @yoshitake945 

自己紹介 浅野 剛丈（よしたけ） 所属：きいてみてね！ コミュニティ： CloudNative Days実行委員 - Zabbix, Grafana, k8s - (勉強中) Prometheus, Loki, Tempo, Mimir, Alloy @yoshitake945 2 

なんかヌルヌルしてかっこいい！ 😄😄😄 Grafanaのすごいところ 3 

“ そんなヌルヌルを支える機能 Grafana Live 知ってる人？？ ✋ 4 

Grafana Live ● Grafana 8.0 から搭載（ 2021年6月） ● リアルタイムストリーミングできる ● WebSocketベースの仕組み 5 https://grafana.com/blog/2021/06/28/new-in-grafana-8.0-streaming-real-time-events-and-data-to-dashboards/ 

WebSocketとは？ ● WebSocket: 常時接続で双方向通信 ● HTTP: リクエスト →レスポンス 6 WebSocketでやりとりしたい WebSocketコネクション用意するわ 双方向通信 ここならヌルヌルで きるぜ！！ クライアント サーバ 

WebSocketのHTTPリクエスト 7 // サーバ HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGm… // クライアント GET /live HTTP/1.1 Host: example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Version: 13 Origin: https://example.com ● クライアント → サーバ：WebSocketへの HTTP Upgradeリクエスト ○ Grafana Liveが必要な場合、ブラウザが自動で書き換える ■ JavaScriptがWebSocket API を実行 ● サーバ → クライアント：101 Switching Protocolsを返す ○ クライアントのSec-WebSocket-Keyを元に計算してSec-WebSocket-Acceptを返す ● 以降はHTTPでなくWebSocketで双方向通信 

リバースプロキシがある場合どうする？ 8 俺はヌルヌル できるのか？？ クライアント サーバ リバースプロキシ ❓ 

リバースプロキシを挟むとき リバースプロキシに WebSocketにHTTP Upgradeするよう設定する 9 クライアントの WebSocket 要求を引き継ぐ ここならヌルヌルで きるぜ！！ クライアント サーバ リバースプロキシ 双方向通信 クライアントとの wsコネクションを確立する 

リバプロ側の設定例（ nginx） ■ nginx設定のポイント ● map ○ ヘッダの値を制御 ■ default: upgrade ■ <空白>: close ● upstream ○ Grafanaバックエンドの宛先を定義 ● server ○ リバースプロキシで公開するホスト名・ポート ○ location /grafana/ {} ■ 必要ならサブパスを明示 ○ proxy_pass http://grafana/; ■ ※末尾にスラッシュを入れる ○ WebSocketのためHTTP/1.1を使用 ■ Keep-Aliveで接続を維持 ○ UpgradeヘッダとConnectionヘッダをセット ○ Hostヘッダを維持 10 http { map $http_upgrade $connection_upgrade { default upgrade; '' close; } upstream grafana { server 127.0.0.1:3000; } server { listen 80; server_name example.com; location /grafana/ { proxy_pass http://grafana/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; proxy_set_header Host $host; } } } 

リバプロ側の設定例（ Ingressリソース） ■ Ingressリソース(nginx ingress controllerの場合) ● proxy-http-version: "1.1" ○ Keep-Aliveで接続を維持 ● enable-websocket: "true" ○ WebSocketを有効化 ● rewrite-target: /$2 ○ 内部では / にリライトし、 Grafana側ではサブパス 設定で動作 ● proxy_set_header ○ UpgradeヘッダとConnectionヘッダをセット 11 apiVersion: networking.k8s.io/v1 kind: Ingress metadata: name: grafana-ingress annotations: nginx.ingress.kubernetes.io/proxy-http-version: "1.1" nginx.ingress.kubernetes.io/enable-websocket: "true" nginx.ingress.kubernetes.io/rewrite-target: /$2 nginx.ingress.kubernetes.io/configuration-snippet: | proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; spec: ingressClassName: nginx rules: - host: example.com http: paths: - path: /grafana(/|$)(.*) pathType: Prefix backend: service: name: grafana port: number: 3000 

Grafana側の設定 12 https://grafana.com/tutorials/run-grafana-behind-a-proxy/ [server] domain = example.com root_url = %(protocol)s://%(domain)s:%(http_port)s/grafana/ serve_from_sub_path = true ■/etc/grafana/grafana.ini ● domain ○ リバースプロキシで公開するホスト名 ● root_url ○ GrafanaのベースURL（外からアクセスされる URL） ○ ※サブパス（ /grafana/）を使う場合必須 ● serve_from_sub_path ○ root_url に指定したサブパスを使うか否か 

設定しないと 裏でエラーがすごい出る 😫😫😫 13 https://github.com/grafana/grafana/issues/42327 

共有の経緯 みんな知らなそう わりとIssueあげがち - WebSocketのトラシュー - アプリを疑いがち - 設定すれば解決する ユースケースが多岐にわたる - リバプロごとに設定ちがう - リバプロ自体の知見が必要 設定しなくても困らない - 裏でエラーが出続けるだけで画面上問題ない - ただ、何かしらの症状は出そう 14 

まとめ ● Grafana Liveとは ○ Grafanaのリアルタイムストリーミングを支える機能 ■ WebSocketでクライアント -サーバ間の双方向通信をする ● リバプロ配下で動かすとき ○ リバプロ側も、 Grafana側も設定が必要 ● 実際に設定する場合は公式ドキュメント・ブログを確認してね！ ○ Set up Grafana Live ○ Run Grafana behind a reverse proxy 15 

16 EOF