지식 정리 📝

S3와 CloudFront로 정적 사이트 호스팅: React 앱 배포 경험

엄성준 2024. 10. 8. 20:00

기존에도 React로 만든 프로젝트를 여러 번 배포해 보았지만, 주로 Vercel, GitHub, Spotify 같은 플랫폼을 이용해 흔히 '클릭 한 번'으로 쉽게 배포하는 방식만 경험했습니다.

그런데 많은 사람들이 AWS를 사용해 배포한다는 이야기를 듣고, 저도 직접 AWS를 활용한 배포를 경험해보고 싶어 이번에 도전해 보았습니다.

저는 아래 블로그 글을 참고해 배포를 진행했는데, 설명이 매우 친절하게 되어 있어 이 글만으로도 충분히 배포 과정을 따라갈 수 있었습니다.

https://velog.io/@ijy1995/AWS-S3%EB%A1%9C-REACT-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

 

AWS S3로 REACT 배포하기

AWS S3로 REACT 배포

velog.io

 

느낀 점

AWS 배포를 진행하면서 처음에는 "Vercel이 아닌 다른 방식으로 배포를 내가 잘할 수 있을까?"라는 의문이 있었지만, 순서대로 차근차근 따라가다 보니 예상보다 쉽게 구현할 수 있었습니다.

특히, 가비아에서 도메인을 구매한 후 AWS Route 53을 통해 도메인을 연결하고 S3로 배포했을 때, HTTP로 배포되는 바람에 크롬에서 '주의 요함' 경고 메시지가 나타나는 문제를 겪었습니다. 이를 해결하기 위해 AWS의 CDN 서비스인 CloudFront를 사용했고, 덕분에 문제를 깔끔하게 해결할 수 있었습니다.

이번 경험을 통해 AWS 배포에 대한 궁금증이 해소되었고, 앞으로 배포 관련 질문이나 논의가 있을 때 자신 있게 이해하고 답변할 수 있을 것 같다는 기대감이 생겼습니다.

포트폴리오 배포 이미지

 

번외

배포한 지 하루 만에 요금이 급격히 오르는 것을 보고, 바로 배포된 사이트를 중단시켰습니다...