React + FastAPI 배포 중 mixed-content 오류 해결기

1. 프로젝트 구성

• 프론트엔드: React (Vercel에 배포)
• 백엔드: FastAPI (AWS EC2에 배포)

2. 문제 발생

• 프론트에서 백엔드 API를 호출하는 도중 다음과 같은 오류 발생:
•  
  Blocked: Mixed Content
• 원인: 프론트(Vercel)는 https, 백엔드(EC2)는 http 프로토콜을 사용 → 보안 정책 위반

3. 원인 분석

• 브라우저는 보안이 강화된 https 페이지에서 http 리소스를 불러오는 것을 차단함
• 즉, 프론트가 https인데 백이 http이기 때문에 통신이 차단된 것

4. 해결 방향

• 두 서비스 모두 동일한 프로토콜(https)을 사용해야 함
• Vercel은 기본적으로 https만 제공하므로, EC2 쪽을 https로 설정해야 함

5. 해결을 위한 조치

1. 도메인 확보
   • 유료 구매 대신 내도메인.kr에서 무료 도메인 발급
2. SSL 인증서 발급
   • Let's Encrypt를 사용해 무료 SSL 인증서 발급
   • certbot을 이용해 인증서 자동 갱신 설정
3. HTTPS 설정
   • Nginx를 통해 SSL 적용 및 리버스 프록시 설정
   • FastAPI Uvicorn은 내부적으로 구동, Nginx가 외부 요청을 받아 전달하는 구조 구성

6. 현재 상황

• 도메인 연결 및 SSL 인증 완료
• 그러나 아직 https 접근이 정상적으로 되지 않음
  • 원인 미확인, Nginx 설정 또는 포트 문제로 추정
  • 추후 추가적인 로그 분석 및 방화벽 설정 확인 필요

---

💡 배운 점 & 다음 목표

• https 적용을 위해서는 도메인과 SSL 인증서가 필수
• 무료 도구(Let's Encrypt, 내도메인 등)로도 충분히 구성 가능
• 다음 단계로는 Nginx 설정을 다시 점검하고, https 접근이 완전히 정상화되도록 조치 예정

 

 

 

2025sus 5월 6일 결국 해결 못하고

 

하나의 EC2에서 프론트, 백 둘다 동시에 띄우기로함