25. S3와 CloudFront로 사진 공유하기
S3, CloudFront, Route53 사용하기
소녀상 이미지를 전 세계에 퍼트려 보자.
목차
1. 소녀상 이미지와 index.html 준비
2. AWS 스토리지인 S3 생성하고 웹페이지 올리기
3. CloudFront 생성하기
4. Route53의 Alias로 매칭 시키기.
5. index.html 수정하고 정상 동작 확인하기
1. 소녀상 이미지와 index.html 준비
index.html
<html>
<head>
<title> CloudFront Sample </title>
<style>
h1 {color:red;}
</style>
</head>
<body>
<h1> 소녀상 </h1>
<h1> Monument to comfort women </h1>
<p> There are 32 other monuments to the Korean comfort women displayed in public places in New York and New Jersey. </p>
<h3> CloudFront = CDN </h3>
<p> 이미지를 전 세계 어디에서나 빠르게 보게 하기 </p>
<br>
<img src="./g1.jpg" width="320" height="500" alt="소녀상 1">
<br>
</body>
</html>
2. AWS S3 생성하고 웹페이지 올리기
- 파일 올릴 때 반드시 누구나 읽기 가능하도록 권한을 등록한다.
1) S3에 접속해서 버킷을 만든다.
Bucket name은 girls.it-pro1.com으로 한다. (접속하고자 하는 URL이름)
기존에 존재하면 만들 수 없다고 나온다.
방금 잘못 만들어 삭제했더라도 권한 어쩌고 오류가 발생하므로 다른 이름으로 만들기 바란다.
Blccess
Block all public access 체크 해지해서 외부에서 접속되도록 한다.
index.html과 g1.jpg 이미지를 올린다.
외부 사용자가 보도록 권한을 허용한다.
Permissions > Bucket Policy
{
"Version": "2012-10-17",
"Id": "S3 PolicyId1",
"Statement": [
{
"Sid": "IPAllow",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::girls.it-pro1.com/*",
"Condition": {
"IpAddress": {
"aws:SourceIp": "210.0.0.0/8"
}
}
}
]
}
2) S3 스토리지에 웹서버를 올리기 위해 Statc Website hosting 설정하기
S3에서 Properties 클릭한다.
Static website hosting을 클릭해 설정한다.
디폴트로 읽을 파일을 index.html이라 타이핑한다.
3. CloudFront 생성하기
전 세계로 전파하기 위해 CloudFront 사용한다.
1) CloudFront에서 Create Distribution
2) Web > Get Started
정적 웹으로 한다.
여기서는 web으로 한다.
RTMP는 동영상 스트리밍이다.
3) Origin Domain Name에서 girls.it-pro1.com을 선택한다.
모두 디폴트 값으로 한다.
4. Route53의 Alias로 매칭 시키기.
Route53으로 DNS에서 Alias로 CloudFront연동을 한다.
참고:
네임서버가 다른 곳에서 운영 중이라면 cname으로 설정해야 한다.
5. index.html 수정하고 정상 동작 확인하기
소스 이미지의 경로를 CDN경로로 변경한다.
CloudFront의 Domain Name 을 확인해 index.html을 수정한다.
index.html 내용
<html>
<head> test </head>
<body>
<img src= "http://ddu42ada9wxvq.cloudfront.net/1.jpg">
</body>
참고 1. CloudFront에서는 사용자의 지리적 위치를 기준으로 제한을 할 수 있다.
CloudFront Distribution > Restrictions > Edit > 나라별로 White list / Black List 관리가 가능하다.
감사합니다.
