Nginx Reverse Proxy로 Private Subnet의 Grafana에 연결 중 발생한 오류와 해결

 

문제

Private Subnet에 위치한 인스턴스에

AWS MSK에서 제공하는 JMX Exporter와 Node Exporter로 수집한 지표들을

프로메테우스에 적재하고, 그라파나를 활용하여 시각화 하도록 구성한 상태입니다.

 

퍼블릭 IP로 클라이언트가 접근하면 Public Subnet에 존재하는 Nginx의 reverse proxy를 통해서

Private Subnet에 위치한 그라파나에 대한 내용을 클라이언트에 응답하도록 아래와 같이 구성하였습니다.

 

server {
    listen 80;
    server_tokens off;

    # Grafana
    location / {
        proxy_pass http://10.x.x.x:3000/;  # Grafana의 IP 및 포트
        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;
    }
}

 

그러나 브라우저에서 접속하여 post또는 put method 형태로 api 요청시 "origin not allowed" 오류가 발생하고

아래와 같이 웹소켓에 대해서 커넥션을 실패하는 것을 확인할 수 있었습니다.

 

 

 

해결

위에서 발생한 문제에서 알 수 있다시피, 웹 소켓 관련한 내용을 반영을 해줘야했습니다.

또한 그라파나 설정 파일에서도 추가적인 설정이 필요했는데,

관련한 내용을 아래의 공식 문서를 통해서 해결할 수 있었습니다.

https://grafana.com/tutorials/run-grafana-behind-a-proxy/

Run Grafana behind a reverse proxy | Grafana Labs

 

 

nginx

WebSocket 통신을 위한 특정 엔드포인트인 /api/live/로 들어오는 요청을 처리하기 위해 /api/live/ 블록을 추가해주고

추가적인 설정이 필요했었습니다.

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

upstream grafana {
  server localhost:3000;
}

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

  location / {
    proxy_set_header Host $host;
    proxy_pass http://grafana;
  }

  # Proxy Grafana Live WebSocket connections.
  location /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;
  }
}

 

 

grafana

추가적인 환경설정이 필요합니다. defaults.ini 또는 grafana.ini 설정 파일에서 아래와 같은 내용을 추가해줍니다.

Grafana가 Nginx를 통해 리버스 프록시로 제공되고 있으므로

root_url은 Grafana가 외부에서 접근될 수 있는 주소로 입력해줍니다.

domain = example.com
root_url = %(protocol)s://%(domain)s:%(http_port)s/
serve_from_sub_path = true

 

 

nginx에서 왜 업그레이드(upgrade) 설정이 필요했을까?

WebSocket은 초기에는 HTTP 프로토콜을 사용하여 클라이언트와 서버 간 연결을 설정합니다. 

그러나 HTTP는 요청-응답 모델로 동작하기 때문에 실시간 양방향 통신을 지원하지 않습니다.

 

WebSocket 프로토콜로 전환하기 위해 클라이언트는 서버에 Upgrade 헤더를 보내고, 

서버는 이 헤더를 수락하여 통신 방식을 WebSocket으로 업그레이드하는 구조라고 합니다.

 

업그레이드가 이루어지면 이후의 통신은 WebSocket 프레임을 사용해 양방향으로 데이터를 주고받을 수 있게 됩니다.