Amazon AWS :: S3 활용

 

 

 

Amazon AWS :: S3 활용

본자료는 저자의 허락하에 공유되는 자료입니다.

국내 전문 CDN 사업자인 GS네오텍은 2015년에 Amazon Web Service의 AWS Premier Consulting 파트너로서 WiseN 이라는 서비스 브랜드로 클라우드 사업을 함께 하고 있습니다. 

Amazon AWS S3 활용

2015-08-27

실습가이드

다루는 내용

• 웹 브라우져로 접속 가능한 아마존 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/

• About
• Latest Posts

arang

Sr. Technical Trainer at GSNeotek

  Reference : GS네오텍 WiseN 서비스

www.SalesMore.co.kr