시나리오 사전 필수 작업 웹페이지 정의 SDK 구성 버킷에 있는 앨범 목록 표시 앨범 보기

브라우저에서 Amazon S3 버킷 내 사진 보기

JavaScript code example that applies to browser execution

이 브라우저 스크립트 코드 예제는 다음을 보여 줍니다.

Amazon Simple Storage Service(S3) 버킷에서 사진 앨범을 생성하고 미인증 사용자가 사진을 볼 수 있도록 허용하는 방법

시나리오

이 예제에서는 단순한 HTML 페이지를 통해 사진 앨범의 사진을 볼 수 있는 브라우저 기반 애플리케이션이 제공됩니다. 사진 앨범은 사진이 업로드되는 Amazon S3 버킷에 있습니다.

사진 앨범에 Amazon S3 버킷을 사용하는 브라우저 스크립트의 JavaScript

브라우저 스크립트는 SDK for JavaScript를 사용하여 Amazon S3 버킷과 상호 작용합니다. 스크립트는 Amazon S3 클라이언트 클래스의 listObjects 메서드를 사용하여 사진 앨범을 볼 수 있게 합니다.

사전 필수 작업

이 예제를 설정하고 실행하려면 먼저 다음 작업을 완료합니다.

참고

이 예제에서는 Amazon S3 버킷과 Amazon Cognito 자격 증명 풀에 대해 동일한 AWS 리전을 사용해야 합니다.

Amazon S3 콘솔에서 앨범과 사진을 저장할 수 있는 Amazon S3 버킷을 생성합니다. 콘솔을 사용한 S3 버킷 생성에 대한 자세한 내용을 알아보려면 Amazon Simple Storage Service 사용 설명서의 버킷 생성을 참조하세요.

S3 버킷 생성 시에는 다음을 수행합니다.

후속 사전 필수 작업인 역할 권한 구성 시 사용할 수 있도록 버킷 이름을 메모해 둡니다.
버킷을 생성할 AWS 지역을 선택합니다. 후속 사전 필수 작업인 자격 증명 풀 생성 시 Amazon Cognito 자격 증명 풀을 생성하는 데 사용할 리전과 동일한 리전이어야 합니다.
Amazon Simple Storage Service 사용 설명서의 웹 사이트 액세스에 대한 권한 설정을 따라 버킷 권한을 구성합니다.

브라우저 스크립트에서 시작하기의 1단계: Amazon Cognito 자격 증명 풀 생성 섹션을 참조하여 Amazon Cognito 콘솔에서 Amazon Cognito 자격 증명 풀을 생성합니다.

자격 증명 풀을 생성할 때는 인증되지 않은 자격 증명의 역할 이름과 자격 증명 풀의 이름을 메모해 둡니다.

앨범 및 사진 보기를 허용하려면 방금 생성한 자격 증명 풀의 IAM 역할에 권한을 추가해야 합니다. 다음과 같이 정책을 생성하며 시작합니다.

IAM 콘솔(IAM console)을 엽니다.
왼쪽 탐색 창에서 정책을 선택한 후 정책 생성 버튼을 선택합니다.

JSON 탭에 다음의 JSON 정의를 입력하되, BUCKET_NAME은 버킷 이름으로 대체합니다.


{
   "Version": "2012-10-17",
   "Statement": [
      {
         "Effect": "Allow",
         "Action": [
            "s3:ListBucket"
         ],
         "Resource": [
            "arn:aws:s3:::BUCKET_NAME"
         ]
      }
   ]
}

정책 검토 버튼을 선택하고 정책 이름을 지정한 다음 설명을 입력하고(원할 경우), 정책 생성 버튼을 선택합니다.

나중에 찾아서 IAM 역할에 연결할 수 있도록 이름을 메모해 둡니다.

정책이 생성되면 IAM 콘솔로 돌아갑니다. 이전 사전 필수 작업인 자격 증명 풀 생성에서 Amazon Cognito가 생성한 미인증 자격 증명의 IAM 역할을 찾습니다. 방금 생성한 정책을 사용하여 이 자격 증명에 권한을 추가합니다.

이 작업의 워크플로는 일반적으로 브라우저 스크립트에서 시작하기의 2단계: 생성된 IAM 역할에 정책 추가 섹션과 동일하지만 몇 가지 차이점이 있습니다.

Amazon Polly에 대한 정책이 아닌 방금 생성한 새로운 정책을 사용합니다.
권한 연결 페이지에서 새로운 정책을 빠르게 찾아 보려면 필터 정책 목록을 열고 고객 관리형을 선택합니다.

IAM 역할 생성에 관한 추가 정보는 IAM 사용 설명서의 AWS 서비스에 대한 권한을 위임할 역할 생성 섹션을 참조하세요.

브라우저 스크립트가 Amazon 버킷에 액세스하려면 다음과 같이 CORS 구성을 설정해야 합니다.

중요

새 S3 콘솔에서 CORS 구성은 JSON이어야 합니다.

이 예제에서는 사용자가 이미 버킷에 있는 사진만 볼 수 있기 때문에 버킷에 앨범을 생성하고 그 앨범으로 사진을 업로드해야 합니다.

참고

이 예제의 경우, 사진 파일의 파일명은 하나의 밑줄("_")로 시작해야 합니다. 이 문자는 나중에 필터링하는 데 중요합니다. 또한, 사진 소유자의 저작권을 존중해 주십시오.

Amazon S3 콘솔에서 앞서 생성한 버킷을 엽니다.
개요 탭에서 폴더 만들기 버튼을 선택하여 폴더를 생성합니다. 이 예제에서는 폴더명을 "album1", "album2" 및 "album3"으로 지정합니다.
album1과 album2에 대해 폴더를 선택한 다음 다음과 같이 사진을 업로드합니다.
1. 업로드 버튼을 선택합니다.
2. 사용할 사진 파일을 끌거나 선택하고 다음을 선택합니다.
3. 퍼블릭 권한 관리에서 이 객체에 퍼블릭 읽기 액세스 권한을 부여함을 선택합니다.
4. 업로드 버튼(왼쪽 아래 모서리)을 선택합니다.
album3은 비워둡니다.

웹페이지 정의

사진 보기 애플리케이션을 위한 HTML은 브라우저 스크립트가 보기 인터페이스를 생성하는 <div> 요소로 구성됩니다. 첫 번째 <script> 요소는 SDK를 브라우저 스크립트에 추가합니다. 두 번째 <script> 요소는 브라우저 스크립트 코드를 담는 외부 JavaScript 파일을 추가합니다.

이 예제에서는 파일명이 PhotoViewer.js로 지정되었으며 HTML 파일과 동일한 폴더에 위치합니다. AWS SDK for JavaScript API 참조 가이드의 SDK for JavaScript에 대한 API 참조 섹션에서 현재 SDK_VERSION_NUMBER를 찾을 수 있습니다.


<!DOCTYPE html>
<html>
  <head>
    <!-- **DO THIS**: -->
    <!--   Replace SDK_VERSION_NUMBER with the current SDK version number -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.js"></script>
    <script src="./PhotoViewer.js"></script>
    <script>listAlbums();</script>
  </head>
  <body>
    <h1>Photo Album Viewer</h1>
    <div id="viewer" />
  </body>
</html>

SDK 구성

CognitoIdentityCredentials 메서드를 호출하여 SDK를 구성하는 데 필요한 자격 증명을 획득합니다. Amazon Cognito 자격 증명 풀 ID를 제공해야 합니다. 그런 다음, AWS.S3 서비스 객체를 생성합니다.


// **DO THIS**:
//   Replace BUCKET_NAME with the bucket name.
//
var albumBucketName = "BUCKET_NAME";

// **DO THIS**:
//   Replace this block of code with the sample code located at:
//   Cognito -- Manage Identity Pools -- [identity_pool_name] -- Sample Code -- JavaScript
//
// Initialize the Amazon Cognito credentials provider
AWS.config.region = "REGION"; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: "IDENTITY_POOL_ID",
});

// Create a new service object
var s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  params: { Bucket: albumBucketName },
});

// A utility function to create HTML.
function getHtml(template) {
  return template.join("\n");
}

이 예제에 있는 코드의 나머지 부분은 버킷의 앨범과 사진에 관한 정보를 수집 및 제공하기 위해 다음의 함수를 정의합니다.

listAlbums
viewAlbum

버킷에 있는 앨범 목록 표시

버킷에 있는 모든 앨범의 목록을 표시하기 위해 애플리케이션의 listAlbums 함수는 AWS.S3 서비스 객체의 listObjects 메서드를 호출합니다. 이 함수는 CommonPrefixes 속성을 사용하므로 이 호출은 앨범으로 사용된 객체(폴더)만 반환합니다.

이 함수의 나머지 부분은 Amazon S3 버킷에서 앨범 목록을 가져오고 웹 페이지에 앨범 목록을 표시하는 데 필요한 HTML을 생성합니다.


// List the photo albums that exist in the bucket.
function listAlbums() {
  s3.listObjects({ Delimiter: "/" }, function (err, data) {
    if (err) {
      return alert("There was an error listing your albums: " + err.message);
    } else {
      var albums = data.CommonPrefixes.map(function (commonPrefix) {
        var prefix = commonPrefix.Prefix;
        var albumName = decodeURIComponent(prefix.replace("/", ""));
        return getHtml([
          "<li>",
          '<button style="margin:5px;" onclick="viewAlbum(\'' +
            albumName +
            "')\">",
          albumName,
          "</button>",
          "</li>",
        ]);
      });
      var message = albums.length
        ? getHtml(["<p>Click on an album name to view it.</p>"])
        : "<p>You do not have any albums. Please Create album.";
      var htmlTemplate = [
        "<h2>Albums</h2>",
        message,
        "<ul>",
        getHtml(albums),
        "</ul>",
      ];
      document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    }
  });
}

앨범 보기

Amazon S3 버킷에 앨범의 콘텐츠를 표시하기 위해 애플리케이션의 viewAlbum 함수는 앨범 이름을 가져오고 해당 앨범에 대한 Amazon S3 키를 생성합니다. 그런 다음 이 함수는 AWS.S3 서비스 객체의 listObjects 메서드를 호출하여 앨범에 있는 모든 객체(사진)의 목록을 획득합니다.

이 함수의 나머지 부분은 앨범에 있는 객체 목록을 가져오고 웹 페이지에 사진을 표시하는 데 필요한 HTML을 생성합니다.


// Show the photos that exist in an album.
function viewAlbum(albumName) {
  var albumPhotosKey = encodeURIComponent(albumName) + "/";
  s3.listObjects({ Prefix: albumPhotosKey }, function (err, data) {
    if (err) {
      return alert("There was an error viewing your album: " + err.message);
    }
    // 'this' references the AWS.Request instance that represents the response
    var href = this.request.httpRequest.endpoint.href;
    var bucketUrl = href + albumBucketName + "/";

    var photos = data.Contents.map(function (photo) {
      var photoKey = photo.Key;
      var photoUrl = bucketUrl + encodeURIComponent(photoKey);
      return getHtml([
        "<span>",
        "<div>",
        "<br/>",
        '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>',
        "</div>",
        "<div>",
        "<span>",
        photoKey.replace(albumPhotosKey, ""),
        "</span>",
        "</div>",
        "</span>",
      ]);
    });
    var message = photos.length
      ? "<p>The following photos are present.</p>"
      : "<p>There are no photos in this album.</p>";
    var htmlTemplate = [
      "<div>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
      "</div>",
      "<h2>",
      "Album: " + albumName,
      "</h2>",
      message,
      "<div>",
      getHtml(photos),
      "</div>",
      "<h2>",
      "End of Album: " + albumName,
      "</h2>",
      "<div>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
      "</div>",
    ];
    document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    document
      .getElementsByTagName("img")[0]
      .setAttribute("style", "display:none;");
  });
}

javascript가 브라우저에서 비활성화되거나 사용이 불가합니다.

AWS 설명서를 사용하려면 Javascript가 활성화되어야 합니다. 지침을 보려면 브라우저의 도움말 페이지를 참조하십시오.

문서 규칙

Amazon S3 브라우저 예제

Amazon S3 버킷의 사진 보기: 전체 코드