프론트엔드 배포

오늘은 프론트엔드 배포를 했다.
S3와 Cloud front와 Route 53을 통해서 진행했다.
이 이유는 http가 아닌 https를 하고싶었고, s3를 통한 자동 배포를 하고싶었기 때문이다.

아직은 완전히 되지는 않았지만
https://www.drawingduo.site/ 에 접속하면 간단한 흐름정도를 확인할수있다.

혹시나 S3, cloud front, route 53으로 리액트 프로젝트를 배포하고자 하는 분이 있다면 아래 블로그가 짱이다
AWS - S3, CloudFront, Route53을 이용한 정적 호스팅
여기 그대로 따라하는것을 추천한다!

자꾸 터지는 에러

이번에 s3와 cloud front를 통해 배포를 시도하면서 정말 많은 에러가 나를 반겨주었다. 이제와서 생각하면 정말 간단한 에러들이었지만 이거를 해결하는데 하루종일 걸렸다.

접속은 되지만 화면이 빈 상태

처음에는 배포했고 접속도 잘 되었지만 빈 화면이 나오는 에러가 발생했다. 여기서 계속 삽질을 하다가 그냥 처음부터 하는것이 나을것이라고 판단하고 s3 버킷, cloudfront 배포, 인증서 등 모든것을 삭제했다.

접속 조차 안됨

다시 처음부터 시작해서 완료를 했는데 접속이 안되는 에러가 생겼다.
s3 정적 페이지 배포 사이트도 잘 들어가지고, cloud front 배포도 잘 들어가졌다. 그리고 도메인에 잘 연결까지 했다(고 생각했다.)
결론적으로 내가 도메인에 잘 연결을 안한것이었다. 혹여나 나와 같은 방식으로 배포하고자하는 사람이 있다면 주의할 점이 있다.

s3, cloudfront, route 53 각각의 배포를 완료한 후에 다음으로 넘어가야한다!!

amazon은 친절하기에 보통 배포를 하거나 주소를 입력해야하는 상황에서 자동으로 내가 입력할 주소를 자동으로 추천해준다.

하지만 나는 자동 추천이 안떴고 그냥 복붙해서 입력을 했었다. 그런데 배포가 완전히 되지 않은 상태에서 복붙을 해서그런지 열리지 않았다.
이 글을 보고있는 분들은 그런 실수를 안할수있을것이다.

오늘의 하루는 어땠나

오늘은 배포에 시간을 다 날린 하루이다.
이제 마무리 발표도 얼마 안남고 좀 더 달려야겠다.
발표를 하기로했으니 그것도 준비 빡세게해서 잘 만든 프로젝트를 잘 말해보자 😎