CloudFront + S3 + ACM + Route53으로 프론트(Vite + React) 정적 파일 배포 하기

 

우선 도메인을 사둔게 있다고 가정하고 진행하겠습니다. 저는 가비아에서 구매했습니다.

구현 순서는 다음과 같습니다.

구현 순서

1. 구매한 도메인 Route53 호스팅 영역에 등록
2. 등록 후 ACM으로 버지니아 북부에서 인증서 요청
3. S3로 프론트엔드 빌드 파일 정적 웹호스팅을 통해 배포
4. CloudFront와 S3 연결해서 CloudFront 도메인으로 배포된 것 확인
5. Route53에 도메인 등록하고 도메인으로 배포 되었는지 확인

1. 구매한 도메인 Route53 호스팅 영역에 등록

우선 콘솔에서 Route53에 들어가서 호스팅 영역을 생성합니다.

저는 mycertione.com 이라는 도메인을 구매해서 다음과 같이 입력해 주었습니다.

그냥 도메인 이름만 입력하고 호스팅 영역을 생성합니다.

 

그러면 NS와 SOA가 나오는데

 

NS는 네임서버로 DNS 과정 중 리졸버가 IP를 찾는 과정에서 루트 네임서버 → TLD(.com)네임서버로 가는데 .com 네임서버에서 mycertione.com 의 NS 레코드(Route53의 4개의 NS)를 반환해주고 이 4개의 네임서버가 IP를 반환해주는 역할을 합니다.

 

SOA는 호스팅 영역의 권한의 시작을 의미하는 정보로, 관리자 이메일 주소, 캐싱 수명 값(TTL), 변경 이력 정보 같은 것을 포함합니다. SOA 레코드는 캐시 유지, 최신성 유지, Secondary DNS와 동기화 등에 사용된다고 합니다.

 

다시 돌아와서 여기서 나오는 4개의 NS를 가비아에 등록해줘야 합니다.

가비아 홈페이지에 접속하여 My가비아 - 도메인 - 관리 에 들어가면 네임서버가 있습니다.

 

여기에 Route53에서 나온 4개의 네임서버들을 등록하고 적용해줍니다.

이러면 도메인이 Route53 호스팅 영역에 등록이 되었습니다.

 

2. 등록 후 ACM으로 버지니아 북부에서 인증서 요청

가장 중요한 것이 리전을 꼭!!! 버지니아 북부로 해주어야 한다는 것입니다.

리전을 버지니아 북부로만 설정해줘야 하는지 어떻게 알았냐구요? 저도 알고 싶지 않았습니다 ㅎㅎ

그리고 콘솔에서 “Certificate” 를 입력하면 AWS Certificate Manager가 나옵니다 여기에서 요청을 클릭합니다.

그리고 퍼블릭 인증서 체크 되어 있는 것을 그대로 놔두고 다음으로 가면 다음과 같은 화면이 나오는데 나머지를 그대로 두고 도메인 이름만 설정해주고 요청을 누릅니다.

그러면 다음과 같은 화면이 나오는데 여기에서 "Route53에서 레코드 생성" 버튼을 클릭해 레코드를 생성 해주면 10초정도 지나면 인증서가 발급 됩니다.

 

3. S3로 프론트엔드 빌드 파일 정적 웹호스팅을 통해 배포

이제 React + Vite로 작성한 코드를 빌드해서 빌드 파일을 올리겠습니다.

프로젝트 루트 디렉토리(package.json 과 같은 레벨)로 가서 다음 명령어를 입력합니다.

npm run build

그리면 dist 디렉토리 내부에 다음과 같은 파일들이 생깁니다. CRA React일 경우 build 파일이 생길 것입니다.

이 파일들을 S3 버킷에 올릴 것입니다.

 

우선 콘솔에 들어가서 S3를 생성합니다.

이름은 mycertione-front 로 정하고

객체 소유권 - ACL 비활성화됨(권장)

이 버킷의 퍼블릭 액세스 차단 설정 - 모든 퍼블릭 액세스 차단

버킷 버전 관리 - 비활성화

태그 - X

기본 암호화 - SSE-S3를 사용한 서버측 암호화

버킷 키 - 활성화

로 설정하고 버킷을 만듭니다.

 

그리고 버킷에 들어가면 다음과 같이 나오는데 업로드를 클릭합니다.

아까 생성했던 폴더 추가해서 dist 폴더를 업로드 합니다.

그럼 최상위에 dist 경로가 나오는데 이래서는 정적 웹 사이트 호스팅을 할 수가 없습니다.

index.html이 루트 디렉토리에 있어야합니다. 그래서 dist 폴더 아래에 있는 내용을 루트로 꺼내줍니다.

 

이동을 누르고

루트로 꺼내겠다고 지정해주면 됩니다.

그럼 루트에 index.html이 잘 나옵니다.

 

그리고 속성 탭을 선택하고 제일 아래로 내려가면 정적 웹 사이트 호스팅이 있습니다.

이것을 활성화 해주고 인덱스 문서와 오류 문서를 index.html 로 설정해줍니다.

그리고 정적 웹 사이트 호스팅 탭의 링크를 브라우저에 입력해보면

403 에러가 뜰텐데 이는 모든 퍼블릭 액세스를 차단했기 때문입니다.

권한 탭 - 모든 퍼블릭 액세스 차단 체크박스 해제 하면 로컬에서 봤던 화면이 잘 나오지~는 않고 하나를 더 해줘야 합니다. S3 리소스 정책을 설정하는 건데요, S3:GetObject 정책을 넣어줘야 조회가 잘 됩니다.

권한 탭 - 버킷 정책 편집에 다음 내용을 입력해줍니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForStaticWebsite",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mycertione-front/*"
        }
    ]
}

그리고 브라우저에 S3 엔드포인트를 입력해주면 화면이 잘 나옵니다. 물론 백엔드가 연결이 되지 않아 네트워크 에러가 뜨긴 하지만 프론트엔드 배포는 잘 되었습니다.

 

4. CloudFront와 S3 연결해서 CloudFront 도메인으로 배포된 것 확인

사용 이유

CloudFront를 사용하는 이유는 성능, 보안, 비용 관점에서 여러가지 이점이 있습니다.

우선 성능 측면에서 CloudFront는 CDN 서비스로 글로벌 엣지 로케이션이 있습니다.

S3는 리전 기반 서비스이므로 한국 리전의 S3를 미국의 사용자가 접근하면 느릴 수 있습니다.

글로벌 사용자에게 더 빠른 속도로 콘텐츠를 제공하기 위해 사용합니다.

그리고 보안 측면에서 도메인 연결이 쉽고 HTTPS를 지원합니다. 그리고 S3 접근 지점을 CloudFront로 제한 할 수 있습니다.

마지막으로 비용 측면에서 캐싱을 통해 자주 조회되는 파일을 CloudFront 캐시에 저장해주어 S3 요청 횟수가 줄어들고 비용 절감이 가능해집니다.

구현

아까 3단계에서 풀었던 퍼블릭 액세스 차단을 다시 차단합니다. S3버킷 - 권한 탭에서 설정합니다.

그리고 콘솔에서 CloudFront로 이동해서 배포를 생성합니다.

Origin domain - 아까 생성했던 S3로 설정

원본 액세스 - 원본 액세스 제어 설정(권장)

Create new OAC - S3 OAC 생성

 

그리고 뷰어 프로토콜 정책 - Redirect HTTP to HTTPS 로 설정합니다.

캐시 키 및 원본 요청은 기본 값으로 둡니다.

그리고 WAF는 일단 설정하지 않겠습니다. WAF는 L7 레벨의 방화벽으로 SQL Injection, XSS 등 널리 알려진 공격을 이미 학습된 패턴을 통해 방어하는 역할을 합니다.

 

그리고 설정에서 대체 도메인 이름(CNAME)에 항목을 추가하여 www.mycertione.com을 추가하고

여기서 대체 도메인 이름을 생성하지 않으면 5단계에서 CloudFront 배포가 뜨지 않는 문제가 있었습니다.

그리고 2단계에서 생성했던 SSL 인증서를 달아줍니다.

SSL 인증서를 버지니아 북부에서 생성하지 않았다면 나오지 않을 것입니다. 저는 버지니아 북부에서 생성했기 때문에 나옵니다.

그리고 다른 것은 기본값으로 두고 생성해줍니다.

배포가 생성되었으면 배포 - 원본 으로 이동하여 S3 원본을 클릭하고 편집을 누릅니다.

그리고 아래로 내려가보면

다음과 같이 정책 복사하는 부분이 나올텐데 클릭하여서 S3의 버킷 정책에 복사하여줍니다.

버킷 정책은 S3버킷 - 권한 탭에 있습니다.

그리고 마지막으로 배포 - 오류 페이지에 접속하여 사용자 정의 오류 응답을 생성해줍니다.

그리고 CloudFront URL을 브라우저에 입력하면 화면이 잘 나오는 것을 확인할 수 있습니다.

 

5. Route53에 도메인 등록하고 도메인으로 배포 되었는지 확인

4단계에서는 CloudFront 도메인으로 접속했다면 이제는 www.mycertione.com 으로 접근하려 합니다.

그걸 하기 위해 콘솔에서 Route53 - 호스팅 영역 으로 이동합니다.

아까 있었던 NS, SOA 제외 CNAME이 하나 더 생겼는데 이건 ACM 인증서에서 DNS 검증에 CNAME을 사용했기 때문입니다.

이제 여기에 A 레코드를 생성하겠습니다.

레코드 이름 - www

레코드 유형 - A 레코드

별칭 활성화

CloudFront에 대한 별칭

www.mycertione.com 선택

아까 CloudFront 설정할 때 대체 도메인에 www.mycertione.com 으로 설정해주어 배포 선택이 됩니다.

이렇게 레코드를 생성하고 10초 정도 지나면 도메인으로 접근이 잘되는 것을 확인할 수 있습니다.

 

마무리하며

처음에 S3 + CloudFront 배포 후 Route53 + ACM을 통해 도메인에 SSL 인증서 달아서 접근하는 부분이 너무 어려웠었습니다.

가비아에 도메인을 샀는데 어떻게 Route53에서 어떻게 가져올 수 있고, SSL 인증서는 어떤 방식으로 다는 것이고, 각종 S3 권한 설정 혹은 CloudFront 설정들을 하는 것이 엄청 헷갈렸습니다.

그래서 이글이 조금이나마 이 구조로 프론트엔드 배포를 하려고 하시는 분들께 조금이나마 도움이 됐으면 좋겠는 마음으로 정성스럽게 포스팅을 작성하였습니다.

도음이 되셨으면 좋겠네요.

참고 출처

다음 블로그가 매우 배포 방식이 잘 정리되어 있었습니다. 이를 참고하여 진행하였습니다.

https://velog.io/@kcj_dev96/S3Cloudfront를-활용한-정적-웹-배포

S3+Cloudfront를 활용한 정적 웹 배포