전 세계에 있는 사용자들에게 나의 콘텐츠를 배포하려면 어떻게 해야 할까?
제일 좋은 선택은 s3 + CloudFront는 이용하는 것이다.
나(서울)의 웹사이트를 멀리 떨어져 있는 유럽이나 북미에서 액세스 할 때 일반적인 인터넷을 경유해서 나에게 접근하는 것은 안전하지 않고 속도가 느릴 수 있다.
그래서 CloudFront는 배치하여 나의 웹사이트에 빠르게 접근할 수 있도록 한다.
1. Route53에 도메인 등록
가비아에서 500원에 구입한 studyroom.shop 도메인에 Route53에서 받은 네임 서버 4개를 넣는다.
2. S3 버킷 생성
버킷을 생성한다.
버킷의 이름은 고유해야 하며 나중에 Route53에서 s3의 도메인을 받을 때 유용할 수 있도록
s3.studyroom.shop으로 지정하였다.
리전은 서울 리전으로 선택한다.
s3는 누구나 접근하는 웹사이트 이기 때문에 모든 사용자가 액세스 할 수 있도록
모든 퍼블릭 액세스 차단을 체크 해제하고 버킷을 만들어준다.
파일 관리를 위해 폴더를 만들어준다.
images라는 폴더를 만든 다음 이미지를 업로드해준다.
cat.jpg라는 파일을 추가한 다음
추가 업로드 옵션의 ACL에서 읽기 체크를 모두 해준다.
images폴더 안에 cat.jpg 파일이 업로드되었다.
cat.jpg 파일의 속성에서 객체 URL을 복사해둔다.
s3가 웹 사이트로서의 구색을 맞추기 위해 index.html, error.html 파일을 버킷에다가 업로드한다.
<index.html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>My Website Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /meta>
</head>
<body>
<h1>Welcome to my website</h1>
<p>지금보고 계신 사이트는 S3로 호스팅 되었습니다.</p>
<p><img src="https://s3.ap-northeast-2.amazonaws.com/s3.studyroom.shop/images/cat.jpg" alt="my test image"></p>
<!-- img src는 cat.jpg 객체 URL -->
</body>
</html>
<error.html>
404 File Not Found
index.html, error.html 파일이 업로드되었다.
두 파일 역시 모든 읽기 권한을 부여하였다.
버킷의 속성으로 가서 맨 밑에 정적 웹 사이트 호스팅의 편집을 클릭한다.
정적 웹 사이트 호스팅을 활성화해주고
index.html, error.html 파일로 지정해준다.
정적 웹 사이트 호스팅 주소로 접속해본다.
s3.studyroom.shop.s3-website.ap-northeast-2.amazonaws.com/ 로 접속해보니 성공적으로 웹사이트가 생성되었다.
하지만 이 도메인 주소는 너무 어렵다. 쉽게 바꾸기 위해서 Route53에서 레코드를 생성한다.
s3에 대한 레코드를 생성한다.
레코드 이름은 s3.studyroom.shop으로 해준다.
s3.studyroom.shop이라는 s3에 대한 레코드가 생성되었다. 이 주소로 접속해본다.
이전의 도메인 주소보다 훨씬 간편하고 s3 버킷의 이름이랑 같으므로 접속하기가 수월하다.
하지만 현재는 http를 사용하고 있기 때문에 안전하지가 않다.
그래서 보안 강화를 위해 https를 사용해줘야 한다.
3. CloudFront(CF) 생성
CloudFront 서비스에서 Create Distribution을 클릭한다.
Web의 Get Started를 클릭한다.
오리진 도메인에 s3를 선택한다.
밑으로 내려서 Distribution Settings에
Request or Import a Certificate with ACM을 클릭한다.
HTTPS를 사용하기 위해서는 인증서가 필요한데 AWS에서 인증서를 무료로 제공해준다.
AWS Certificate Manager(ACM)에서 인증서를 발급받는다.
인증서는 버지니아 북부에서 발급받았을 때만 CloudFront에서 사용할 수 있다.
도메인 이름 추가에 *.studyroom.shop을 넣어준다.
s3뿐만 아니라 다른 Route53의 레코드들의 보안 강화를 위해 studyroom.shop 앞에 *. 을 넣어준다.
DNS 검증을 선택한다.
인증서는 하나만 필요하므로 태그는 추가하지 않는다.
검토해보고 다음으로 넘어간다.
인증서가 생성되었고 아직 검증 보류 상태이다.
발급 완료 상태가 되어야 사용 가능하다.
Route53에 acm 레코드가 생성되었다.
몇 분 기다리니 발급 완료 상태가 되었다.
다시 CloudFront로 돌아와서 Custom SSL을 선택하고 만든 인증서를 선택하고
CloudFront를 생성한다.
CloudFront가 생성되었다. 아직 상태가 In Progress이므로
Deployed가 될 때까지 기다린다.
CloudFront를 선택하고 General에서 도메인 주소로 접속해본다.
접근이 되었지만 s3의 콘텐츠가 보이지 않는다.
d273pvm16qeict.cloudfront.net/index.html로 접속해본다.
s3의 컨텐츠가 보인다. 하지만 CF 도메인 뒤에 /index.html을 계속 붙여줘야 하는 게 너무 번거롭다.
General에서 Edit로 들어간다.
CF의 복잡한 도메인 주소를 cf.studyroom.shop으로 바꾸기 위해 CNAMEs에 넣어준다.
Default Root Object 부분에 index.html을 넣어준다.
뒤에 /index.html을 안 붙이고도 성공적으로 접근이 되었다.
하지만 여전히 도메인 주소가 접근하기 매우 불편하다.
그래서 Route53에서 CloudFront에 대한 레코드를 생성한다.
Route53에서 cf.studyroom.shop이라는 CloudFront에 대한 레코드를 생성한다.
cf.studyroom.shop으로 접속해본다.
https://cf.studyroom.shop 에 정상적으로 접속되었다.
앞에 http가 아닌 https를 붙여서 보안 접속이 된 것을 볼 수 있다.
s3는 서울에 있고 CloudFront를 통해 엣지 로케이션에 전파된 도메인 주소는 https://cf.studyroom.shop으로 가지만
http//s3.studyroom.shop으로 가면 s3에 접근하게 된다.
이제 s3에 버킷에 있는 index.html을 수정하고 업로드해보면 s3.studyroom.shop 에서 접근하면 수정된 걸 볼 수 있지만
cf.studyroom.shop으로 접근하면 s3에 수정된 내용이 보이지 않는 걸 볼 수 있다.
<수정된 index.html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>My Website Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /meta>
</head>
<body>
<h1>Welcome to my website</h1>
<p>지금보고 계신 사이트는 S3로 호스팅 되었습니다.</p>
<p>지금 S3에서만 수정 되었습니다.</p>
<p><img src="https://s3.ap-northeast-2.amazonaws.com/s3.studyroom.shop/images/cat.jpg" alt="my test image"></p>
</body>
</html>
수정된 index.html을 s3 버킷에 업로드한다.
s3 버킷으로 접근하면 수정된 문구가 보이지만 cf에서는 아무리 새로고침을 해도 수정된 문구가 보이지 않는다.
만약 s3의 내용을 전 세계에 긴급하게 배포해야 할 때는 CloudFront에서 다음의 작업을 해야 한다.
CF를 선택하고 Invalidations에서 Create Invalidation(무효화)를 클릭한다.
무효화할 대상인 index.html을 적어준다.
이제 cf.studyroom.shop에서도 s3 버킷에 수정된 내용을 볼 수 있다.
이렇게 하면 CF와 s3가 똑같은 공지가 뜨게 된다.
'AWS' 카테고리의 다른 글
| [AWS 실습] VPN을 이용한 하이브리드 클라우드 구축하기 part 1 (0) | 2021.02.26 |
|---|---|
| [AWS] 자격증 준비 및 합격 후기 (1) | 2021.02.07 |
| [AWS 실습] EFS(Elastic File System) 사용해보기 (1) | 2021.01.07 |
| [AWS 실습] Auto Scaling Group을 이용한 scale out, scale in (0) | 2021.01.06 |
| [AWS 실습] Route53을 활용하여 블로그 만들기 (0) | 2021.01.05 |
