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에서 새로 가져와 캐시에 복사 한다.
감사합니다.
