다루는 내용

∙ 웹 브라우져로 접속 가능한 아마존 S3 생성 및 설정하기
∙ 버킷에 객체 추가하기
∙ 아마존 S3 버킷 리스트를 보고 객체를 다운로드 할 수 있는 HTML 페이지 만들기
∙ 알맞은 권한 설정하기

 

 

실습

---

 

• 두 개의 버킷을 생성하여 하나는 웹 서버로 하나는 데이터 서버로 설정한다.


• 브라우져를 통해 웹 서버에 접속하여 데이터 서버에 있는 데이타를 보고 다운로드 할 수 있다.

 

 

---

S3 버킷 생성

---

 

• 
  

  DATA 버킷 생성

  
  

1. 콘솔에서 S3 클릭
2. Create Bucket 클릭

∙ Bucket Name : s3lab-arang-data
∙ Region : US Standard
∙ Create 클릭

 



 

---

 

• 
  

  DATA 버킷 권한 설정

  
  

버킷은 기본적으로 ROOT 계정에 대해서만 읽기/쓰기 등이 허용되어 있다. 이번 실습에서는 버킷의 권한을 수정하여 향후 업로드 되는 객체들을 인터넷 상에서 접근 가능하도록 한다.

 

1. 버킷명(s3lab-arang-data) 클릭
2. Properties 클릭
3. Permissions 클릭
4. Add bucket policy 클릭
5. Bucket Policy Editor 창에서 정책을 JSON 포맷에 맞게 입력해도 되지만 정책 생성기를 이용하면 편리하다.

∙ AWS Policy Generator 클릭

6. AWS Policy Generator 페이지

∙ Select Type of Policy : S3 Bucket Policy 선택
∙ Effect : Allow 선택
∙ Principal : * 입력
∙ AWS Service : Amazon S3 (자동입력)
∙ Actions : GetObject 선택
∙ Amazon Resource Name (ARN) : arn:aws:s3:::s3lab-arang-data/* 입력
∙ Add Statement 클릭
∙ Generate Policy 클릭
∙ 본문 내용 복사

7. 콘솔 페이지의 Bucket Policy Editor 창에서

∙ 정책 생성기에서 복사한 내용 붙여넣기

 



 

∙ Save 클릭

해당 버킷 하위의 모든 파일 및 디렉토리에 읽기 권한을 허용하였다. 위 설정을 하지 않은 경우 웹 서버에서 데이터 서버의 객체 리스트는 확인 가능하나 다운로드 받을 수 없다.

 

---

 

• SITE 버킷 생성 및 권한 설정

1. 콘솔에서 S3 클릭
2. Create Bucket 클릭

∙ Bucket Name : s3lab-arang-site 입력
∙ Region : US Standard 선택
∙ Create 클릭

3. 버킷명(s3lab-arang-site) 클릭
4. Properties 클릭
5. Permissions 클릭
6. Add bucket policy 클릭
7. Bucket Policy Editor 창에서

∙ AWS Policy Generator 클릭

8. AWS Policy Generator 페이지

∙ Select Type of Policy : S3 Bucket Policy 선택
∙ Effect : Allow 선택
∙ Principal : * 입력
∙ AWS Service : Amazon S3 (자동입력)
∙ Actions : GetObject 선택
∙ Amazon Resource Name (ARN) : arn:aws:s3:::s3lab-arang-site/* 입력
∙ Add Statement 클릭
∙ Generate Policy 클릭
∙ 본문 내용 복사

9. 콘솔 페이지의 Bucket Policy Editor 창에서

∙ 정책 생성기에서 복사한 내용 붙여넣기
∙ Save 클릭

 

 

---

정적 웹사이트 호스팅을 위한 SITE 버킷 설정

---

 

1. s3lab-arang-site 클릭
2. Properties 클릭
3. Static Website Hosting 클릭
4. Enable website hosting 선택

∙ Index Document : index.html
∙ Error Document : error.html

 



 

∙ Save 클릭

5. 웹 호스팅 주소 복사

∙ Endpoint : s3lab-arang-site.s3-website-us-east-1.amazonaws.com

 

 

---

DATA 버킷 공유 설정

---

 

1. s3lab-arang-data 클릭
2. Properties 클릭
3. Permissions 클릭
4. Add CORS Configuration 클릭

∙ AllowedHeader : * 으로 수정
∙ Save 클릭
∙ Close 클릭
CORS(Cross-Origin Resource Sharing)은 서로 다른 도메인간에 통신을 하거나 데이터를 가져와야 하는 경우 사용한다. 위 설정을 하지 않은 경우 아래와 같은 메시지를 리턴한다.

 



 

5. Add more permissions 클릭

∙ Grantee : Everyone 선택
∙ List : 체크
∙ Save 클릭
웹 서버에서 데이터 서버에 접근하여 리스트를 보는 것은 웹 데몬의 역할이다. Everyone에 읽기 권한을 줘야한다. 위 설정을 하지 않을 경우 마찬가지로 아래와 같은 메시지를 리턴한다.

 



 

 

---

버킷에 객체 추가

---

 

1. 테스트를 위해 샘플 소스 다운로드

∙ http://awsopendata.s3.amazonaws.com/training/open-data-S3-2014.zip
압축을 풀면 data 디렉토리와 site 디렉토리가 있다.

2. 소스 수정

∙ site 디렉토리의 index.html 파일을 텍스트 편집기로 수정한다.
수정전 : var s3exp_config = { Bucket: ‘BUCKET-NAME‘, Prefix: ”, Delimiter: ‘/’ };
수정후 : var s3exp_config = { Bucket: ‘s3lab-arang-data‘, Prefix: ”, Delimiter: ‘/’ };
∙ 파일 저장

3. DATA 디렉토리 업로드

∙ s3lab-arang-data 버킷 클릭
∙ Actions 클릭
∙ Upload 클릭
∙ Drag and drop files and folders to upload here 부분에 data 디렉토리 드래그&드롭
∙ Start Upload 클릭

4. SITE 디렉토리 업로드

∙ s3lab-arang-site 버킷 클릭
∙ Actions 클릭
∙ Upload 클릭
∙ Drag and drop files and folders to upload here 부분에 site 디렉토리 드래그&드롭
∙ Start Upload 클릭

 

 

---

브라우져에서 웹 사이트 확인

---

 

1. 브라우져에서

∙ http://s3lab-arang-site.s3-website-us-east-1.amazonaws.com/site/index.html 입력

 



 

 

---

index.html 파일 살펴보기

---

 

1. JavaScript를 위한 AWS SDK

∙ AWS JavaScript SDK 연결
∙ AWS 리전 설정 : us-east-1
∙ 아마존 S3 연결 초기화
∙ unathenticated listObjects 콜 생성
∙ 객체 리스트 결과 저장
∙ listObjects 반복 실행

2. 참조 라이브러리

∙ JQuery : http://jquery.com
∙ Bootstrap : http://getbootstrap.com
∙ Icons : http://fontawesome.io
∙ DataTables : http://datatables.net
∙ Bootbox : http://bootboxjs.com
∙ Moment : http://momentjs.com

 

 

---

참고

• CORS AWS : https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html


• CORS W3C : http://www.w3.org/TR/cors/