172. CloudFront의 S3 오리진 설정법

by Master Seo

<1> S3로 웹 사이트 구축하기

<2> CloudFront로 이미지 올리기

<3> 웹사이트에 CloudFront 적용하기




<1> S3로 웹 사이트 구축하기


1

S3 > Create > Statc website hosting

index.html 입력하기


10 s3.png
20 s3.png

2

upload 해서 index.html 올리기


index.html 내용

<html>

<head> cdn test 333 </head>

<body>

<p> ssssssssssssss </p>

<img src= 1.jpg>

</body>

</html>



30 upload.png


3

index.html 올릴 때 Grant public read access to this object(s)로 변경하여 올리기

모두 접속하도록 하기.


51 grant.png



4

URL로 사이트 접속 확인하기.


50 index.png




<2> CloudFront로 이미지 올리기


100 cloudfront.png
110 cf.png




<3> 웹사이트에 CloudFront 적용하기


1

CloudFront의 Domain Name을 확인해 index.html을 수정한다.


index.html 내용

<html>

<head> cdn test 333 </head>

<body>

<p> ssssssssssssss </p>

<img src= "http://ddu42ada9wxvq.cloudfront.net/1.jpg">

</body>

</html>



120 domain.png




2

CloudFront 캐시 갱신하기


S3 domain으로 접속하여 갱신되었는지 확인하기.

갱신이 안되었다면 Invalidation에서 갱신하자.


200 cf.png




참고 1.

EC2를 오리진으로 CloudFront를 사용할 수도 있다.



감사합니다.

매거진의 이전글171. AWS ALB 설정, NLB 이해하기