mixed Content error(https 🥲 http ssl인증오류) 해결기 feat. 가비아,ec2,router53

🐶🐱[멍멍냥냥] 프로젝트의 프론트 배포는 netlify로 하였고
백엔드 서버 배포는 aws ec2로 하였다.

시행착오를겪어 결국 배포가 완료된 후 클라이언트 시점에서 구동을 이리저리 해보는 과정에서

사진 불러오기 api들이 하나도 먹히지 않고 있는것을 발견했다.🤨

👆 도저히 나타나지 않는 사진 ... 😢

SSL 인증 오류였다. 웹에서 보안관련 탭에서 모두허용을 하게되면 사진은 볼수 있지만, 이방법은 일반 사용자들입장에서는 말도 안되는 방법이기에 근본부터 찾아 고치기로 했다.

네트리파이는 자동으로 https로 배포해준다.
하지만 ec2로 배포한 서버는 http상태인데 SSL 인증서를 붙이지 않아서 https와는 통신이 안되는것이었다.
결국 서로 맞지 않으니 사진이 제대로 불러와지지 않은것.

해결 하려면

1. 프론트단을 http로 하거나

2. ec2에 배포된 서버를 인증서를 받아서 https 로 바꾸면된다.

하지만 !!!! 네트리파이 공식페이지에서도 http는 지원하지 않는다고 선언했음.

(이부분 다른 많은 유저들도 불편함을 겪던데 옵션으로 하나만 넣어줬으면 참 좋겠다 ㅠ 그래도 무료니 감사하긴합니다요😭)

즉, 서버 도메인을 구매하여 router53으로 연결하여 ssl인증서를 발급 받아야한다 .

가장 간단한건 ec2에서 바로 도메인 하나를 구매하는 방법도 있지만
가비아 라는 사이트를 이용해서 나만의 도메인을 구매해보기로 했다.

👆 생각보다 저렴한 가격에 구매성공했다.

👆 ec2 router53을 이용하여 가비아에서 구매한 도메인을 연결한다.

👆 AWS Certificate Manager 를 이용해 구매한 도메인에 SSL 인증서를 발급받는다.

👆 https 적용 완료 !! 피드들의 사진도 정상적으로 나온다.

시행착오가 많았다. AWS ec2가 익숙치 않았고 사람들마다 방법도 하나만 있는게 아니라서 쉽지 않았다.