brunch

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를 사용할 수도 있다.



감사합니다.

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