이번에 식구하자 개인 프로젝트를 진행하면서 React 파일과 S3 버킷 등록 및 CloudFront와의 연결, Route 53을 통해 호스팅을 진행했었습니다.
그래서 이 포스팅에서는 S3와 Route 53, Cloudfront가 그래서 무엇인지!에 대해 알아보고 웹 호스팅 과정에 대해서 알아보도록 하겠습니다!!
📌 0. 시작하기 전에
해당 글은 S3로 정적 호스팅 중인 웹에 CloudFront를 연동하는 과정을 정리해 보려고 합니다.
과정을 알아보기 전에 간단히 S3, CloudFront, Route53가 뭔지 알아보고 진행해 보도록 하겠습니다!
추가적으로 기본적인 S3와 CloudFront의 연동, 그리고 Route53을 이용한 도메인(그중에서도 서브도메인) 연결 과정을 간략하게 다룹니다.
+) 도메인 발급 과정은 다루지 않습니다!!!
📌 1. S3, CloudFront, Route53가 뭔데?
S3란?
간단하게 말하자면 스토리지를 제공해주는 서비스이다. 예를 들어 USB를 사용한다고 할 때, 우리는 USB를 이용해 여러가지 데이터를 용량 제한 하에서 저장하고 이용할 수 있다. 사진, 동영상 등등 다양한 데이터를 USB에 저장하고 보관할 수 있다.
+) 추가로 s3를 이용해서, 백엔드에서 이미지 첨부기능을 구현할 수 있다!
S3는 마찬가지로, 웹 서비스 인터페이스를 통해 제공되는 스토리지 서비스이다. 웹 상에서 어디서나 원하는 양의 데이터를 저장하고 검색할 수 있다.
우리는 S3를 이용하기 위해서 다음과 같은 작업을 거칠 수 있다.
1. 버킷 만들기
앞선 예시와 동일한 USB 예시를 들어보자면, USB를 구매하는 것과 동일하다고 생각하면 될 것 같다. 우리는 스토리지 서비스를 이용하기 위해서는 버킷이라는 것을 만들어야한다. 버킷은 바구니로 데이터를 담는 컨테이너 역할을 수행한다.
2. 데이터 저장하기
1번에서 만든 버킷에 원하는 데이터를 무한정으로 저장할 수 있다. 물론 용량 제한에 도달하면 요금이 발생할 수도 있다.
3. 데이터 다운로드
저장한 데이터를 물론 다운로드 할 수 있다. 직접 다운로드 하거나, 혹은 다른 사람이 다운로드 하도록 허용할 수도 있다.
4. 권한
USB에 중요한 내용이 담겨있어 누구나 업로드 또는 다운로드 할 수 없게 하기 위해서는 USB를 잠궈놓거나, 인가된 사용자에게만 USB를 전달하는 작업이 필요하다. S3도 마찬가지로 업로드 또는 다운로드 하려는 사용자에게 액세스 권한을 부여할 수 있다.
5. 표준 인터페이스
개발 도구에서 사용할 수 있도록 REST 및 SOAP 기반 인터페이스를 제공한다.
CloudFront란?
CloudFront는 아마존 웹 서비스(AWS)의 전 세계적으로 배포된 콘텐츠 전송 네트워크(CDN)다. CDN은 사용자가 웹 페이지나 애플리케이션을 요청할 때 해당 콘텐츠를 전 세계의 캐시서버에 저장하고, 사용자가 위치한 가장 가까운 서버에서 콘텐츠를 제공함으로써 더 빠르고 안정적인 전송을 가능하게 한다. CloudFront는 이러한 CDN 기능을 제공하여 웹 콘텐츠의 속도와 가용성을 향상시킨다.
CloudFront 사용이유
빠른 콘텐츠 전송: CloudFront는 전 세계에 분산된 엣지 로케이션을 가지고 있어 사용자와 가장 가까운 위치에서 콘텐츠를 제공한다. 이는 지연 시간을 줄이고 콘텐츠의 로딩 속도를 향상시키는 데 도움이 된다. 사용자 경험을 향상시키고 고객 이탈률을 감소시킬 수 있다.
고가용성과 내결함성: CloudFront는 다중 엣지 로케이션 및 오리진 서버와의 연결을 통해 고가용성과 내결함성을 제공한다. 엣지 로케이션 간의 부하 분산과 장애 대응 기능을 통해 콘텐츠 전송 중에도 안정적인 서비스를 유지할 수 있다.
확장성: CloudFront는 수천 대의 서버를 보유하고 있으며, 트래픽이 증가할 때 자동으로 확장된다. 이는 대규모 트래픽을 처리할 수 있으며, 부하 분산을 통해 안정성과 성능을 유지할 수 있음을 의미한다.
비용 효율성: CloudFront는 효율적인 가격 모델을 제공하여 데이터 전송 비용을 줄일 수 있다. 또한, 콘텐츠의 캐싱을 통해 웹 서버의 부하를 줄여 서버 비용을 절감할 수 있다. CloudFront를 사용하면 대역폭 비용이 절감되고 인프라 비용을 효율적으로 관리할 수 있다.
보안 기능: CloudFront는 SSL/TLS 암호화를 지원하여 콘텐츠 전송 중에 보안을 유지한다. 또한, AWS WAF(Web Application Firewall)와 통합되어 웹 애플리케이션에 대한 보안을 강화할 수 있다.
다양한 기능 제공: CloudFront는 동적 콘텐츠 제공, 커스텀 도메인 사용, 캐싱 제어, 압축 및 압축 해제, 미디어 스트리밍, 가상 경로 등 다양한 기능을 제공한다. 이를 통해 웹 애플리케이션의 요구에 맞춰 유연한 구성이 가능하다.
Route 53란?
AWS가 제공하는 DNS 서비스
우리가 S3로 웹을 호스팅하게되면 AWS가 생성해주는 URL을 사용하게 되는데, 이 URL을 우리가 가진 주소(예. sikguhaza.site/ )와 연결해주는 역할을 하게 됩니다. 사용자들은 Route53에 적용한 URL로 웹페이지에 접속하게 됩니다.
2. 정적 웹 호스팅 과정
📌 2-1. 개요(큰 그림 잡기)
📌 2-2. S3 정적 웹 호스팅
(1) S3 콘솔에 접속하여 ‘버킷 만들기’ 버튼을 클릭합니다.
(2) 버킷 이름을 설정한 뒤(보유한 도메인을 연결할 것이라면 어떤 이름도 상관없습니다), ‘모든 퍼블릭 엑세스 차단’에 체크된 설정을 해제한 뒤 ‘버킷 만들기’를 클릭합니다.
다음으로 생성한 버킷의 속성 탭으로 이동합니다
스크롤을 아래로 내리면 정적 웹 사이트 호스팅이 있습니다. 디폴트로 비활성화되어있는데 활성화로 바꿔줘야하기 때문에 편집을 클릭합니다
저는 이미 활성화를 한 상태입니다
호스팅을 활성화한 뒤에 인덱스 문서와 오류 문서를 index.html로 설정해주고 변경사항 저장
다음으로는 권한 설정을 해줘야 합니ㄷ다. 아래쪽의 버킷 정책의 편집하기를 클릭합니다
디음으로는 권한 설정을 해줘야합니다. 아래쪽의 버킷 정책의 편집하기를 클릭!
정책 생성기를 사용하면 쉽게 정책 생성이 가능합니다 (여기서 버킷 ARN 기억/복사해두기!!!!!)
1 : S3 정책을 생성할거니까 type으로 S3 Bucket Policy를 선택
2 :
Effect로 Allow를 선택
Principal을 *로 설정 (모든 user)
Actions는 GetObject를 선택 (버킷 접근 권한)
ARN의 경우 AWS의 버킷 정책 탭에 있던 버킷 ARN을 그대로 가져와서 뒤에 /*만 붙여줍니다
그리고 Add Statement를 선택하면 정책 생성! 잘못 설정한 건 없는지 확인하고 Generate Policy를 선택
선택 후 JSON 구문이 생성되는데 이 구문을 복사해서 버킷 정책에 붙여넣기한 뒤 저장!!\
2-2 S3에 코드 업로드 참고
그냥 냅다 드래그앤 드롭이나, 업로드 할 수도 있지만 AWS CLI를 사용해서 간편하게 업로드할 수 있습니다!
링크 참조
문서를 참고해 운영체제에 따라서 AWS CLI를 설치!!
USER 추가
AWS CLI 설치가 완료되면 터미널에 다음과 같은 명령어를 입력
aws configure --profile [IAM 사용자 이름]Key ID : IAM 사용자 추가할 때 다운받았던 CSV 파일의 Access key ID
Access Key : IAM 사용자 추가할 때 다운받았던 CSV 파일의 Secret access key
region name : ap-northeast-2
output format : json
입력하면 사용자 설정 완료됩니다.
배포
npm run build빌드된 폴더를 준비하고 명령어를 입력후
aws s3 sync ./build s3://[S3 버킷 이름] --profile=[IAM 사용자 이름]배포 완료!!
여기까지 하면 S3 버킷 속성의 정적 웹 사이트 호스팅에 있는 엔드포인트에 접속했을 때 사이트가 제대로 배포된 것을 확인 가능합니다!!
📌 2-4. CloudFront 설정
CloudFront 탭으로 이동해서 배포 생성을 해준다. S3 버킷에 있는 원본 도메인을 선택해줍니다
다음으로 S3 버킷 엑세스가 OAI 사용 안 함으로 설정되어있을텐데 OAI 사용으로 변경해준다. 원본 엑세스 ID가 없으면 OAI를 생성해주고 있으면 기존 ID 선택!
또 아래로 쭉 내리다보면 캐시 동작 설정이 있습니다. 여기서 뷰어 프로토콜 정책을 Redirect HTTP to HTTPS로 설정해주고 나머지 default 상태로 건들지 않습니다!
그런데 저희는 커스텀 도메인 설정을 Route53으로 해줄 예정이므로 CloudFront는 잠시 그대로 놔두고 Route53으로 이동!!
📌 2-5. Route 53 설정
호스티 영역을 생성
본인이 소유하고있는 도메인을 입력해줍니다
호스팅 영역 생성하면 다음과 같은 화면을 볼 수 있습니다.
저는 이미 설정을 완료한 상태이지만, 초기에는 NS, SOA 유형만 있습니다!
📌 2-5. 다시 CloudFront 이동
아래로 내리다보면 대체 도메인 이름 설정하는 칸이 있다. 내가 소유하고 있는 도메인(Route 53에 호스팅한 도메인)을 입력합니다. 근데 여기서 https 연결을 위해서는 SSL 인증서가 필요합니다!!
SSL 인증서 요청 하기
인증서 요청 탭을 누르면 AWS Certificate Manager로 이동합니다.
마찬가지로 이미 소유하고 있는 도메인 이름을 입력하고 인증서 요청을 진행. 아무 것도 처리해주지 않으면 계속 검증 대기 중일 것입니다.
인증서의 도메인 탭에서 Route 53에서 레코드 생성을 선택해서 CNAME을 생성해야합니다
다음과 같은 창이 뜰 것입니다. 레코드 생성
이후 5분 정도 기다리면 다음과 같이 상태가 검증 대기 중에서 발급됨으로 변경됩니다. (검증 완료 시간은 정확하지 않고 저의 경우 5분정도 걸렸습니다!!)
그럼 다시 CloudFront로 이동해서 생성된 SSL 인증서를 선택해줍니다!!
추가로 기본값 루트 객체에 index.html을 설정해주고 드디어 배포!!!
❗️Cache Invalidation❗️
CloudFront 는 S3파일이 엣지 로케이션에 캐싱되어 저장되는데, S3에 파일을 새로 업로드 하여도 바로 적용되지 않습니다!
그래서 정적 파일을 업데이트 후, 바로 적용하고 싶을 때, CloudFront의 무효화 탭에 이동해서 무효화 생성을 해주면 됩니다!!!!
객체 경로는 /* 입니다!!
2-6 마지막.. Route 53 A 레코드 추가!
CloudFront 주소와 Route 53으로 생성한 도메인을 연결하기 위해 Route 53에 A 레코드를 추가해줘야 합니다
Route 53에서 레코드 추가를 선택하고 다음과 같이 A 레코드를 선택한다. 별칭을 on해주고 CloudFront 배포에 대한 별칭을 선택하면 내가 배포한 CloudFront를 선택할 수 있다.
그리고 레코드 생성하면 배포 링크에 접속이 가능합니다!!
A 레코드 : 도메인 name에 IP Address를 매핑 (직접적으로 IP가 할당되어 있기 때문에 IP가 변경되면 직접적으로 도메인에 영향을 받는다)
CNAME : 도메인에 도메인 별칭을 부여 (도메인에 도메인이 매핑되어 있기 때문에 IP의 변경에 직접적인 영향을 받지 않는다)
참고
https://jojoldu.tistory.com/434
https://zzanzu.github.io/s3-cloudfront-route53-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%EC%A0%95%EC%A0%81-%EC%9B%B9-%ED%98%B8%EC%8A%A4%ED%8C%85%ED%95%98%EA%B8%B0%E3%84%B9
https://velog.io/@krkorklo58/AWS-S3%EB%A1%9C-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0
