리액트 AWS S3 + CloudFront로 배포하기 - 1. S3, CloudFront 설정

프로젝트가 슬슬 끝나가서 배포를 해보려고 합니다.

프론트엔드 배포는 처음인데 여러가지 방법중 AWS S3 + CloudFront 방식으로 배포해보겠습니다.

 

 AWS S3 + CloudFront 방식 흐름 

[사용자 브라우저]
       ↓
[CloudFront CDN]  ← HTTPS (ACM 인증서)
	   ↓
[S3 버킷] ← React build 정적 파일
       ↑
[Route 53 도메인 연결]

 

1. npm run build 결과물을 S3에 업로드

• npm run build로 정적 파일 생성
• 만들어진 build/ 폴더 안의 파일들을 AWS S3 버킷에 올림 (HTML, JS, CSS 등)
• S3 버킷을 정적 웹 호스팅으로 설정

2. CloudFront가 정적 파일을 전 세계에 캐싱

3. HTTPS는 ACM 인증서를 통해 CloudFront에서 자동 처리

4. Route 53으로 커스텀 도메인을 연결하고 관리

 

---

✋ 배포 순서 1. S3

1. AWS S3 만들기

이전 게시물인 아래 게시물을 참고해주길 바란다.

2025.02.19 - [AWS] - AWS S3에 이미지 저장하기 - 1. S3 버킷 만들기

단, CloudFront를 사용하여 배포할 것이기 때문에 퍼블릭 액세스를 차단해줘야 한다!

 

2. S3 버킷 웹사이트 호스팅 활성화하기

잠깐✋ S3 정적 호스팅이란?
이미지, PDF, 엑셀, HTML, JS, CSS 뭐든 저장 가능하다.
그런데 그냥 S3에 올린 파일은 웹사이트처럼 동작하지 않는다.
그래서 S3에 있는 파일을 웹사이트처럼 보여주게 만드는 정적 웹사이트 호스팅을 켜줘야 한다!

 

만들어뒀던 버킷 선택 > 속성 > 정적 웹 호스팅 편집 선택

그 후 호스팅 활성화를 선택하고 인덱스 문서와 오류문서로 띄워줄 페이지를 설정 후 변경사항 저장 선택

 

 

그러면 위와 같이 웹사이트 주소가 만들어지고 들어가보면 403에러가 뜬다.

우리는 퍼블릭 엑세스를 모두 차단해놓기도 했고 아직 S3의 정책이 퍼블릭 접근을 막고 있어 403에러가 나오는 것이다.

 

3. 리액트 앱 빌드해서 S3 버킷에 업로드하기

npm run build

 

아까 설정한 index.html을 해당 도메인에 접근했을때 보여주기 위해선 객체에 index.html 파일이 필요하다.

그래서 먼저 빌드를 해준다.

빌드를 할 때 타입오류가 굉장히 많이 나는데,, 구글링으로 해결해주면 됩니다,,

 

 

빌드된 파일을 가지고 S3에 돌아와서 업로드 해준다.

 

 

업로드를 누르고 모두 성공 상태가 되어야 한다.

 

---

 

S3설정은 이제 끝나서 CloudFront 설정을 시작하겠다! 먼저 CloudFront가 뭔지 알고 넘어가보자!

CloudFront란?

전 세계에 웹사이트를 빠르게 전송해주는 CDN(Content Delivery Network) 서비스이다.

쉽게 말해보자면 리액트 앱을 S3에 올리면 서버는 서울 리전에만 있다.

이 앱을 미국이나 독일에서 접속하면 느리고 지연 시간이 생겨 결국 사용자 이탈률이 증가하게 된다.

이 문제를 CloudFront가 대신 해결해준다는 셈

또한 CloudFront는 HTTPS + 도메인 연결도 설정 가능해서 빠르고 안전한 웹사이트 배포를 가능하게 해준다

 

CloudFront 동작 방식

[사용자 브라우저 - 미국]  
        ↓  
[CloudFront 엣지 서버 (미국 내 서버)] ← 캐싱
        ↓  
[S3 버킷 원본 - 서울]

• 사용자가 CloudFront 주소로 접속
• 가까운 지역의 엣지 서버(캐시 서버)에서 먼저 확인
• 없으면 → 원본(S3)에서 가져와서 → 캐싱
• 다음 접속자부터는 빠르게 제공

 

✋ 배포 순서 2. CloudFront

1. CloudFront 배포 생성하기

 

AWS에서 CloudFront 선택해준 뒤 바로 보이는 CloudFront배포 생성을 선택한다.

 

 

Origin domain (원본 도메인) : CloudFront가 콘텐츠를 가져올 위치 (Origin), 웹사이트 엔드포인트 사용은 누르지 않는다.

 

이름 : 이 원본에 부여할 이름 (CloudFront 내부에서 구분용)

원본 액세스 : CloudFront가 S3 버킷에 접근할 수 있는 권한 설정

Legacy access identities (OAI)은 CloudFront 전용 사용자"를 만들어 S3에만 접근하도록 제한하기 때문에 더 안전하다

 

 

 

Redirect HTTP to HTTPS : HTTP 접속 시 HTTPS로 자동 리디렉션 

 

캐싱에 대해선 기본값을 사용했다. CloudFront의 경우 Default로 24시간의 캐싱 기간을 갖기 때문에 파일이 변경되었을 경우 캐시 무효화를 실행해주어야 변경된 객체가 적용된다.

 

SSL인증서 또한 아직 생성하지 않았기 때문에 일단 넘어가자.

 

2.CloudFront 오류 페이지 정의

 

생성된 CloudFront에 들어가면 오류페이지가 있다. 아까보았듯이 기본적으로 퍼블릭 엑세스가 거부되어있으므로 AccessDenied파일이 뜬다. 그래서 이 403에러에 대한 응답을 직접 설정해줘야한다.

 

403 에러를 받으면 200, /index.html을 보여주게 설정해주었다.

다 설정해준 후 사용자 정의 오류 응답 생성을 선택한다.

 

여기까지 했다면,

배포된 클라우드프론트에서 "배포 도메인 이름"을 복사해서 붙여넣으면 HTTPS로 이동하는 것을 볼 수 있다.

하지만 내가 원하는건 petLog.com 의 주소로 접근하길 원하므로 Route53과 ACM의 도움을 받아볼 예정이다.

이후는 다음 글에서 다뤄보겠다.