[AWS] CloudFront React 정적배포하기 - 5. Cloudfront 배포

AWS CloudFront로 React 프로젝트를 배포하는 과정을 기록해보려고 한다.

글은 2025년 11월 기준 aws 콘솔이다.

 

 

이전 글 확인하기

[AWS] CloudFront로 React 정적배포하기 - 1. 가비아 도메인 구매하기

[AWS] CloudFront로 React 정적배포하기 - 2. Route 53 설정하기

[AWS] CloudFront로 React 정적배포하기 - 3. AWS Certificate Manager ACM인증서 발급

[AWS] CloudFront로 React 정적배포하기 - 4. S3 버킷 생성 및 설정

 

 

 

1. AWS console에서 cloudfront 에 접속한다.

cloudfront는 region이 global로 뜨는게 맞다!

우측에 Create distribution 버튼을 클릭해준다.

 

 

2. 아래의 정보들을 입력하고 하단의 Next 버튼을 클릭해준다. 회색은 선택값!

1: cloudfront distribution 이름

2: 부가 설명 (선택)

3: React는 Single website or app 기본 설정 그대로 두면 된다.

4: 이 칸은 비워둬야한다! 우리는 route 53 Hosted zone이 있기때문에, 비워둬야함!

5: 태그는 선택사항.

 

 

 

3. Origin 설정해주는 화면. Amazon S3 > Browse S3 버튼을 클릭해준다.

 

그러면 아래와같이 이전에 생성했던 S3 버켓이 보인다.

해당 버킷을 클릭하고 우하단의 Choose 버튼을 클릭한다.

 

 

4. 이제 다른 설정들은 그대로 두면 되는데,

여기서 'Allow private S3 bucket access to CloudFront' 부분은 꼭 체크가 돼있는걸 확인하자.

이걸 체크하면 CloudFront가 자동으로 OAC(Origin Access Control) 을 생성해서
S3 버킷을 “CloudFront만 읽을 수 있게” 만들어주고, 내부적으로 

• 새 OAC가 자동 생성됨
• S3 버킷 정책에 필요한 JSON을 자동 제안 (다음 단계에서 복사/붙여넣기 가능)

이런 설정이 된다!

 

 

5. security 설정이다.

Enable security protections를 선택하면 월에 약 $14 정도가 부과된다고 한다.

Enable security protections	SQL injection, XSS, 봇, IP 차단 등 일반적인 웹 공격 방어. AWS가 관리하는 룰셋을 자동 적용.	유료 (대략 $14/1000만 요청당/월)
Do not enable security protections	단순 정적 사이트일 경우 방화벽 생략. CloudFront만 사용.	무료

 

• MemeDuck 프론트는 정적 사이트(SPA) 로, 서버 API나 로그인 요청을 직접 받지 않음.
• 공격 표면이 거의 없기 때문에, CloudFront + HTTPS만으로 충분히 안전.
• WAF는 나중에 백엔드 API (예: ALB, API Gateway) 앞단에서 쓰는 게 효과적

나는 위와같은 이유로 Do not enable security protections 를 선택했다.

 

 

 

 

6. Distribution 생성하기

지금까지 입력한 설정들을 확인해주는 화면이다.

모두 맞게 되어있으면 Create distribution 버튼 클릭!

 

7. 생성 후 조금 기다리면, logging 탭에서 Distribution status가 enabled로 바뀐다.

General에 있는 d123abcde.cloudfront.net 같은 도메인이 생기고, 여길 들어가보면  

 

이런식으로 Access Denied가 뜬다.

아직 설정을 다 안해줬으니까 이렇게 뜨는게 맞다. 그럼 마저 설정하러 가보자!

 

 

 

다음 단계로 넘어가기 전에, dns 전파가 완료됐는지 확인해야한다.

로컬 cli 아무데에나 아래 코드를 쳐서 가비아에 등록한 route53 네임서버가 뜨는지 확인해보자.

nslookup -type=ns memeduck.site 8.8.8.8

nslookup -type=ns memeduck.site

 

 

 

다음 단계에서 acm 인증서를 검증하고, cloudfront와 연결할것이다.