[Nginx] Reverse Proxy 설정

Frontend에서 Backend로 Traffic을 전달하기 위해 Reverse Proxy를 설정하는 방법

---

1. CORS(Cross Origin Resource Sharing) 설정

Backend로 트래픽을 전달하면서 도메인 출처가 변경되어 오류 발생하는 것을 막기 위한 CORS 설정 추가

add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

• '*': 모든 도메인에서 해당 리소스 접근 허용
• 'GET, POST, OPTIONS': HTTPS Method 허용
• 'DNT, User-Agent, X-Requested-With...':  Client → Server Request Header 허용 목록
• 'Content-Length, Content-Range': Server Response 내용 중 Client에게 접근 허용할 목록

---

2. Proxy Pass 설정

location /bedrock { 
    proxy_pass http://127.0.0.1:8001;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;

    proxy_buffering off;
    proxy_cache off;
    proxy_set_header Connection '';
    proxy_http_version 1.1;
    chunked_transfer_encoding on;
}

• location /bedrock { ... } : 80번 포트 /bedrock 경로로 요청이 들어온 경우
• proxy_pass: 해당 경로로 트래픽 전달
• proxy_set_header Host $Host: Proxy된 요청의 Host 헤더를 원래 요청의 Host 헤더 값으로 설정
  ※ 이렇게 설정해야 백엔드에서 Original Host의 정보 확인 가능
• proxy_set header X-Real-IP $remote_addr:Proxy된 요청의 X-Real-IP 헤더를 Client IP로 설정
• proxy_biffering off: backend에게 받은 응답을 버퍼링 하지 않고 그대로 전달
  ※ 이렇게 설정해야 백엔드에서 Streaming Data를 전달했을 때 Client Browser 까지 바로 바로 전달
• proxy_cache off: 응답을 캐시하지 않고 항상 백엔드에게 Client의 요청을 전달
• proxy_set_header Connection '': Client ↔ Nginx 서버 간의 Session Connect 정보를 전달하지 않음
• proxy_http_version 1.1: HTTP 버전 지정
• chunked_transfer_encoding on: Response를 chunk 단위로 나누어서 전송

---

3. CSP(Content-Security-Policy) 설정

필요한 경우 Web Application에서 Load 할 수 있는 Resource의 출처 지정 (지정되지 않은 나머지는 차단)

add_header Content-Security-Policy "default-src 'self';
    script-src 'self' 'unsafe-inline' http://alb-test-nginx-1553802175.ap-northeast-2.elb.amazonaws.com;
    style-src 'self' 'unsafe-inline' http://fonts.googleapis.com;
    img-src 'self' data: blob: http://alb-test-nginx-1553802175.ap-northeast-2.elb.amazonaws.com;
    font-src 'self' data: http://fonts.gstatic.com;
    object-src 'none';
    frame-src 'none';
    connect-src 'self'";

• self': 현재 도메인 허용
• data: 현재 데이터 허용
• URL, URI: 지정된 도메인의 데이터(script, style, img..) 허용