Skip to Content
Infra & DevOpsApache Web Gzip 압축 및 Proxy 설정
☁️ Infra & DevOps2018년 5월 18일

Apache Web Gzip 압축 및 Proxy 설정

#apache#httpd#web-server#infra-devops#proxy

1. 웹 리소스 압축과 프록시 서버의 필요성

빅데이터 플랫폼의 자체 UI(Flamingo 등)를 기업 고객망에 온프레미스로 배포할 때, 정적 리소스(JS, CSS 등)의 용량이 커서 브라우저 로딩 속도가 저하되는 이슈가 있었습니다. 또한, 보안 및 아키텍처상의 이유로 WAS(Web Application Server) 포트를 외부로 직접 개방할 수 없어, 앞단에 웹 서버(Web Server)를 두어 클라이언트 요청을 뒷단의 애플리케이션 서버로 안전하게 넘겨주어야(Reverse Proxy) 했습니다.

2. Gzip과 Reverse Proxy 작동 원리

Apache 웹 서버(httpd)에서 두 가지 핵심 모듈을 사용합니다.

  1. mod_deflate: 서버에서 클라이언트로 응답을 보낼 때 텍스트 기반 자원을 Gzip으로 압축하여 네트워크 대역폭을 절약하고 로딩 속도를 대폭 개선합니다.
  2. mod_proxy: 클라이언트가 Apache 웹 서버의 80번 포트로 들어오면, 내부망의 특정 WAS(Tomcat, Node.js 등) 포트로 라우팅해주는 리버스 프록시(Reverse Proxy) 역할을 수행합니다. 특히 최신 웹 서비스에서 필수로 요구되는 WebSocket(ws://) 프로토콜 프록싱도 함께 지원해야 합니다.

3. Apache 모듈 활성화 및 가상호스트 설정 및 구현

1. Gzip 압축 (mod_deflate) 설정

Apache 설정 파일(httpd.conf 또는 conf.d/ 하위 파일)에 아래 구문을 추가하여 정적/텍스트 파일 압축을 활성화합니다.

apache
LoadModule deflate_module modules/mod_deflate.so
 
<ifmodule mod_deflate.c>
  # 텍스트, HTML, CSS, JavaScript 및 폰트 파일 압축 적용
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
 
  # 구형 브라우저 버그 방지용 예외 처리
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</ifmodule>

2. 리버스 프록시 (mod_proxy) 설정

특정 도메인(flamingo.exem-oss.org)으로 들어오는 트래픽을 내부망 IP(10.10.30.200:38080) 및 모니터링 시스템(localhost:5000)으로 분배하는 설정입니다.

apache
LoadModule proxy_module modules/mod_proxy.so
 
<VirtualHost *:80>
    #ServerAdmin support@cloudine.co.kr
    ServerName flamingo.exem-oss.org
 
    ErrorLog      /usr/local/apache2/logs/flamingo.exem-oss.org-error.log
    LogLevel warn
 
    ProxyRequests Off
    ProxyPreserveHost On
    
    <Proxy *>
        Order deny,allow
        Allow from all
    </Proxy>
 
    # WebSocket 프록시 설정 (웹소켓 정보 및 세션 연결용)
    ProxyPass /websocket/info http://10.10.30.200:38080/websocket/info
    ProxyPassReverse /websocket/info http://10.10.30.200:38080/websocket/info
 
    ProxyPass /websocket ws://10.10.30.200:38080/websocket
    ProxyPassReverse /websocket ws://10.10.30.200:38080/websocket
 
    # Sysmon 모니터링 툴 라우팅
    ProxyPass /sysmon http://localhost:5000/
    ProxyPassReverse /sysmon http://localhost:5000/
 
    # Root 경로 기본 프록시
    ProxyPass / http://10.10.30.200:38080/
    ProxyPassReverse / http://10.10.30.200:38080/
 
    <Location />
        Order allow,deny
        Allow from all
    </Location>
</VirtualHost>

4. 적용 결과 및 성능 최적화

프론트엔드 최적화 측면에서 mod_deflate 적용은 가장 가성비가 높은 튜닝이었습니다. 적용 직후 초기 로딩 속도가 체감될 정도로 개선되었습니다. 프록시 설정의 경우, 단순히 HTTP 통신만 열어주다가 WebSocket 연동 부분에서 연결이 계속 끊어지는 시행착오를 많이 겪었습니다. 로그 모니터링이나 대시보드처럼 실시간 통신이 필수적인 빅데이터 UI에서는 반드시 ws:// 프로토콜 스키마를 사용하는 ProxyPass 룰을 명시적으로 상단에 선언해주어야 정상적인 양방향 통신이 유지된다는 점을 주의해야 합니다.

Last updated on