brunch

You can make anything
by writing

C.S.Lewis

by Master Seo May 30. 2020

375.CloudFront, Static File

실습

목표

CloudFront  사용하고 이해해 보자

AWS CDN서비스이다.


1

s3로 홈페이지 만들고

2

cloudfront 만들고

3

테스트한다.

4

새 이미지와 새 홈페이지도 같이 올려놓고 , 새 홈페이지를 기존 index.html로 변경한다.





<0>  선수 조건

S3에 홈페이지 하나를 올려보자. 

1.html

참고 사이트  https://brunch.co.kr/@topasvga/93

route53에서 cname으로  cdn.serverchk.com  등록한다.



<1>  s3로 운영중인 홈페이지 접속 확인

<2> cloudfront 생성

<3>  s3 스테틱 웹사이트 테스트

<4> 호스팅 테스트

<5> 사이트 업데이트 하기 

<6>  캐시 무효화 하기



<1>  s3로 운영중인 홈페이지 접속 확인

s3

s3 object url  클릭 > 접속 확인

안된다면 ,  permissions 탭

파일 public  인지 확인




<2> cloudfront 생성


cloudfront > create distubution  > web  : Get start > create distubution  > origin setting  : origin domain name  >   s3 bucket 이름 선택  (위에서 만든 s3 버킷)

>   default cache behaviror setting 에서   s3는 쿠키 로깅을 하지 않는다. off (디폴트)

> Create distribution

// 20분 걸린다.


  

<3>  s3 스테틱 웹사이트 테스트


1

cloudfront  >   domain name  확인  > xxxxxxxxxxxx.cloudfront.net 형식이다.      

d2wh3t0rbgy5wi.cloudfront.net



2

html 파일을 만든다.

위에서 확인한 도메인 이름을 코드에 입력한다.


// 소스

<html>

  <head>

 CloudFront 1111

  </head>

  <body>

    <p>test 1111111111111111 </p>

    <p><img src="http://d2wh3t0rbgy5wi.cloudfront.net/1.jpg" alt="my test image" /></p>

  </body>

</html>




<4> 호스팅 테스트


1

1.html을  S3에 올린다.

1.jpg를 올린다.


2

cloudfront 링크된  로컬 사이트를  브라우저로 접속하여 뜨는지 확인한다.

http://xxxxxxxx.cloudfront.net/1.html  형식이다.


3

S3의  1.html에 대해 public으로 변경

재접속 




<5> 사이트 업데이트 하기 


1

2.html     // 소스 수정하기

s3에 2.jpg 올리기


2

1.html

삭제


3

2.html  > rename > 1.html  변경




<6>  캐시 무효화 하기


1

cloudfront  > distribution   > 만들어진 cf클릭  >  invalidations >  create invalidation > object paths 

1.html  

을 입력한다.


2

1.html을 새로 고침

s3에서 새로 가져와  캐시에 복사 한다.


감사합니다.

매거진의 이전글 374. KMS 로  S3 데이터 암호화해서 관리 하자
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari