개발자가 알아야 할 AWS S3 + CloudFront 배포 전략
안녕하세요~ 이번에도 배포에 대한 이야기를 하고자 합니다. 이전에 EC2와 Route 53을 이용한 백엔드 서버 배포 과정을 설명해드렸는데요, 그럼 프론트는 어떻게 배포하는지 궁금하실 수 있는데요 그 해결점을 포스팅에서 찾고자 합니다.
📑목차
1. CDN
1-1. CDN이란?
1-2. CDN 특징
2. CloudFront
2-1. CloudFront란?
2-2. 엣지 로케이션(Edge Location)
2-3. CloudFront의 특징
2-4. 프론트엔드 배포에 CloudFront가 사용되는 이유
2-5. CloudFront와 Route 53 도메인 연결
3. S3
3-1. S3란?
3-2. S3의 특징
3-3. CloudFront와 함께 S3를 사용하는 이유
서론
프론트엔드 애플리케이션을 배포할 때 가장 중요한 요소 중 하나는 성능과 안정성입니다. 단순히 서버에 올려두는 방식으로는 전 세계 사용자에게 빠르고 안전하게 서비스를 제공하기 어렵습니다. 특히 정적 파일(HTML, JS, CSS, 이미지 등)은 사용자와의 거리에 따라 속도가 크게 달라지게 됩니다. 이런 문제를 해결하는 핵심 기술이 바로 CDN(Content Delivery Network) 방식입니다.
AWS에서는 CloudFront라는 CDN 서비스와 S3라는 객체 스토리지를 제공하여, 손쉽게 글로벌 사용자에게 빠른 웹 서비스를 배포할 수 있습니다. 또한 Route 53을 활용하면 사용자 친화적인 도메인까지 연결할 수 있습니다. 이번 글에서는 CDN 개념과 프론트엔드 배포시 사용하는 AWS에서 제공하는 CloudFront 서비스가 무엇인지, S3 저장소와 AWS 기반 프론트엔드 배포 방식을 정리해보겠습니다.
본론
1. CDN(Content Delivery Network)
1-1. CDN이란?
CDN이라는 것을 생각해본다면 해당 스크립트나 라이브러리를 CDN 방식으로 불러오는 것을 생각할 수 있습니다. 보통 링크를 src로 가져오는데요,프론트엔드 개발에서 자주 하는 방식 중 하나가 바로 외부 라이브러리(CSS/JS)를 CDN 링크로 가져오는 것입니다. 예를 들어 axios 라이브러리를 Script 태그로 CDN 방식으로 가져오는 경우가 있습니다.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
이런식으로 CDN은 콘텐츠 전송 네트워크(Content Delivery Network)의 줄임말로, 전 세계에 분산된 서버 네트워크를 통해 사용자에게 웹 콘텐츠(이미지, 동영상, CSS, JavaScript 파일 등)를 가장 가까운 서버에서 빠르게 전달하는 기술입니다.
1-2. CDN의 특징
CDN은 전 세계의 분산된 서버 네트워크를 통해 사용자에게 웹 콘텐츠 데이터를 가장 가까운 서버에서 빠르게 캐싱하여 데이터를 제공해준다는 특징이 있습니다. 이 뿐만 아니라, 요청이 한 곳에 몰리는 트래픽 부하를 감소해주고, 이미지, 동영상등의 컨텐츠 데이터를 원본 서버에서 캐싱해준다는 점이 있습니다.
2. CloudFront
2-1. CloudFront란?
CloudFront는 AWS에서 제공하는 CDN(Content Delivery Network) 서비스입니다. 전 세계에 분산된 엣지 로케이션(Edge Location) 서버들을 통해 웹 사이트, 동영상, 이미지, API, 소프트웨어 같은 콘텐츠를 빠르고 안정적으로 사용자에게 전달해줍니다.
쉽게 말해, 사용자가 웹사이트나 동영상을 요청하면, CloudFront는 그 데이터를 가장 가까운 서버(엣지 로케이션)에서 꺼내 바로 전달해줍니다. 그래서 멀리 있는 서버까지 가지 않아도 되니 훨씬 빠르고 안정적으로 서비스를 이용할 수 있습니다.
2-2. 엣지 로케이션(Edge Location)
그럼 이 엣지 로케이션(Edge Location) 이라는 것을 쉽게 설명한다면, 지금의 스타벅스 본사는 미국 시애틀에 있습니다. 만약 스타벅스 지점이 미국 본사에만 있다고 생각해봅시다. 전 세계에 있는 사람들이 스타벅스 커피를 마시기 위해서는 모두 시애틀 본사까지 직접 가야 하는 상황이 생기겠죠. 이렇게 되면 시애틀로 사람들이 몰리면서 본사는 너무 바빠지고, 줄이 길어지고, 커피 한 잔 마시는데도 시간이 오래 걸리는 비효율적인 상황이 벌어집니다. 그래서 스타벅스는 이런 불편함을 해결하기 위해 전 세계 주요 도시에 지점을 열었습니다. 이제 고객은 멀리 가지 않고, 가까운 지점에서 똑같은 커피를 빠르게 받을 수 있게 되었죠. 이때, 각 스타벅스 지점이 바로 CloudFront의 '엣지 로케이션' 에 해당합니다. 즉, 전 세계 곳곳에 있는 엣지 로케이션이 사용자와 가까운 위치에서 콘텐츠(커피)를 제공하여 원본 서버(시애틀 본사)의 부담을 줄이고, 빠르고 안정적인 서비스 제공을 가능하게 만드는 것입니다.
2-3. CloudFront의 특징
- 전 세계 엣지 로케이션을 통한 빠른 전송 속도
CloudFront는 전 세계에 분산된 엣지 로케이션을 통해 사용자와 가장 가까운 서버에서 콘텐츠를 제공하므로, 지연 시간이 줄고 빠른 응답 속도를 제공합니다. - 강력한 보안 기능 제공
AWS WAF, AWS Shield와 연동되어 DDoS 공격 및 웹 공격으로부터 애플리케이션을 보호하며, SSL/TLS를 이용해 안전한 HTTPS 통신을 지원합니다. - 효율적인 캐싱으로 서버 부하 감소
자주 요청되는 콘텐츠를 엣지 서버에 캐시하여 원본 서버(오리진)의 부하를 줄이고, 더 빠르고 안정적으로 콘텐츠를 전달할 수 있습니다.
2-4. 프론트엔드 배포에 CloudFront가 사용되는 이유
프론트엔드 애플리케이션을 배포할 때 Amazon CloudFront를 사용하는 가장 큰 이유는, 전 세계 사용자에게 빠르고 안정적인 서비스 제공이 가능하기 때문입니다. CloudFront는 전 세계에 분산된 엣지 로케이션(Edge Location) 을 통해 사용자의 요청을 가장 가까운 서버로 전달합니다. 이 덕분에 프론트엔드 웹사이트의 로딩 속도가 빨라지고, 지연 시간이 최소화됩니다. 예를 들어, 한국 사용자가 미국에 있는 서버의 웹사이트를 접속하더라도, CloudFront는 가까운 서울 엣지 서버에서 콘텐츠를 전달하여 더 빠른 응답을 제공합니다. 또한, CloudFront는 정적 콘텐츠(HTML, CSS, JavaScript, 이미지)들을 캐싱하여 반복 요청 시 오리진 서버에 다시 접근하지 않아도 되므로, 트래픽 비용을 절감하고 서버 부하를 줄이는 효과가 있습니다. 프론트엔드 배포에 CloudFront를 사용하는 이유는 빠른 속도, 안정적인 서비스 제공, 보안 강화, 그리고 비용 효율성 때문입니다.
2-5. CloudFront와 Route 53 도메인 연결
Amazon CloudFront는 웹 콘텐츠를 전 세계로 빠르게 배포하기 위한 CDN방식 서비스이고, Amazon Route 53은 사용자의 요청을 올바른 서버로 안내하는 DNS 서비스입니다. 프론트엔드 웹사이트를 배포할 때, CloudFront와 Route 53을 함께 사용하면 사용자가 도메인 주소를 입력했을 때 CloudFront 배포로 트래픽을 자동으로 연결할 수 있습니다. 예를 들어, 사용자가 브라우저 주소창에 www.example.com을 입력하면, Route 53이 해당 도메인 요청을 CloudFront로 전달하여 가장 가까운 엣지 로케이션에서 콘텐츠를 빠르게 제공하게 됩니다. 이때 Route 53에서는 도메인 이름을 CloudFront의 배포 도메인과 연결 하여, 복잡한 CloudFront 도메인 주소(예: d123abcd.cloudfront.net) 대신 사용자 친화적인 도메인 이름으로 접근할 수 있도록 합니다. 또한 HTTPS 보안을 위해 도메인 인증서(SSL/TLS 인증서)를 발급받아 CloudFront에 연결하면, https://www.example.com 형태로 안전하게 서비스를 제공할 수 있습니다.
그럼 이제 S3가 어떤 서비스인지 그리고 이 서비스를 어떻게 활용해야하는지 알아보도록 하겠습니다.
3. S3
3-1. S3란?
S3(Simple Storage Service)는 인터넷에 있는 커다란 창고(보관함) 이라고 생각하면 됩니다. 우리가 컴퓨터에 사진이나 문서를 저장할 때는 보통 하드디스크나 USB를 쓰죠? 그런데 S3는 이런 저장공간을 인터넷 위에 만들어 놓은 버전이죠
"내 컴퓨터가 아니라, AWS의 클라우드에 파일을 안전하게 저장해 두는 공간"
3-2. S3의 특징
1. 무한에 가까운 저장 공간
S3는 용량 제한이 거의 없는 클라우드 저장소입니다. 사진, 영상, 문서 등 어떤 파일이든 마음껏 저장할 수 있고, 데이터가 늘어나더라도 자동으로 확장되기 때문에 저장 공간 부족 걱정이 없습니다.
2. 높은 안정성과 내구성
S3에 저장된 데이터는 AWS가 여러 지역에 복사해 두기 때문에 서버 하나에 문제가 생겨도 파일이 안전하게 유지됩니다. 즉, 데이터 손실 위험이 거의 없고, 기업에서도 안심하고 사용할 수 있는 수준의 안정성을 제공합니다.
3. 접근 제어와 편리한 관리
S3는 파일 접근 권한을 세밀하게 설정할 수 있습니다.공개용으로 웹사이트에 이미지를 배포할 수도 있고, 비공개로 개인 백업용으로 쓸 수도 있습니다. 또한 웹사이트 정적 파일(HTML, CSS, JS)을 바로 업로드해 정적 웹사이트 호스팅 기능으로도 활용할 수 있습니다.
3-3. S3와 CloudFront와 함께 사용되는 이유
S3는 웹사이트의 이미지, HTML, CSS, JavaScript 같은 정적 파일을 저장하는 창고입니다. 하지만 전 세계 사람들이 그 파일에 동시에 접속하게 되면, S3 하나만으로는 속도가 느려지거나 트래픽이 몰릴 수 있습니다. 이때 등장하는 것이 바로 CloudFront입니다. CloudFront는 S3에 저장된 파일을 대신 전달해주는 전 세계 배달 서비스 역할을 합니다. 즉, 사용자가 웹사이트에 접속하면 CloudFront가 가장 가까운 엣지 서버에서 S3의 파일을 대신 보여주기 때문에 웹사이트가 빠르게 렌더링된다고 보시면 됩니다.
결론
이 포스팅을 작성하면서 프론트엔드 배포 과정에서 AWS의 각 서비스가 왜 필요한지, 그리고 S3, CloudFront, Route 53이 서로 어떻게 연결되어 빠르고 안정적인 서비스를 만들어주는지를 이해할 수 있었습니다. 결국 이 조합은 단순한 배포를 넘어서, 전 세계 어디서든 빠르고 안전한 웹사이트를 제공하기 위한 최적의 방법이라는 걸 알게 되었습니다.