How to Host a Static Website with S3, CloudFront and Route53

https://medium.com/free-code-camp/how-to-host-a-static-website-with-s3-cloudfront-and-route53-7cbb11d4aeea

How to Host a Static Website with S3, CloudFront and Route53

서버를 개발하고 있지만 주로 실제 서비스 로직이 돌아하는 서버를 개발하기 때문에 앞에서 어떻게 사용자 요청이 들어와서 하는지는 Infra 팀이 알아서 해주기 때문에 특별히 신경쓰지 않았다.

만약 개인 서버 운영자가 되어 서버를 AWS에서 개발하게 되면 어떤 부분이 필요한지 갑자기 궁금해지던 차에 본 블로그~

저자도 자신의 블로그를 만들기 위해 CloudFront + Rout53 + S3를 사용하였고 이에 대한 경험을 정리하였다.

저자가 블로그 만들때 고려한 체크 사항들은 아래와 같다. 4, 5 번은 UI 부분이고 이 부분은 별도의 서비스를 이용했다고 한다.

1. Pay-as-you-go hosting
2. SSL certificate
3. Functional www subdomain
4. Highly customisable but minimalistic design
5. Markdown-powered articles

사전 준비물

서버를 만들려면 일단 사용자가 접근하기 위한 사이트 주소가 필요하다. 이를 위해서는 DNS (Domain Name System) 을 등록해서 나만의 Domain 을 받아야한다. 이를 제공하는 DNS registrar (Namecheap, GoDaddy...) 가 있고 가격을 보고 업체를 보면 된다.

DNS를 흔히 phonebook of the Internet 이라고하고. 사용자는 복잡한 숫자로 이루어진 IP 가 아닌 readable한 domanin name (xxx.com) 을 통해 Web browser로 접근하게 된다. Web browser는 IP를 통해 반응하기 때문에 DNS가 중간에서 domain name을 IP로 변환시켜 준다.

https://www.cloudflare.com/learning/dns/what-is-dns/

 

Amazon AWS 서비스 

1번의 요구 사항인 사용한 만큼 비용이 나가기 위해서 AWS와 같은 클라우드 서비스 업체의 서비스를 활용하면 큰 어려움없이 서버를 구성할 수 있다. 무슨 일이든 장단이 있기 마련. 원하는 기능을 손쉽게 쓸수 있는 만큼 해당 서비스에 종속적일수 밖에 없긴 하다.

하지만 여기서는 매우 복잡한 서비스 서버를 구성하는것은 아니고 단순한 Static Server를 구성하기 때문에 이 경우는 클라우드 서비스 업체가 제공하는 서비스를 구성하는 것이 이득일 것이다.

저자는 그래서 S3 (Region별 서비스)+ CloudFront (Global Edge 서비스) + Rout53 (Global Edge 서비스) 을 이용해 구축했다.

구성도

S3: Static Web page Resource를 저장할 저장소, S3는 Block Storage가 아니라 Object Storage라서 Web Resource를 그대로 저장하고 Web interface를 제공하기 때문에 hosting static website content로 딱이다.

https://www.cloudberrylab.com/resources/blog/amazon-s3-vs-ebs-vs-efs/

Route53 : DNS records를 처리하는 서비스

CloudFront: cache를 제공해서 반응 속도를 빠르게 하고 SSL certificate도 제공하는 content delivery network (CDN) 

Amazon Simple Stoarage Service (S3)

서버 Resource (HTML, Javascript, CSS)를 저장할 저장소

• Bucket 생성: S3는 region 단위의 Service이지만 bucket name은 globally unique하고 해당 name space는 모든 AWS 계정에 공유되기 때문에 특별히 Naming Rule을 따라야 한다. 게다가 한번 만들면 수정할 수 없어 잘 선택하자. 보통 domain name으로 설정하면 직관적이긴 하지만 이미 다른 사람이 사용했으면 어쩔수 없다. ㅠㅠ
• uncheck "blocking and removing public access ACLs and policies": 우리는 사용자가 접근할 Public Web Site를 제공해야하니..

• Properties > static website hosting 을 enable 

• bucket에 web resource를 올리고 root 경로에 index.html이 들어있게 하면 끝~ 

 

그 결과 Endpoint 가 <bucket_name>.s3-website.your-region.amazonaws.com 으로 설정되고 접근 가능해진다.

CloudFront

사실 static website를 구성할때 CDN은 필수는 아니다. UX가 복잡하거나 데이터가 커서 시간이 걸려서 Cache를 사용해야하는 경우가 있지는 않기 때문이다. 하지만 2번 SSL Certificate 기능을 사용하기 위해서 CloudFront를 사용한다.

• Origin Domain Namge 이 바로 S3의 endpoint를 넣는것이다.
• Origin Path는 empty로 둔다.
• HTTP/HTTPS 모두 Allow한다. HTTP로 들어온 사용자도 HTTPS로 redirect해준다.

 설정이 끝나서 적용되기까지 15분 정도가 걸리고 "3fb4knzujxq0b.cloudfront.net" 스타일의 endpoint가 생성된다.

이 Endpoint로 Rout 53을 설정하게 된다.

https://www.youtube.com/watch?v=KIltfPRpTi4

https://www.youtube.com/watch?v=KIltfPRpTi4

Route53

이제 드디어 DNS registrar 에서 받은 domain name과 CloudFront 와 S3를 연결하는 작업을 하자.

Rout53은 다리와 같다고... 저자는 표현했다 ㅎㅎ 그러고 보니 아이콘이 이해가 되는군.

Route53

• Hostest Zone을 생성해서 domain name 을 설정하고 public hostest zone으로 선택

https://www.youtube.com/watch?v=HwZ3wNaM69s

• 4개의 NS recode를 받게 되고 이를 DNS registrar 쪽에 설정한다.

https://www.youtube.com/watch?v=HwZ3wNaM69s

https://www.youtube.com/watch?v=HwZ3wNaM69s

저자는 자신이 사용한 Namecheap 을 기준으로 설정해야하는 부분을 설명한다.

• record set을 아래와 같이 설정
  • Set the type to “A — IPv4 address”
  • Respond with “Yes” to “Alias” and set the alias target to your CloudFront distribution URL.
  • routing policy as “Simple”로, 예산이나 필요에 따라 “Evaluate Target Health” 도 선택
• AAAA - IPv6 address 에 대해서도 동일하게 record set을 설정

https://www.youtube.com/watch?v=HwZ3wNaM69s

실제로 DNS propagation 은 72 시간이 걸린다는것을 참고

Setting up your WWW subdomain

여기까지 설정해도 domain name을 사용하는데는 불편함이 없는데 www 을 앞에 붙인 주소 "www.example.com" 을 사용하고 싶다면 동일하게 해야한단다 ㅠㅠ  앞에 한 S3/CloudFront/Route53 설정 말이다. 

• 참고로 example.com을 샀으면 www를 붙인 주소를 살 필요는 없단다.
• AWS 설정을 할때 주소를 "www.example.com"을 넣으면 된다 

S3를 다시 만들때.. 그럼 배포를 두군데 다 해야하나 걱정이 될텐데 그럴 필요 없다. 이번에 S3를 만들때는 Redirect requests를 선택하면 된다.

SSL Certificate

LetsEncrypt 는 무료 인증 기관이다 해당 기관에서 인증서를 가져와야한다.

인증서를 가져와서 적용하는 단계가 가장 복잡한 단계로 잘 따라해야한다.

1. certbot-s3front에서 S3 bucket + CloudFront 에서 사용할 certificate를 생성하고 설치하는 client를 제공한다.

2. -d domain은 domain name "example.com" "www.example.com" 으로 설정

3. CloudFront DIstribution에서 SSL Certificate가 설정된다.

4. certificate backup을 잊지말라 .

ACM

 AWS Certificate Manager (ACM) 을 사용하면 훨씬 더 수월하게 certificate을 할수 있지만 그만큼 AWS에 종속될수 있음을 명심하자