SSE(Server Sent Events) 전송 문제 해결하기 (Feat. Nginx 설정)

`X-Accel-Buffering` 헤더는 Nginx에서 프록시된 응답의 버퍼링을 제어합니다. `X-Accel-Buffering: no`로 설정하면 Nginx는 해당 응답을 버퍼링하지 않고 즉시 클라이언트로 전달합니다. 이는 Server-Sent Events(SSE)와 같이 실시간 데이터 전송이 필요한 경우에 유용합니다.

어제 django-pyhub-ai 라이브러리를 서버에 배포해서 활용하고 있는 데, SSE(Server Sent Events) 타입의 HTML 메시지가 잘려 전송되는 문제가 발생했습니다. 이로 인해 의도치 않은 동작과 코드 노출이 나타났습니다.

문제 상황

SSE 응답으로 아래와 같은 코드가 전송되어야 합니다:

<script>
console.log('hello sse');
</script>

그러나 실제로는 다음과 같이 두 번에 나뉘어 전송되었습니다:

첫 번째 전송:

<script>
console.log

두 번째 전송:

('hello sse');
</script>

이로 인해 자바스크립트가 정상적으로 실행되지 않고, 코드가 그대로 화면에 출력되는 문제가 발생했습니다.

원인 분석

문제를 확인하기 위해 다음 사항들을 점검했습니다:

  • Gunicorn/Uvicorn 문제 여부 : 로컬 환경에서는 동일한 문제가 재현되지 않았습니다.

  • Nginx 버퍼링 설정 : 원인은 Nginx의 버퍼링 기능 때문이었습니다. Nginx가 SSE 응답을 중간에 버퍼링하면서 데이터가 잘려 전송되었습니다.

해결 방법

  • Nginx 버퍼링 비활성화 : 아래 설정을 추가하여 Nginx에서 프록시 버퍼링을 끌 수 있습니다:
proxy_buffering off;
  • SSE 응답 헤더 설정 : Nginx 공식 문서에 따르면, X-Accel-Buffering=no 응답 헤더를 통해 버퍼링 동작을 제어할 수 있습니다. SSE 타입의 HTMX 응답에서는 다음과 같이 헤더를 지정하는 것을 추천합니다:
response['X-Accel-Buffering'] = 'no'
  • 마지막 편집일시 : 2024년 12월 17일 1:07 오후
  • 최초 생성일시 : 2024년 12월 11일 12:09 오후
🌟 본 포스팅이 도움이 되셨다면 댓글 하나 남겨주시고, 널리 공유도 부탁드립니다. 🌟

댓글