[프로젝트] Mixed Content 오류로 인한 API 요청 차단 – Nginx를 통한 HTTPS 리버스 프록시로 해결

이슈 내용

프론트엔드(React)가 HTTPS에서 서비스되는 반면, 백엔드(Spring API)는 HTTP로 서비스되고 있어 브라우저에서 Mixed Content 오류로 인해 API 요청이 차단되는 문제가 발생함.

 

Mixed Content ?
HTTPS 페이지가 HTTP 리소스를 요청할 경우 발생하는 보안 오류. 브라우저가 보안을 이유로 요청을 차단함.

 

이를 해결하기 위해 Nginx를 EC2 인스턴스에 설치하고, HTTPS 리버스 프록시를 구성하여
모든 API 요청을 https://api.flybrief.site 도메인으로 안전하게 전달하는 구조로 변경한다.

 

문제

HTTPS 페이지가 HTTP 리소스를 불러올 때 발생하는 보안 오류

 

해결

 

• API 서버에 인증서 설치
• Nginx를 통해 HTTPS 리버스 프록시 구성
• 모든 요청을 HTTPS로 통일

 

Nginx ?
웹서버 / 리버스 프록시 서버 / 로그 밸런서 / 캐시서버 등 다용도로 사용됨. 이번에는 리버스 프록시 서버 역할로 사용.
위 이슈를 해결하기 위해 Nginx는 서버 앞단에 구성되어 클라이언트의 요청을 받아 내부 서버로 대신 전달하는 역할을 하게 된다.

 

리버스 프록시 ?
리버스 프록시 : 서버 앞단에 위치해서, 클라이언트의 요청을 받아 내부 서버로 대신 전달하는 프록시를 의미한다.
정방향 프록시 : 클라이언트 앞단에 위치해서 클라이언트가 외부에 접근하는걸 대신해준다. 

 

여기서 Nginx 는 HTTPS 요청 수신 받고, TLS 처리를 하고, 백엔드에 전달하는 역할을 하게 된다. 

기존에는 브라우저에서 API server 로 요청을 바로 보냈었는데, Nginx 가 서버 앞단에 위치하며 요청을 대신 수신 받고, 내부 서버와 통신하게 되는 것이다. 따라서 브라우저는 API 서버의 주소를 알 필요 없이, Nginx 만 바라보면 된다. 

 

Nginx 는 HTTPS 요청을 받은 후 인증서로 TLS 암호화 처리를 진행한다. 

 

TLS ? 
Transport Layer Security
인터넷에서 데이터를 안전하게 주고받기 위한 암호화 통신 프로토콜 (Transport Layer, OSI 7계층 중 전송 계층)

 

TLS 핸드셰이크 : 브라우저 ↔ 서버 사이에서 보안 연결을 맺기 위한 준비

• 브라우저가 서버에 "안전하게 대화하자!"라고 요청 (HTTPS)
• 서버는 자신의 (public key)인증서를 브라우저에 제공
• 브라우저는 인증서가 신뢰할 만한 기관(CA)에서 발급됐는지 확인(+ 도메인, 만료일도 확인함)
• 브라우저에서 검증완료 되면 대칭키(Session Key : 양쪽이 똑같이 씀) 를 생성하고, 이 대칭키를 서버의 공개키(public key) 로 암호화 해서 서버에 전송함
• 서버는 자신의 개인키(private key) 로 암호화된 대칭키(session key) 를 복호화 함 → 이제 브라우저와 서버는 같은 대칭키를 공유
• 이후 통신은 모두 이 대칭키를 사용해 빠르게 암호화/복호화

이제 API 서버에 인증서를 발급받고,

Nginx 를 설치하여 서버 앞단에서 인증서를 확인하도록 하여 Mixed Content 이슈를 해결해보자.

 

---

 

1. EC2 인스턴스에 Nginx 설치

sudo apt update
sudo apt install nginx -y

nginx -v

 

2. 도메인 연결

• AWS 콘솔 → Route 53 → 호스팅 영역 → 호스팅영역 선택
• 레코드 생성
  • 이름 : api
  • 유형 : A
  • 값 : EC2 퍼블릭 IP
  • TTL : 기본값
• 브라우저에서 api.도메인 입력 → Nginx 환영 페이지가 보이면 성공

3. certbot 설치

• Let’s Encrypt에서 무료 SSL/TLS 인증서를 발급받고 자동 갱신까지 도와주는 오픈소스 도구

sudo apt install certbot python3-certbot-nginx -y

4. SSL 인증서 발급

• 처음 실행 시 이메일 입력, 이용약관 동의 등 진행됨. 성공하면 Nginx가 자동으로 HTTPS 설정 적용

sudo certbot --nginx -d api.flybrief.site

 

5. Nginx 리버스 프록시 설정 및 적용

server {
    listen 80;
    server_name api.flybrief.site;

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name api.flybrief.site;

    ssl_certificate /etc/letsencrypt/live/api.flybrief.site/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/api.flybrief.site/privkey.pem;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

sudo nginx -t
sudo systemctl reload nginx

 

 

마무리

 

• Mixed Content 오류 원인: HTTPS 페이지에서 HTTP 요청
• 해결 방법: API 서버에 인증서 설치 + Nginx 리버스 프록시 구성
• 결과적으로 모든 통신이 HTTPS로 통일되고 보안 문제 해결됨