AWS S3와 CloudFront를 활용한 정적 웹사이트 호스팅 및 배포 방법
웹사이트를 운영하려면 반드시 별도의 웹서버를 구축해야 한다고 생각하는 경우가 많습니다. 하지만 HTML, CSS, JavaScript, 이미지처럼 정적인 파일로 구성된 웹사이트라면 AWS의 S3와 CloudFront를 활용해 서버를 직접 운영하지 않고도 웹사이트를 배포할 수 있습니다.
Amazon S3는 웹사이트 파일을 저장하는 공간으로 사용할 수 있고, Amazon CloudFront는 전 세계 여러 위치에 콘텐츠를 전달하는 CDN 역할을 합니다. 사용자가 웹사이트에 접속하면 CloudFront가 가까운 엣지 위치에서 캐시된 콘텐츠를 전달하기 때문에 웹사이트의 응답 속도를 개선할 수 있습니다.
이번 글에서는 AWS를 처음 사용하는 분들도 이해할 수 있도록 S3 버킷 생성부터 파일 업로드, CloudFront 연결까지의 기본적인 흐름을 정리해보겠습니다.
1. 정적 웹사이트란 무엇인가?
정적 웹사이트는 서버에서 별도의 프로그램을 실행해 페이지를 만들어내는 방식이 아니라 미리 만들어진 파일을 사용자에게 전달하는 형태의 웹사이트입니다.
대표적으로 다음과 같은 파일이 사용됩니다.
- HTML
- CSS
- JavaScript
- 이미지
- 동영상
- 웹폰트
예를 들어 간단한 회사 소개 페이지나 개인 포트폴리오, 제품 소개 페이지처럼 데이터베이스와 서버 프로그램이 필요하지 않은 사이트라면 정적 웹사이트 방식으로 구축할 수 있습니다.
이런 사이트는 EC2 같은 가상 서버를 직접 운영하지 않아도 되기 때문에 서버 관리 부담을 줄일 수 있습니다.
2. S3 버킷 만들기
먼저 AWS 콘솔에서 Amazon S3를 선택하고 새로운 버킷을 생성합니다.
버킷은 쉽게 말하면 웹사이트 파일을 보관하는 저장 공간입니다.
버킷 이름은 전 세계적으로 중복되지 않아야 하므로 자신만의 이름을 정해야 합니다.
예를 들어 다음과 같이 만들 수 있습니다.
my-static-web-2026
버킷을 생성한 다음 준비한 index.html, CSS 파일, JavaScript 파일, 이미지 등을 업로드합니다.
AWS 공식 문서에서도 정적 웹사이트를 구성할 때 버킷을 만들고 웹사이트 파일을 업로드하는 방식을 안내하고 있습니다.
3. index.html 준비하기
정적 웹사이트에서 가장 기본이 되는 파일은 index.html입니다.
간단한 테스트를 위해 다음과 같은 HTML 파일을 만들어 업로드할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AWS S3 정적 웹사이트</title>
</head>
<body>
<h1>안녕하세요.</h1>
<p>AWS S3로 배포한 정적 웹사이트입니다.</p>
</body>
</html>S3의 정적 웹사이트 호스팅 설정에서 기본 문서 이름을 index.html로 지정하면 방문자가 사이트의 기본 주소에 접속했을 때 이 파일이 표시됩니다. 파일 이름은 대소문자를 구분하므로 실제 파일명과 설정값이 정확히 일치해야 합니다.
4. S3 정적 웹사이트 호스팅 설정
S3 버킷의 Properties 메뉴에서 정적 웹사이트 호스팅 설정을 찾을 수 있습니다.
정적 웹사이트 호스팅을 활성화하고 기본 문서에 다음을 입력합니다.
index.html
필요하다면 오류가 발생했을 때 보여줄 404.html 같은 오류 문서도 지정할 수 있습니다.
다만 여기서 중요한 점이 있습니다.
S3의 일반적인 웹사이트 엔드포인트는 HTTPS를 직접 지원하지 않습니다. 따라서 실제 서비스에서 HTTPS를 사용하려면 CloudFront 같은 서비스를 앞단에 배치하는 방식이 적합합니다.
5. CloudFront를 연결하는 이유
CloudFront는 AWS의 콘텐츠 전송 네트워크(CDN)입니다.
사용자가 웹사이트에 접속하면 CloudFront가 요청을 받아 필요한 파일을 S3에서 가져오고, 이후 같은 콘텐츠를 요청하는 사용자에게 캐시된 파일을 전달할 수 있습니다.
구조를 간단하게 표현하면 다음과 같습니다.
사용자 → CloudFront → S3 → 웹사이트 파일
이 구조를 사용하면 S3에 저장된 HTML, CSS, JavaScript, 이미지 등의 콘텐츠를 CloudFront를 통해 전 세계 사용자에게 전달할 수 있습니다.
6. CloudFront 배포 생성하기
AWS 콘솔에서 CloudFront로 이동한 다음 새로운 Distribution을 생성합니다.
Origin에는 웹사이트 콘텐츠가 저장된 S3 버킷을 지정합니다.
최근 AWS에서 권장하는 보안 구성에서는 S3 버킷을 직접 공개하기보다 Origin Access Control(OAC)을 사용해 CloudFront가 S3 콘텐츠에 접근하도록 구성할 수 있습니다.
AWS의 보안 정적 웹사이트 가이드 역시 S3를 CloudFront의 원본으로 사용하면서 OAC를 적용하는 방식을 설명하고 있습니다.
7. HTTPS 적용하기
웹사이트를 실제로 운영한다면 HTTPS 적용을 고려해야 합니다.
CloudFront를 이용하면 HTTPS를 통해 사용자의 브라우저와 CloudFront 사이의 통신을 보호할 수 있습니다.
사용자 정의 도메인을 연결하려는 경우에는 AWS Certificate Manager(ACM)를 이용해 SSL/TLS 인증서를 준비하고 CloudFront 배포에 연결하는 방식으로 구성할 수 있습니다. AWS의 보안 정적 웹사이트 구성에서도 ACM 인증서를 CloudFront에 연결하는 방식을 사용합니다.
8. 사용자 도메인 연결하기
CloudFront에서 배포가 완료되면 기본적으로 CloudFront에서 제공하는 도메인 주소를 사용할 수 있습니다.
예를 들어 다음과 같은 형태입니다.
자신만의 도메인을 사용하려면 DNS 설정을 추가해야 합니다.
예를 들어
www.example.com
이라는 도메인을 사용한다면 DNS에서 해당 도메인이 CloudFront 배포를 가리키도록 설정합니다.
AWS에서는 Route 53을 이용해 도메인과 AWS 서비스를 연결할 수도 있습니다.
9. 배포 후 꼭 확인해야 할 사항
웹사이트를 배포했다고 끝나는 것은 아닙니다.
다음 항목을 확인하는 것이 좋습니다.
첫째, index.html이 정상적으로 표시되는지 확인합니다.
둘째, CSS와 JavaScript 파일이 정상적으로 로딩되는지 확인합니다.
셋째, 이미지 경로가 올바른지 확인합니다.
넷째, HTTPS로 접속되는지 확인합니다.
다섯째, CloudFront 캐시 때문에 변경된 파일이 바로 반영되지 않는 경우가 있는지 확인합니다.
특히 웹사이트 파일을 수정했는데 이전 화면이 계속 나타난다면 CloudFront 캐시를 확인해야 합니다.
10. S3와 CloudFront 구성의 장점
이 방식의 가장 큰 장점은 웹서버를 직접 관리할 필요가 적다는 것입니다.
EC2에 Nginx나 Apache를 설치하고 서버를 관리하는 방식과 비교하면 운영 구조가 단순해질 수 있습니다.
또한 S3는 웹사이트 파일을 저장하는 역할을 하고 CloudFront는 콘텐츠 전달과 캐싱을 담당하기 때문에 각각의 역할이 명확합니다.
AWS 공식 문서에서도 CloudFront를 이용한 정적 웹사이트 구성은 S3의 저장 기능과 CloudFront의 콘텐츠 전달 기능을 결합하는 방식으로 설명하고 있습니다.
마무리
AWS S3와 CloudFront를 이용하면 HTML, CSS, JavaScript 등으로 구성된 정적 웹사이트를 비교적 간단하게 배포할 수 있습니다.
전체적인 구조는 다음과 같이 이해하면 쉽습니다.
S3 = 웹사이트 파일을 저장하는 공간
CloudFront = 사용자에게 빠르고 안전하게 파일을 전달하는 역할
ACM = HTTPS 인증서 관리
Route 53 = 도메인과 AWS 서비스 연결을 담당하는 DNS 서비스
처음에는 S3에 index.html 하나를 올려 테스트해보고, 이후 CloudFront를 연결하는 방식으로 단계별 학습을 진행하면 이해하기 쉽습니다.
다만 AWS는 사용한 서비스와 데이터 전송량 등에 따라 비용이 발생할 수 있으므로 테스트가 끝난 뒤에는 불필요한 리소스가 남아 있지 않은지 확인하는 것이 좋습니다. AWS 공식 S3 튜토리얼에서도 학습 목적으로 생성한 리소스는 실습이 끝난 후 삭제해 추가 비용이 발생하지 않도록 안내합니다.