Day3
# Day3의 목표
프론트엔드 배포를 자동화한다.
CDN을 통해 프론트엔드를 캐싱하고 HTTPS를 적용한다.
프론트엔드와 WAS를 연결시킨다.◎ Milestone 9
HTTPS 적용 후 WAS와 프론트엔드를 연결합니다.
■ 처음으로 마주한 문제
간단한 API를 작성후 CORS 설정까지 문제 없이 진행을 했습니다.
하지만 CloudFront를 통해 배포한 S3에 정적 웹사이트의 HTTPS 적용이 안되는 문제가 발생했습니다.
내가 만난 오류(로그를 캡쳐 못해서 비슷한 오류입니다.)
Mixed Content: The page at 'https://plprice.netlify.app/' was loaded over HTTPS,
but requested an insecure script
'http://api.vworld.kr/req/search?service=search&version=2.0&request=search&format=json&type=ADDRESS&category=PARCEL&query=봉남리 720-9&callback=jQuery351016469620631517623_1610625986322&_=1610625986323'.
This request has been blocked; the content must be served over HTTPS.Mixed Content 오류를 구글링 해봤을때의 해결책은 대부분 index.html을 수정해주는 방법으로
문제를 해결하라는 조언들이 많았습니다.
해당 방법으로 문제를 해결해보려 했으나 문제가 해결되지 않아 해당 문제를 엔지니어님께 문의한 결과 오류의 원인을 발견할 수 있었습니다.
바로... HTTPS로 응답하기 위해서는 요청 역시 HTTPS로 요청되어야 한다는 것!
Code Pipeline을 통해 배포 자동화를 만들면서 Build 과정에서 WAS에 접속하기 위한
환경 변수를 설정하였는데...
이 환경변수를 HTTPS를 적용한 ROUTE53의 도메인이 아닌 WAS의 ALB로 지정하여 문제가 발생했던 것이다.
해당 환경 변수를 수정함으로써 문제는 쉽게 해결할 수 있었다.
▶ Milestone9에서 배운 점
라우팅하기 위해서는 같은 프로토콜을 사용해주어야 한다는 것을 확실하게 알게 됐습니다.
그리고 에러로그를 조금 더 세심하게 보자...!!
DevOps를 꿈꾸는 엔지니어 지망생!