AWS - S3, CloudFront, Route53을 이용한 정적 호스팅

Seongkyun Yu·2020년 11월 16일
72

DevOps

목록 보기
1/3

내가 만든 웹을 다른 사람들이 볼 수 있도록 하려면 배포과정이 필요하다.

AWS는 S3라는 저장소를 제공하는데 저렴한 비용으로 정적 호스팅을 할 수 있다는 장점이 있다.

하지만 S3에서 기본적으로 제공하는 URL은 HTTPS와 도메인 설정이 불가능하다.

따라서 CloudeFront와 Route53을 이용해 해당 문제를 해결해야 한다.

CloudFront는 S3에서 제공하지 않는 HTTPS 배포를 가능하게 만들어 준다.

뿐만 아니라 전 세계에 있는 엣지 포인트를 이용해 캐싱처리를 하여 사용자가 가장 가까운 지역의 엣지 포인트로 접속하게 하여

더 빠른 속도를 제공하고 S3보다 저렴한 비용을 지불하도록 도와준다.

Route53은 사용자가 소유한 도메인을 연결해주는 DNS서비스 역할을 한다.

도메인 만들기

우선 무료로 도메인을 만들어 보자.

https://www.freenom.com/ 에 접속한다.

회원가입 후 로그인을 한 후 Servieces 탭의 Register a New Domain을 선택한다.


원하는 도메인을 선택 후 checkout을 눌러 구매 후


active 상태가되면 사용이 가능해진다.


S3에 프로젝트 업로드 하기

AWS S3 서비스에 접속해서 버킷 만들기 선택


버킷 이름을 작성하고 다음


기본 암호화에 체크한 후 다음


모든 퍼블릭 액세스 차단의 체크를 풀고 다음으로 넘어가서 버킷 만들기를 마무리한다.


버킷 속성에서 정적 웹사이트 호스팅을 누르고 인덱스 문서와 오류 문서에 index.html을 작성 후 저장한다.

여기서 생성된 엔드포인트 주소로도 업로드할 프로젝트에 접근할 수 있게 된다.


앞서 버킷을 퍼블릭으로 설정은 했지만 아직 어떠한 기능을 공개할지 정하지 않았기 때문에 그에 필요한 정책을 만들어야 한다.

권한 탭을 누르고 버킷 정책에서 정책 생성기를 클릭


Select Type of Policy에서 S3 Bucket Policy를 선택

Principal에는 적당히 규칙명을 적어주고 Actions에서 Get Object를 선택


Amazon Resource Name (ARN)에는 arn:aws:s3:::<bucket_name>/<key_name> 형식의 문자열을 만든다.
이 글에선 arn:aws:s3:::studyfe.ml/*으로 작성 했다.
그 후 Add Statement와 Generate Policy를 눌러 정책을 만든다.


생성된 정책을 버킷에 붙여넣고 저장


개요 탭을 누르고 업로드를 클릭하여 프로젝트를 업로드 한다.


CloudFront 설정

S3에서 제공해주는 엔드포인트로도 앱을 배포할 수 있지만 CloudFront를 사용하는 이유는 다음과 같다.

  • HTTPS 배포
  • 전세계 엣지 로케이션을 이용한 더 빠른 속도
  • S3 직접 공유보다 저렴한 비용

S3에서 제공하는 주소는 HTTP로 보안에 취약하다. CloudFront는 이를 쉽게 HTTPS로 배포할 수 있게 도와준다.

S3를 이용해 직접 배포할 경우 S3 버킷을 설정한 지역의 저장소로 전세계 사용자가 요청을 보낸다. 따라서 먼 지역의 유저일 수록 속도가 느려질 것이다. 하지만 CloudFront를 사용한다면 전세계 엣지 로케이션에서 캐싱을 해두고 유저가 가까운 엣지에 요청을 보내도록 한다. 따라서 S3보다 속도가 더 빠르다.

또한 CloudFront의 요금이 S3 요금보다 저렴하기 때문에 비용절감 효과가 있다.



CloudFront 서비스로 들어가 Create Distribution을 선택한 후 Get Started를 누른다.



Origin Domain Name에 방금 만든 버킷의 정적 웹사이트 호스팅 주소를 적는다.

Viewer Protocol Policy은 Redirect HTTP to HTTPS로 설정하고

Default Root Object에는 index.html을 작성한 후 Create Distribution을 누른다.


----REACT 프로젝트일 경우 react-router-dom을 사용한다면 다음과 같은 설정이 필요하다----

방금 생성한 Distribution을 선택 후 Distribution Settings를 누른다.


Error Pages에서 Create Custom Response를 선택


HTTP Error Code를 404: Not Found

Error Caching Minimum TTL을 5

Customize Error Response를 Yes

Response Page Path를 /index.html으로

HTTP Response Code를 200 OK로 설정하고 Create를 누른다.

같은 일을 403 Error Code로도 반복한다.


Route53 설정

Route53은 AWS에서 제공하는 DNS 서비스다.

Route53에 접속 후 호스팅 영역 생성을 눌러준다.


설정한 도메인 주소를 입력 후 퍼블릭 호스팅을 선택하고 생성한다.


이제 여기서 생성된 네임 서버 리스트를 도메인에 등록하자.


도메인을 발급한 freenom에 접속하여

Services -> My Domains를 선택 후 Manage Domain을 눌러준다.


Management Tools -> Nameservers를 선택


Use custom nameservers를 누르고 위에서 발급받은 Nameserver를 적은 후 Change Nameservers를 선택


다시 Route53으로 돌아와서 레코드 생성을 누른다.


단순 라우팅을 선택 후 단순 레코드 정의를 누른다.


레코드 정의를 작성한다.

.studyfe.ml로 돼있는 앞 부분에 작성하면 해당 주소로 접속할 수 있다.

예를들어 www를 작성한다면 www.studyfe.ml로 접속할 수 있다.

후에 밑에 설정은

CloudFront 배포에 대한 별칭

버킷을 설정한 리즌

CloudFront의 해당 주소로 설정 후 단순 레코드 정의를 눌러 생성한다.

(CloudFront의 도메인 주소는 CloudFront 서비스로 접속해서 확인할 수 있다)

여기서는 www가 붙은 주소와 그렇지 않은 주소 모두 사용할 수 있도록 레코드 정의를 두 번 해보겠다.

CloudFront의 해당 주소를 선택할 수 있을 때까지 시간이 걸릴 수 있다.


작업이 완료되면 다음과 같은 상태가 된다.

레코드 생성을 누른다.


여기까지 완료했다면 해당 도메인으로 접속이 가능하다.
(만약 접속이 불가하더라도 나머지 과정을 쭉 진행하자)

다만 SSL인증서 발급이 끝나지 않았기 때문에 HTTPS로 정상 작동하지는 않는다.


AWS Certification

HTTPS에는 SSL이라는 인증서가 필요하다. 이는 AWS에서 무료로 제공하고 있다.

AWS Certification에 접속 후

(인증서 발급은 반드시 미국 동부지역을 선택해야 한다!)

리즌 선택을 완료한 후 인증서 요청을 누른다.



공인 인증서 요청을 선택 후 인증서 요청을 누르고 도메인 이름을 적어준다.

도메인 이름이 여러개인 경우 이 인증서에 다른 이름 추가를 눌러 추가할 수 있다.




DNS 검증을 선택후 계속 다음으로 진행


요청을 한 후 도메인 주소를 눌러 Route 53에서 레코드 생성을 누른다.

이 작업은 신청한 도메인마다 진행해줘야 한다.

계속 버튼을 눌러 심사가 완료될 때까지 기다려야 한다.


검증시간은 주소마다 다를 수 있다.

발급이 완료되면 다음 단계를 진행해보자.


CloudFront로 돌아가

Distribution Settings를 선택


Edit 버튼을 선택


Alternate Domain Names에 인증서 발급시 등록한 도메인 주소들을 써준다.

그 후 Custom SSl Certificate를 선택한다.
(인증서 발급이 끝난 후 여기서 선택할 수 있게 되는데 시간이 걸릴 수 있다)

제일 아래로 내려가 Yes Edit을 누르고 기다리면 홈페이지에 정상적으로 인증서가 적용된 모습을 볼 수 있다.


profile
FrontEnd Developer

9개의 댓글

comment-user-thumbnail
2020년 11월 19일

상세하게 설명해주셔서 감사합니다 S3로 간단하게 배포하기 좋네요!

1개의 답글
comment-user-thumbnail
2020년 12월 10일

너무 좋은 정보네요 감사해요~!

1개의 답글
comment-user-thumbnail
2020년 12월 22일

인증서 발급을 무조건 동부로 해야하는 이유가 무엇인가요?

1개의 답글
comment-user-thumbnail
2021년 1월 28일

설명이 너무 너무 상세해서 많은 도움 받았습니다 감사합니다!

답글 달기
comment-user-thumbnail
2021년 4월 21일

잘보고 갑니다. 감사합니다.

답글 달기
comment-user-thumbnail
2021년 4월 21일

지금은 조금 바뀐 내용이 있습니다~
현재는 Alternate Domain Names (CNAMEs)을 반드시 설정해야지만 cloudfront를 통한 배포가 가능합니다.

때문에,
구입한 Domain인증이 되어야 Cloudfront에서 CNAMEs로 등록이 가능하기 때문에,
aws certificate manager를 통해 도메인 인증서를 발급받아 등록해이지만,
DNS를 통해 cloudfront로 접근 할 수 있습니다.

답글 달기