Cloudfront와 S3를 이용한 정적 웹 사이트 배포하기

Seok·2020년 12월 6일

S3 aws certificate manager cloudfront route53

AWS

목록 보기

1/4

0. 목표

Goal

Cloudfront, S3, Route53,Certificate Manager를 이용하여 정적 웹 사이트 배포해본다.

1. S3로 정적 웹사이트 배포하기

버킷 생성하기

버킷이름과 리전을 선택해 준다.
cloudfront를 적용해 접속할 주소로 버킷 이름을 설정하고, 리전은 서울로 설정했다.

버킷 권한설정

버킷의 객체는 Cloudfront를 통해 들어오는 요청에 의해 접근한다. 따라서 버킷의 모든 객체에 접근하기 위해 퍼블릭 엑세스 차단을 해체 해준다.

버킷 설정 확인 및 생성

03-1

최종적으로 버킷을 생성한다.

버킷에 파일 업로드

직전에 생성한 버킷을 클릭하고 들어가서 업로드를 진행한다.
정적 웹사이트 배포 테스트를 위해 간단히 작성한 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 접속

2-1

Certificate Manager에 접속한다.

발급받기

2-2

인증서 프로비저닝 시작하기를 눌러준다.

2-3

공인 인증서 요청을 선택하고 인증서 요청을 누른다.

2-4

도메인 이름에 www.{본인 도메인}, *.{본인 도메인}을 입력하고 다음을 누른다.

2-5

DNS 검증을 선택한다.

2-6

확인 및 요청 버튼으로 다음으로 넘어간다.

2-6

검증 보류라고 주황 글씨로 적힌 페이지가 보일텐데 도메인주소를 클릭하여 확장시키면 Route53에서 레코드 생성 이라는 버튼을 두개다 눌러준다.
5분 정도 기다리면 발급 완료상태로 바뀐다.

3. CloudFront 설정하기

CloudFront 서비스에 접속한다.

Creat Distributions버튼을 클릭한다.

11-1

Web의 Get Started를 눌러준다.

Origin Settings -> Origin Domain Name에 연결할 S3 버켓을 선택한다.

12-1

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로 연결된 것을 확인할 수 있었다.

Seok

🦉🦉🦉🦉🦉

다음 포스트