AWS S3 + CloudFront 프론트엔드 배포 환경 구성

frond-end

AWS S3 + CloudFront 프론트엔드 배포 환경 구성

어나_eona 2025. 5. 22. 08:31

안녕하세요! 실무에서 AWS S3와 CloudFront를 활용한 `프론트엔드 배포 환경을 구성`하고 운영하는 경우가 많습니다. 이 글에서는 S3와 CloudFront를 사용하여 정적 웹사이트를 안정적이고 빠르게 배포하는 과정을 AWS 모범 사례를 반영하여 상세하게 안내해 드리겠습니다.

✅ 이 글에서 다룰 내용

Amazon S3 (Simple Storage Service) 란 무엇인가?

Amazon CloudFront 란 무엇인가? 왜 S3와 함께 사용하는가?

S3 버킷 생성 및 보안 설정 (OAC 활용)

CloudFront 배포 생성 및 주요 설정 (캐싱, 보안, 사용자 정의 도메인)

배포 후 고려 사항 (캐시 무효화)

Amazon S3 (Simple Storage Service)

Amazon S3는 AWS에서 제공하는 객체 스토리지 서비스입니다. 웹 페이지, 이미지, 비디오, 백업 데이터 등 다양한 종류의 데이터를 저장하고 검색할 수 있는 확장 가능하고 내구성이 뛰어난 스토리지입니다. 프론트엔드 배포에서는 빌드된 정적 파일(HTML, CSS, JavaScript, 이미지 등)을 저장하는 원본 서버 역할을 합니다.

Amazon CloudFront ?

Amazon CloudFront는 AWS의 CDN(Content Delivery Network) 서비스입니다. 전 세계에 분산된 엣지 로케이션(Edge Location)에 콘텐츠를 캐싱하여 사용자에게 가장 가까운 곳에서 콘텐츠를 제공함으로써 지연 시간을 줄이고 전송 속도를 향상합니다.

S3와 CloudFront를 함께 사용하는 이유:

성능 향상: CloudFront의 CDN 기능을 통해 전 세계 사용자들에게 빠른 속도로 콘텐츠를 제공할 수 있습니다.

보안 강화: S3 버킷을 직접 외부에 노출하지 않고 CloudFront를 통해서만 접근하도록 설정하여 보안을 강화할 수 있습니다. (OAC - Origin Access Control 사용)

비용 효율성: S3 데이터 전송 비용보다 CloudFront를 통한 데이터 전송 비용이 저렴할 수 있으며, 캐싱을 통해 S3로의 요청 수를 줄여 비용을 절감할 수 있습니다.

HTTPS 지원: CloudFront를 통해 AWS Certificate Manager(ACM)에서 발급한 무료 SSL/TLS 인증서를 쉽게 적용하여 HTTPS 통신을 구현할 수 있습니다.

다양한 기능: AWS WAF(Web Application Firewall) 연동을 통한 웹 공격 방어, Lambda@Edge를 활용한 엣지 컴퓨팅 등 다양한 고급 기능을 활용할 수 있습니다.

다시말해, AWS 에서 제공하는 CDN 서비스는 캐싱을 통해 사용자게에 좀 더 빠른 전송 속도를 제공함을 목적으로 합니다.
.html .css. .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스이고,
CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공된다.

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Introduction.html

S3 버킷 생성 및 보안 설정 (OAC 활용)

프론트엔드 파일을 저장할 S3 버킷을 생성하고, CloudFront에서만 안전하게 접근할 수 있도록 설정합니다.

S3 버킷 만들기

AWS Management Console에 로그인 후 S3 서비스로 이동합니다.
[버킷 만들기] 버튼을 클릭합니다.
버킷 이름: 전역적으로 고유한 이름을 입력합니다. (예: `your-project-name-assets`)
- 나중에 CloudFront에 사용자 정의 도메인(예: www.example.com)을 연결할 계획이라면, 버킷 이름을 도메인명과 동일하게 할 필요는 없습니다.
AWS 리전: 사용자와 가장 가깝거나 주 서비스 지역을 선택합니다. (예: `ap-northeast-2` (서울))
객체 소유권: `ACL 비활성화됨(권장)`을 선택합니다. 이를 통해 버킷 및 객체에 대한 모든 액세스 제어는 IAM 정책 및 버킷 정책을 통해 관리됩니다.
이 버킷의 퍼블릭 액세스 차단 설정: "모든 퍼블릭 액세스 차단" 에 체크합니다. 이는 매우 중요한 설정으로, S3 버킷의 콘텐츠가 의도치 않게 외부에 노출되는 것을 방지합니다. CloudFront를 통해서만 콘텐츠에 접근하도록 설정할 것입니다.
버킷 버전 관리, 태그, 기본 암호화 등: 필요에 따라 설정합니다. 프로덕션 환경이라면 버전 관리를 활성화하는 것이 좋습니다.
[버킷 만들기] 버튼을 클릭합니다.

정적 웹 사이트 호스팅 설정 (CloudFront 사용 시 불필요)

과거에는 S3 버킷의 "정적 웹 사이트 호스팅" 기능을 활성화하고 해당 엔드포인트를 CloudFront 오리진으로 사용하는 경우도 있었지만, 최신 권장 사항은 S3 버킷 자체를 오리진으로 지정하고 OAC(Origin Access Control)를 사용하는 것입니다. 따라서 이 단계는 CloudFront를 주 배포 방법으로 사용할 경우 건너뛰어도 됩니다. CloudFront가 S3 REST API 엔드포인트를 통해 객체에 접근하게 됩니다.만약 S3 자체만으로 정적 웹사이트를 호스팅해야 하는 특별한 경우 (예: CloudFront 없이 간단한 테스트 목적)에만 이 설정을 사용하며, 이 경우 퍼블릭 액세스 허용이 필요할 수 있어 보안에 유의해야 합니다.

CloudFront 배포 생성

이제 S3 버킷의 파일을 전 세계 사용자에게 빠르고 안전하게 제공할 CloudFront 배포를 생성합니다.

AWS Management Console에서 CloudFront 서비스로 이동합니다.
[배포 생성] 버튼을 클릭합니다.

원본 설정 (Origin Settings)

원본 도메인 (Origin domain): 앞에서 생성한 S3 버킷을 드롭다운 목록에서 선택합니다. (예: `your-project-name-assets.s3.ap-northeast-2.amazonaws.com`)
- 주의: 목록에서 S3 버킷을 선택하면 자동으로 S3 버킷의 REST API 엔드포인트가 입력됩니다. "웹 사이트 엔드포인트 사용" 버튼은 클릭하지 마십시오.

원본 액세스 (Origin access):
- `Origin access control settings (recommended)` 를 선택합니다.
- [제어 설정 생성 (Create control setting)] 버튼을 클릭합니다. 기본 설정을 사용하거나 필요에 따라 이름을 지정하고 [생성] 버튼을 누릅니다.
- OAC가 생성되면 "버킷 정책 복사 (Copy policy)" 버튼이 활성화될 수 있습니다. CloudFront가 S3 버킷에 접근할 수 있도록 허용하는 버킷 정책을 S3 버킷에 추가해야 합니다.
  - 중요: CloudFront 배포 생성 후, 반드시 S3 버킷의 [권한] > [버킷 정책] 탭으로 이동하여 복사한 정책을 붙여넣고 저장해야 합니다. CloudFront 콘솔에서 "버킷 정책 업데이트"와 유사한 옵션을 제공하여 자동으로 정책을 추가해 줄 수도 있습니다. (예: "예, 버킷 정책 업데이트") 만약 자동으로 추가되지 않았다면 수동으로 꼭 추가해야 합니다.

기본 캐시 동작 (Default cache behavior)

뷰어 프로토콜 정책 (Viewer protocol policy): `Redirect HTTP to HTTPS` 를 선택하여 모든 사용자가 HTTPS를 사용하도록 강제합니다.
허용된 HTTP 방법 (Allowed HTTP methods): 일반적으로 프론트엔드 배포에는 `GET, HEAD`만 필요합니다. 만약 API 요청 등을 CloudFront를 통해 라우팅한다면 `GET, HEAD, OPTIONS` 등을 추가할 수 있습니다.

캐시 키 및 원본 요청 (Cache key and origin requests):
- 캐시 정책 (Cache policy): `CachingOptimized` (기본값)는 대부분의 정적 콘텐츠에 적합합니다. 개발 중이거나 자주 변경되는 콘텐츠의 경우 `CachingDisabled`를 사용하거나, 사용자 정의 캐시 정책을 생성하여 TTL(Time To Live) 등을 세밀하게 제어할 수 있습니다.
- 오리진 요청 정책 (Origin request policy): `Managed-CORS-S3Origin` (S3에서 CORS 헤더를 관리하는 경우) 또는 필요에 따라 사용자 정의 정책을 선택합니다. 일반적으로 정적 콘텐츠만 제공한다면 별도의 오리진 요청 정책이 필요하지 않을 수 있으며, `AllViewer`와 같은 기본 정책을 사용해도 무방합니다.

Smooth Streaming / 함수 연결: 필요에 따라 설정 (일반적인 정적 웹사이트 배포에는 불필요)

설정 (Settings)

가격 등급 (Price class): 서비스 대상 지역에 따라 선택합니다. (예: `모든 엣지 로케이션 사용(최상의 성능)`)
AWS WAF 웹 ACL: 웹 애플리케이션 방화벽을 사용하려면 여기서 미리 생성된 WAF 웹 ACL을 연결합니다. (예: SQL 인젝션, XSS 공격 방어) 초기 설정 시에는 `없음`으로 두고 나중에 추가할 수 있습니다.
대체 도메인 이름 (CNAMEs) - (Alternate domain names (CNAMEs)):
- 사용자 정의 도메인(예: www.example.com, app.example.com)을 사용하려면 여기에 추가합니다. 여러 개 추가할 수 있습니다.
사용자 정의 SSL 인증서 (Custom SSL certificate):
- 대체 도메인 이름을 사용하는 경우, 해당 도메인에 대한 SSL/TLS 인증서가 필요합니다. AWS Certificate Manager(ACM)에서 무료로 인증서를 요청하고 여기에 연결할 수 있습니다.
- 주의: ACM에서 인증서를 요청할 때는 반드시 us-east-1 (버지니아 북부) 리전에서 생성해야 CloudFront에서 사용할 수 있습니다.
- 인증서를 선택하면 지원되는 HTTP 버전 (Supported HTTP versions)을 선택할 수 있습니다. HTTP/2 또는 HTTP/3 and HTTP/2를 권장합니다.

기본값 루트 객체 (Default root object): 사용자가 도메인 루트(예: `www.example.com`)로 접속했을 때 보여줄 파일의 이름을 입력합니다. 일반적으로` index.html` 입니다.
로깅 (Logging): 표준 로그 또는 실시간 로그를 설정하여 CloudFront 액세스 로그를 수집할 수 있습니다. (선택 사항)
설명 (Description): 해당 배포에 대한 설명을 자유롭게 입력합니다.

배포 생성

모든 설정을 완료했으면 [배포 생성 (Create distribution)] 버튼을 클릭합니다. 배포가 완료되기까지 몇 분에서 몇십 분 정도 소요될 수 있습니다. 배포 상태가 "배포됨(Deployed)"으로 변경되고 "마지막 수정 날짜"가 업데이트되면 사용할 준비가 된 것입니다.

생성된 CloudFront 배포에는 `xxxxxxxxxxxxxx.cloudfront.net`과 같은 도메인 이름이 할당됩니다. 이 도메인으로 접속하여 웹사이트가 정상적으로 표시되는지 확인합니다.

사용자 정의 오류 응답 설정 (선택 사항)

CloudFront에서 오류 발생 시 (예: 404 Not Found, 403 Forbidden) 사용자 정의 오류 페이지를 보여주도록 설정할 수 있습니다. SPA(Single Page Application)의 경우, 403 또는 404 오류 발생 시 `index.html`로 리다이렉트하고 클라이언트 사이드 라우팅이 처리하도록 설정하는 것이 일반적입니다.

생성된 CloudFront 배포를 선택하고 [오류 페이지 (Error pages)] 탭으로 이동합니다.
[사용자 정의 오류 응답 생성 (Create custom error response)] 버튼을 클릭합니다.
HTTP 오류 코드: 설정할 오류 코드 선택 (예: `404: Not Found`)
오류 응답 사용자 지정 (Customize error response): 예
응답 페이지 경로 (Response page path): `/index.html` (SPA의 경우)
HTTP 응답 코드 (HTTP response code): `200: OK` (SPA의 경우 클라이언트 라우팅이 처리하도록)
[생성] 버튼을 클릭합니다.

배포 후 고려 사항

CloudFront 캐시 무효화 (Invalidation)

S3 버킷에 새로운 버전의 파일을 업로드하더라도, CloudFront 엣지 로케이션에는 이전 버전의 파일이 캐시되어 있을 수 있습니다.

따라서 변경 사항을 즉시 반영하려면 캐시 무효화를 실행해야 합니다.

CloudFront 배포를 선택하고 [무효화 (Invalidations)] 탭으로 이동합니다.
[무효화 생성 (Create invalidation)] 버튼을 클릭합니다.
객체 경로 (Object paths): 무효화할 파일의 경로를 입력합니다. 모든 파일을 무효화하려면 `/*` 를 입력합니다. (주의: `/*` 무효화는 비용이 발생할 수 있으므로, 변경된 파일만 지정하는 것이 좋습니다.)
[무효화 생성] 버튼을 클릭합니다.

CI/CD 파이프라인을 구성할 때, 배포 후 자동으로 캐시 무효화를 실행하도록 스크립트를 추가하는 것이 좋습니다. (예: AWS CLI 사용)

aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

DNS 설정 (Route 53 사용 시)

대체 도메인 이름(CNAME)을 CloudFront 배포에 설정했다면, DNS 공급자(예: Amazon Route 53, GoDaddy, Cloudflare 등)에서 해당 도메인에 대한 CNAME 레코드를 생성하여 CloudFront 배포 도메인 이름(`xxxxxxxxxxxxxx.cloudfront.ne`)을 가리키도록 설정해야 합니다.

Amazon Route 53을 사용하는 경우, A 레코드를 생성하고 별칭(Alias)을 선택한 뒤, 대상(Target)으로 해당 CloudFront 배포를 선택하면 더 쉽게 설정할 수 있습니다.

S3 버킷은 모든 퍼블릭 액세스를 차단하고, CloudFront OAC(Origin Access Control)를 통해 안전하게 콘텐츠를 제공합니다.
CloudFront 설정 시 HTTPS 강제, 적절한 캐시 정책, 사용자 정의 도메인 및 SSL 인증서(ACM 활용) 적용이 중요합니다.
배포 후에는 CloudFront 캐시 무효화를 통해 변경 사항을 신속하게 반영해야 합니다.

실제 운영 환경에서는 CI/CD 파이프라인(예: AWS CodePipeline, GitHub Actions, Bitbucket Pipelines 등)을 구축하여 배포 과정을 자동화하고, AWS WAF를 통한 보안 강화, Lambda@Edge를 활용한 고급 기능 등을 추가로 고려해 볼 수 있습니다.

배포 과정 (AWS S3 + CloudFront)

1. S3 확인

먼저 IAM 계정으로 AWS 에 가서 로그인을 한다.

CloudFront 와 연결할 `S3`를 확인한다

2. 버킷 만들기 클릭

ex) dev-{project-name} or prod-{project-name} 등 원하시는 이름을 넣으시거나,
추후 도메인을 연결할 경우, 도메인 명과 동일하게 버킷 이름을 정해준다.

AWS 리전은 서울 선택
초기 생성시, 해당 버킷의 퍼블릭 액세스를 차단으로 체크되어 있는데 -> CloudFront 에서 접근하고 다른 사용자들이 접근해야하는 퍼블릭 목적을 갖기에, 모든 퍼블릭 액세스 차단 체크박스를 해제한다.
아래와 같이 체크박스들이 비어있는 상태가 되어야 하며, “현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다”. 에는 체크를 하면 된다.

3. 태그 추가

태그는 AWS 관리자가 비용이나 서비스 구분 등에 대해 관리를 위해 AWS서비스들을 관리하는 그룹이다.

Name, Team, Service, Env의 4개의 필수 값으로 태그한다.

- Name: (ex. 본인의 e-mail 앞의 이름)

- Team: ~

- Service: ~

- Env: dev (dev, test, prod)

4. 버킷 만들기 버튼 클릭

그 이후의 설정은 건드리지 않고, 버킷 만들기 버튼을 클릭한다.

5. 상세 페이지

다 작업 후 , 만들어진 버킷의 상세페이지로 이동한다.

6. 정적 웹 사이트 호스팅 편집

상세페이지 탭에서 속성 탭을 클릭 후 맨 아래로 스크롤을 내리면 정적 웹 사이트 호스팅 카드가 있다.

편집을 눌러 아래와 같이 설정한다.

생성한 S3를 정적 웹 사이트 호스팅으로 사용하도록 설정하는 것이다.

이때 static 파일의 인덱스 경로를 찾을 수 있도록 인덱스 문서의 경로를 `index.html` 로 적어준다.

S3 설정 끝.

7. CloudFront 배포 생성

원본 도메인을 위해서 생성한 S3버킷으로 선택한다.

버킷을 선택시, 자동으로 이름 영역이 채워진다. 웹 사이트 엔드포인트 사용 버튼을 누르지 않는다.

8. OAI 를 생성

CloudFront에서, OAI를 통해 S3 에 접근할 수 있도록 Legacy access identities 를 선택한다.

Legacy access identities 라디오 버튼을 클릭 시, 아래와 같은 영역이 나타나며 새 OAI 생성 버튼을 눌러서 OAI 를 생성한다.

새 OAI 를 아래와 같이 이름을 작성 후 생성 버튼을 누른다.

9. 버킷 정책 업데이트 체크

OAI 가 버킷에 접근 할 권한을 갖는 설정 값이 들어가도록,

`버킷 정책 - 예, 버킷 정책 업데이트` 라디오 버튼을 선택한다.

10. Origin Shield 활성화

Origin Shield 활성화를 예로 선택 후, 서울 리전을 선택한다.

기본 캐시 동작은 (추가 내용) 뷰어 프로토콜 정책을 상황에 맞게 수정해준다

RTI를 통해 cloudbric에서 도메인을 받아야 한다면 SSL redirect 를 cloudbric에서 해주기 때문에 HTTP and HTTPS를 선택하고
Route53을 쓴다고 하면 별도의 리다이렉트를 해주지 않기 때문에 Redirect HTTP to HTTPS를 선택해준다.
가격 분류 - 북미,유럽,아시아, 중동으로 라디오 버튼 클릭
대체 도메인은 현재 없으면 넘기고 있으면 지정한다.
웹 ACL 은 선택하지 않고 넘긴다.