mixed content 에러 해결 방법

프로젝트를 하는 중 클라이언트에서 mixed content 에러가 발생했다. 

 

mixed content 에러는? 

웹사이트가 https(보안)로 열렸는데 그 안에는 http(비보안)로 된 리소스를 불러오게 되면 발생한다.

 

현재 프로젝트의 상황을 요약 하자면 이미 http 로 고정IP로 주소를 할당 받았고, 클라이언트 배포 주소도 있는 상태였다. 

구글링 해본 결과 GCP 로드 밸런스를 써서 맞추면 된다고 했지만, 클라이언트 배포 주소가 서브도메인 이라 충돌 이슈가 있을 수 있다고 해서 시도 하지 않았다. 

 

그래서 적용한 것이 GCP VM에 Nginx 리버스 프록시 + Let's Encrypt 

• Nginx (엔진엑스)는 고성능 오픈소스 웹 서버 이자 리버스 프록시, 로드밸런스, HTTP캐시등 다양한 역할을 할 수 있는 서버 소프트웨어이다. 
• Let's Encrypt는 사용자에게 무료로 TLS 인증서를 발급해 주는비영리 기관으로 IP주소만으로는 발급받을 수 없기 때문에 도메인이 꼭 있어야 한다. 

-> 즉, Ngnix 는 HTTPS 요청을 처리하고 프록시를 전달할 웹 서버이고, Let's Encrypt 는 HTTPS를 쓸 수 있게 해주는 공식 인증서 발급 기관 이라고 할 수 있다. 

 

 

전체적인 아키텍쳐는 아래와 같다. 

[사용자 브라우저]
        │
        │ HTTPS 요청
        ▼
[클라이언트 (Vercel 배포): https://주소-zeta.vercel.app]
        │
        │ HTTPS API 요청
        ▼
[GCP VM 외부 IP: https (포트 443)]
        │
        │ Nginx (Let's Encrypt 인증서 적용)
        │ HTTPS 수신 → HTTP 내부 프록시
        ▼
[Spring Boot 애플리케이션]
        - 포트: 9091
        - API 처리 및 비즈니스 로직 실행
        │
        │ JDBC 연결
        ▼
[PostgreSQL 데이터베이스]
        - GCP VM 또는 외부 DB서버에서 실행 중

 

 

이제 이 아키텍쳐를 기반으로 아래의 글에서 mixed Content 에러를 해결 해보겠다