AWS S3, CloudFront 배포기

Vite React Typescript 템플릿으로 만든 프로젝트를 AWS 에 배포하는 과정을 남긴 블로그 글 입니다.
얼마전 Vite 로 만든 프로젝트를 배포하려던 중 생겼던 일 입니다.
제작한 페이지는 쿠폰 등록 페이지로써 글로벌하게 배포되어야 했으며, 게임이 잘 될 경우 트래픽이 어느정도 발생할 여지가 있습니다.
사내 프론트엔드 레포지토리는 Vercel 을 활용해 배포하고 있었고, 딸깍으로 쉽게 배포할 수 있으므로 해당 프로젝트도 Vercel 에 배포를 했습니다.

배포 후 배포완료와 도메인을 공유드렸는데, 선임 개발자분께서 트래픽 요금에 대한 이야기를 해주셨습니다.
Vercel 이 팀단위로 과금이 되어지고는 있지만, Vercel 이 땅파서 장사하는것도 아니고 트래픽 요금이 있을것이다 라고 말씀해주셔서 찾아보니, Vercel 도 트래픽 제한이 있다는 것을 알게 되었습니다.
마침 회사가 배스핀글로벌과 파트너쉽을 맺어 CDN 도 할인이 된다고 하여 AWS 를 활용해 S3 정적 웹 페이지 배포에 CloudFront 를 붙여 CDN 을 태워보기로 했습니다!
해당 포스팅은 사내 배포 과정을 기록을 남기는 것 보다는 개인 프로젝트를 S3 에 올리고, CloudFront 를 붙여보는 것 까지 알아보도록 하겠습니다.

• CloudFront 는 엣지 로케이션의 캐싱을 활용해 CDN 을 쉽게 구현할 수 있는 AWS 서비스 입니다. CDN 을 태우게 되면 로딩 속도가 빨라져 사용자 경험이 우수해지며 CloudFront 에 SSL 인증서를 붙여 HTTPS 프로토콜을 사용할 수 있게 해주며 OAI 를 활용해 CloudFront 를 통해서만 원본에 접근하여 원본에 대한 보안을 유지할 수 있습니다.
• 오리진 쉴드를 통해 캐싱 계층에 하나의 계층을 더해 오리진에 부하를 줄일 수 있는 기능도 있지만 해당 포스팅에서는 다루지 않습니다.

필요한 것

• 도메인
  도메인은 AWS 의 Route53에서 구매했습니다. 도메인별로 가격이 다른데 .click 을 붙인 도메인이 연간 3달러로 저렴했습니다.

• 인증서 (HTTPS 인증을 위해)
  인증서 또한 AWS 에서 제공해주는 ACM 을 활용했습니다. 간단하게 ACM 에서 인증서를 발급받아서 Cloudfront 에 붙이도록 하겠습니다. 이때 인증서는 반드시 버지니아 북부 리전에서 발급받아주세요!!

• CI/CD 를 위한 IAM
  해당 배포기에서는 Github actions 를 활용해 CI/CD 파이프라인을 구현해볼 계획입니다. Git Workflow 에서 AWS 에 접근할 수 있도록 S3FullAccess, CloudFrontFullAccess 권한을 가진 사용자를 만들어주세요!

• 빌드된 프로젝트 결과물
  S3 에 올라갈 프로젝트 결과물

과정

S3 버킷 생성, 빌드 결과물 업로드

먼저 S3 버킷을 생성합니다.
버킷의 이름은 고유한 이름이여야 합니다.
그 외에 모든 설정은 기본값으로 하여 버킷을 생성합니다.

CloudFront 배포 생성

CloudFront 서비스에 들어가 배포 생성을 클릭해줍니다.

S3 에 저장된 원본 도메인을 선택해주시고, 원본 액세스에 OAI 를 붙이기 위해 Legacy access identities 를 클릭해줍니다.
원본 액세스 ID를 선택해주시는데, 없으시면 간단하게 새 OAI 생성을 클릭해 생성해주세요.
그리고 버킷 정책을 업데이트 하기 위해 예를 클릭합니다.

OAI 를 붙여 S3 버킷에 직접 접근할 수 없도록 함으로써 보안성을 향상시킵니다.

뷰어 프로토콜 정책으로 Redirect HTTP to HTTPS 를 클릭해주세요. HTTP 로 들어오는 요청을 HTTPS 로 리다이렉트 시켜줍니다.

WAF 서비스를 활용해 보안성을 높일수 있습니다. 하지만 WAF 는 과금이 됨으로 선택하지 않겠습니다. 만약 보안이 중요하다면 WAF 를 활성화 시켜주세요. 간단한 설정으로 웹 공격을 방어할 수 있습니다.

대체 도메인에 발급받은 도메인을 추가해주시고, HTTPS 프로토콜을 사용하기 위해 발급받은 SSL 인증서를 입력해주세요.

마지막으로 기본값 루트 객체에 버킷에 저장된 html 파일을 넣어주세요.

이렇게 배포 생성을 하면 CloudFront 배포가 간단하게 끝납니다.

배포가 생성된 후 배포를 클릭하여 오류 페이지 탭을 클릭합니다.

에러 코드에 대응하는 응답 페이지를 설정해줘야 합니다. 배포할 프로젝트는 SPA 이기 때문에 index.html 파일 하나만 가지고 있습니다. 하여 응답 페이지 경로에 /index.html 을 넣어줍니다.

Route 53 레코드 생성

도메인으로 들어오는 트래픽을 해당 배포로 라우팅 시켜줄 레코드를 생성해줍니다.

A 레코드로 생성해주며 별칭을 통해 AWS 서비스로 라우팅이 되도록 매핑시켜줍니다.

모든 배포 과정이 끝났습니다!

결과보기

룰렛을 만든게 친구들이랑 피시방에서 게임을 하다가 음료수 내기를 하는데 쓰려고 만들었는데, 마침 배포 과정도 기록하고 하려 배포했습니다.
AWS 자격증을 공부중에 서비스를 알아가는 재미가 있었는데 공부한 지식을 바탕으로 배포하는 것도 아주 재미가 쏠쏠하더군요.

마무리하며

다음 기록으로는 Github actions 를 활용해 CI/CD 를 구현하는 것을 해봐야겠습니다.
감사합니다!