project

S3, CloudFront, Route53을 이용해서 정적 웹 호스팅하기

nana-log 2023. 11. 12. 22:45

이번 프로젝트에서 S3, CloudFront, Route53을 이용하여 정적 웹 호스팅을 하게 되어 정리해놓고자 한다.

 

S3, CloudFront, Route53은 각각 무엇인가?

Amazon S3

Amazon S3의 'S3'는 Simple Storage Service의 약자로, 이 서비스가 사용자에게 간단하고 사용하기 쉬운 스토리지 서비스를 제공한다는 의미를 담고 있다.

 

데이터는 버킷이라고 불리는 리소스에 객체로 저장되며, 정적 웹사이트 호스팅을 지원한다.

여기서 말하는 정적 웹사이트는 동작이나 변화가 없는 웹사이트가 아니라 HTML, CSS, JS 파일이 항상 동일한 리소스인 것을 의미한다.
이에 대해서 너무나도 잘 설명해놓은 블로그가 있어 아래 링크로 첨부한다.

S3의 정적 웹사이트 호스팅이란?

S3는 정적 웹사이트만 호스팅을 지원하기 때문에 프론트 서버에서 HTML & JS 파일을 새롭게 생성하는 SSR을 활용할 때는 사용할 수 없다.

또한, S3 웹사이트 호스팅은 기본적으로 HTTP만 지원한다. 이는 데이터를 암호화하지 않고 전송하기 때문에, 보안이 중요한 웹사이트에서는 문제가 될 수 있다. 이럴 때 Amazon CloudFront를 사용하면 HTTPS를 통해 데이터를 암호화하고 전송할 수 있다. (추가적으로 성능 & 보안 강화도!)

 

Amazon CloudFront

CloudFront는 'Cloud'와 'Front'의 합성어로, '클라우드 앞쪽'이라는 의미를 가진다. 이는 CloudFront가 사용자에게 가장 가까운 위치에서 콘텐츠를 제공함으로써 빠른 콘텐츠 전달을 가능하게 한다는 의미를 내포하고 있다.

 

CloudFront는 Amazon의 콘텐츠 전송 네트워크(CDN) 서비스로, 사용자에게 빠르고 안전하게 콘텐츠를 제공할 수 있게 해준다. CloudFront를 S3 웹사이트와 연결하면, CloudFront가 사용자의 요청을 S3로 전달하고, S3는 요청된 콘텐츠를 CloudFront에게 반환한다. CloudFront는 반환된 콘텐츠를 사용자에게 전달하고, 이 과정에서 HTTPS를 이용해 데이터를 암호화한다.

추가적으로, CloudFront를 사용하면 성능을 향상시킬 수 있다. CloudFront는 전 세계에 위치한 엣지 로케이션에서 콘텐츠를 캐싱하므로, 사용자가 요청을 보내면 가장 가까운 엣지 로케이션에서 콘텐츠를 빠르게 제공할 수 있다. 이렇게 하면 데이터 전송 시간이 단축되어 웹사이트의 성능이 향상된다.
마지막으로, CloudFront는 다양한 보안 기능을 제공한다. 예를 들어, DDoS 공격 방어, 데이터 검사, SSL/TLS 암호화 등을 지원한다. 이런 기능들은 웹사이트의 보안을 강화하는 데 도움이 된다.

 

Amazon Route53

Route53의 'Route'는 '경로'를 의미하며, '53'은 DNS 프로토콜이 사용하는 포트 번호다. 따라서 Route53은 인터넷 트래픽을 올바른 위치로 안내하는 경로와 DNS 서비스에 대한 참조를 통합하여 이름이 지어졌다.

 

Route53은 DNS 서비스로서, 도메인 이름을 IP 주소로 변환하는 역할을 한다.

도메인 이름을 IP 주소로 변환하는 이유는 컴퓨터나 인터넷은 도메인 이름을 직접 이해할 수 없기 때문이다.

인터넷에 연결된 모든 장치는 고유한 IP 주소를 가지고 있다. (ex: 192.168.1.1)
우리가 인터넷을 사용할 때 이렇게 복잡한 숫자를 매번 입력하기는 어렵다. 그래서 도메인 이름을 사용한다. (ex: http://www.google.com)
그런데 컴퓨터나 인터넷은 도메인 이름을 직접 이해할 수 없다. 그래서 도메인 이름을 IP 주소로 변환하는 과정이 필요하다. 이 과정을 DNS(Domain Name System)라고 부르는데, 이 DNS가 도메인 이름을 해당하는 IP 주소로 변환해주는 역할을 한다. 이렇게 해서 우리는 복잡한 IP 주소 대신 쉽게 기억할 수 있는 도메인 이름을 사용하면서도, 컴퓨터는 자신이 이해할 수 있는 IP 주소를 통해 데이터를 전송하고 받을 수 있는 것이다.

 

 

 

배포하는 방법

  1. IAM 권한 설정 (새로 생성하는 것 기준)
    • IAM 페이지의 사용자 탭으로 이동하여 사용자 추가 (따로 콘솔 권한은 주지 않음)
    • 직접 정책 연결을 통해AmazonS3FullAccess & CloudFrontFullAccesss 권한 부여
    • 생성한 사용자를 선택하고 보안 자격 증명 탭에서 액세스 키 생성
  2. S3에서 버킷 생성
    • 사용 용도에 맞게 권한 등은 수정
    • Cloudfront를 함께 사용할 것이므로 퍼블릭액세스는 차단
  3. 생성한 버킷에 코드 업로드
    • build 후 복사 붙여넣기를 할 수도 있고
    • AWS CLI를 통해 업로드 할 수도 있다
  4. Cloudfront에서 배포 생성
    • 원본 도메인/Origin Domain : 방금 생성한 S3 선택
    • S3 버킷 액세스 : Legacy access identities 선택 후 OAI 생성
    • 버킷 정책 : 자동 정책 업데이트 선택
    • 뷰어 프로토콜 정책 : Redirect HTTP to HTTPS
  5. 생성한 Cloudfront 내에서 기본 루트 객체 index.html로 변경
  6. Cloudfront의 오류페이지 탭에서 오류 설정

 

 

 

참고 자료

https://velog.io/@eliz/프론트-배포-톺아보기