본문 바로가기
클라우드/AWS

[AWS] S3, CloudFront, Route 53 및 ACM을 활용하여 정적 웹사이트 호스팅 하는 방법

by cloudgarden 2024. 8. 5.

<순서>

1. 정적 라우팅
2. CloudFront 배포 생성
3. Route53으로 돌아가서 Alias 설정
4. 등록해둔 도메인 접속 확인

 

 

1. 정적 라우팅

*'loginwebbucket' 파일을 버킷에 생성해둔 상태

Amazon S3 > Buckets > loginwebbucket 클릭 후 Propoerties 맨 밑에 있는 Static website hosting Edit 클릭

 

 

설정 후

 

2. CloudFront 배포 생성

S3 버킷이 퍼블릭으로 설정되어 있지만, 아직 외부에서 접근할 수 없는 상태임

이를 해결하기 위해 Route 53과 ACM을 사용하여 CloudFront를 통해 적절한 도메인 주소로 접근할 수 있도록 설정하기

이때 S3 버킷을 선택하고 'Use website endpoint'를 선택함

 

 

'Use website endpoint' 버튼 누르면 아래처럼 바뀜!

 

 

Viwer protocol policy: Redirect HTTP to HTTPS 선택

선택 이유 

ㄱ. 보안 강화: HTTPS는 HTTP보다 안전하게 데이터를 전송함

HTTPS는 데이터를 암호화하여 전송하기 때문에, 중간에 도청이나 변조가 어려움

따라서 사용자들이 더 안전하게 웹사이트를 이용할 수 있음

 

ㄴ. SEO 이점: 구글을 포함한 많은 검색 엔진들이 HTTPS를 사용하는 웹사이트를 우선적으로 노출함 (검색 엔진 최적화에 이점)

 

Allowed HTTP methods: GET, HEAD 선택

선택 이유

ㄱ. GET: 사용자가 서버로부터 데이터를 요청할 때 사용됨

웹 페이지를 읽거나 이미지를 가져올 때 주로 사용됨


ㄴ. HEAD: GET과 유사하지만, 서버는 응답 본문(body)을 반환하지 안혹,
HTTP 헤더 정보만 반환함

이는 리소스의 메타데이터(파일 크기, 마지막 수정 시간 etc)를 확인하는 데 유용함

 

* 정적 웹사이트 배포에서는 웹 페이지, 이미지, JavaScript 파일 등과 같은 정적 콘텐츠를 제공하는 것이 주 목적

이러한 경우, 사용자는 파일을 서버에서 받아오기만하기때문에 서버에 데이터를 변경하거나 업로드하는 요청을 할 필요 없음

=> 파일을 가져오는 데 필요한 HTTP 메서드인 GET과 메타데이터를 확인하는 데 사용하는 HEAD만 적용함으로써 불필요한 메서드 호출을 막고 웹사이트의 보안과 성능을 최적화할 수 있음

 

 

Cache는 맨 위에 선택

 

 

버지니아에서 생성한 SSL 선택

 

 

WAF 보안 설정

 

 

CloudFront 생성된 거 확인

 

 

Amazon S3 > Buckets > loginwebbucket 에서 Permission > Bucket Policy의 Resource 확인

 

 

3. Route53으로 돌아가서 Alias 설정

 

 

방금 위에서 만든 CloudFront 선택

 

 

4. 등록해둔 도메인 접속 확인

www.jungwon.store 

등록해둔 도메인에 들어가면 확인 가능!

 

 

< 프로젝트 메모 >

1. ALB를 사용하지 않은 이유

=> S3는 정적 콘텐츠를 배포하는데 적합하기 때문에, ALB 대신 S3를 사용함

*프론트엔드 코드가 S3 버킷에 존재함

 

2. 정적 웹사이트가 S3에 호스팅되고, 백엔드 서비스인 API는 API Gateway를 통해 제공될 예정

*API Gateway는 클라이언트 요청을 받아서 Lambda 함수나 다른 백엔드 서비스로 전달하는 역할을 함

 

안쓴이유.......

ALB로도 CloudFront할 수 있는데, S3만 배포해도

백엔드 코드는 S3에서 API gateway로 연결을 할건데, 

eks때문에 로드밸런서가 있음

api gateway때문에 로드밸런서 연결하는 기능도 존재

단순 트래픽 전달

EC2 담겨져있는 ALB 연결 완료

프론트 엔드 코드가 담겨있는 S3 버킷

 

참고 블로그

https://www.0x00.kr/aws_s3_static_website_hosting_route53_cloudfront

 

AWS S3 정적 배포 도메인 연결하기( S3, Route53, CloudFront, ACM)

AWS S3를 이용하여 정적배포를 할 때 도메인을 적용하는 방법에 대해 나열하는 포스트입니다.

www.0x00.kr