0. 목표
Cloudfront, S3, Route53,Certificate Manager를 이용하여 정적 웹 사이트 배포해본다.
1. S3로 정적 웹사이트 배포하기
버킷 생성하기
- 버킷이름과 리전을 선택해 준다.
cloudfront를 적용해 접속할 주소로 버킷 이름을 설정하고, 리전은 서울로 설정했다.
버킷 권한설정
- 버킷의 객체는
Cloudfront를 통해 들어오는 요청에 의해 접근한다. 따라서 버킷의 모든 객체에 접근하기 위해 퍼블릭 엑세스 차단을 해체 해준다.
버킷 설정 확인 및 생성
- 최종적으로 버킷을 생성한다.
버킷에 파일 업로드
- 직전에 생성한 버킷을 클릭하고 들어가서 업로드를 진행한다.
- 정적 웹사이트 배포 테스트를 위해 간단히 작성한 html파일을을 업로드해 준다.
index.html과error.html파일이 필수적으로 필요하므로 두 파일을 생성 후 업로드 해줬다.
# index.html
<!doctype html>
<meta charset="utf-8">
<html>
<head>
<title>S3 와 CDN을 이용한 정적 웹 배포</title>
</head>
<body>
<h1>S3 와 CDN을 이용한 정적 웹 배포</h1>
</body>
</html># error.html
<!doctype html>
<meta charset="utf-8">
<html>
<head>
<title>S3 와 CDN을 이용한 정적 웹 배포</title>
</head>
<body>
<h1>error</h1>
</body>
</html>객체 권한 설정
- 업로드 완료후 두 파일을 체크하고 우클릭하여 퍼블릭으로 설정해준다.
정적 웹 호스팅 설정
- 속성 탭을 클릭 후 정적 웹 사이트 호스팅을 클릭해 준다.
- 상당의
엔드포인트주소를 복사해놓는다. 나중에 이 주소로 접근하면 파일을 확인 할 수 있다. - 인덱스 문서와 오류 문서에 각각
index.html,error.html을 적어주고 저장을 눌러준다.
index.html과error.html을 작성하지 않으면 저장 버튼을 활성화 할 수 없다!
적용 확인
- 직전에 복사해 두었던
엔드포인트주소로 접근해보면 위와 같은 화면을 볼 수 있다.
엔드포인트/image로 접근해보면 없는 객체에 접근하게 되므로error.html의 내용이 출력되는 것을 볼 수 있다.
2. Certificate Manager로 인증서 발급받기
Certificate Manager 접속
Certificate Manager에 접속한다.
발급받기
- 인증서 프로비저닝 시작하기를 눌러준다.
- 공인 인증서 요청을 선택하고 인증서 요청을 누른다.
- 도메인 이름에
www.{본인 도메인},*.{본인 도메인}을 입력하고 다음을 누른다.
DNS 검증을 선택한다.
- 확인 및 요청 버튼으로 다음으로 넘어간다.
-
검증 보류라고 주황 글씨로 적힌 페이지가 보일텐데 도메인주소를 클릭하여 확장시키면
Route53에서 레코드 생성 이라는 버튼을 두개다 눌러준다. -
5분 정도 기다리면
발급 완료상태로 바뀐다.
3. CloudFront 설정하기
CloudFront서비스에 접속한다.
Creat Distributions버튼을 클릭한다.
- Web의 Get Started를 눌러준다.
Origin Settings -> Origin Domain Name에 연결할 S3 버켓을 선택한다.
-
Distribution Settings -> Alternate Domain Names에 연결할 도메인 명을 입력한다. -
Distribution Settings -> SSL Certificate는Custom SSL Certificate를 선택하고 아까 발급받은 인증서를 선택해 준다.
State가 Enabled인지 확인한다.Status가 Deployed가 되고,Domain name으로 접속해 보면S3에서 확인했던 페이지를 확인할 수 있다.
결과 확인
- 개발자 도구로 접속하여
Headers->Response Headers->X-Cache내용이 위와 같이Hit from cloudfront라면CloudFront가 잘 적용된 것이다.
4. Route53 DNS 적용하기
이 실습의 목표는 cdn.seokseok.me 주소로 접속시 CloudFront를 통하여 S3버켓의 정적 페이지를 확인하는 것이었다. 현재는 CloudFront의 도메인주소로 접속 가능한 상태이므로 Route53을 이용해 cdn.seokseok.me접속시 CloudFront로 연결되도록 하자.
Route53 접속
Route53서비스에 접속한다.- 연결할 도메인이름을 눌러 들어간다.
레코드 세트 생성
-
이름에
cdn을 입력하고, 유형은A, 별칭을예로 해주고 별칭대상에CloudFront의 도메인네임을 입력해준다. -
잠시 기다리고
cdn.seokseok.me로 접속했을 때, 동일한 페이지를 볼 수 있고, X-cache를 확인해 봤을 때CloudFront로 연결된 것을 확인할 수 있었다.
🦉🦉🦉🦉🦉