Vue.js - AWS S3 (Vue.js 설정 부분)

Vue.js 설정 부분

AWS-SDK 설치 및 기본 설정

• 터미널 → npm install --save aws-sdk
• import 및 기본 설정 하기
  • 생성한 Cognito 자격 증명 풀 ID는 Cognito 자격 증명 풀 편집에서 볼 수 있음

    

    Cognito 자격 증명 풀 ID

  • AWS.config.region: 지역 설정
  • AWS.config.credentials: ID 정책 설정
  • new AWS.S3: 객체 인스턴스 생성
  • params: 기본 파라미터 설정

import AWS from 'aws-sdk'

AWS.config.region = 'ap-northeast-2(지역)';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: '생성한 Cognito 자격 증명 풀 ID',
});

const s3 = new AWS.S3( {
  params: {
    Bucket: '생성한 버킷 객체 이름'
  }
});

 

파일 리스트 가져오기 (listObjectV2)

 let file_key_lists = [];
 
 // Prefix: 특정 폴더 설정
 // MaxKeys: 가져올 최대 파일 개수
 s3.listObjectsV2({Prefix: 'img'}, (err, data) => {
  if (err) {
    // 에러 처리 코드
    throw err;
  } else {
    let contents = data.Contents;
    // contents: 파일 객체 리스트
    contents.forEach((content) => {
      // content.Key: 파일 이름(경로)
      file_key_lists.push(content.Key);
    });
  }
});

 

파일 URL 가져오기 (getSignedUrl)

• 단순 Preview 기능 이용

// Key: 파일 이름(경로)
s3.getSignedUrl({Key: 'PATH'}, (err, url) => {
  if (err) {
    // 에러 처리 코드
    throw err;
  } else {
    console.log(url);
  }
});

 

파일 Stream 가져오기 (getObject)

• Preview, Download 기능 등 이용

// Key: 파일 이름(경로)
s3.getObject({Key: 'PATH'}, (err, data) => {
  if (err) {
    // 에러 처리 코드
    throw err;
  } else {
    // data URL
    let dataURL = "data:image/jpeg;base64," + encode(data.Body);
 
    // blob URL
    const blob = new Blob([data.Body], {
        type: data.ContentType
    });
    const blobURL = URL.createObjectURL(blob);
  }
});

 

참고 링크 1: https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/s3-example-photos-view-full.html

Amazon S3 버킷에서 사진 보기: 전체 코드 보기 - AWS SDK for JavaScript

참고 링크 2: https://talkit.tistory.com/580

[javascript] AWS S3에서 파일 읽기

참고 링크 3: https://mygumi.tistory.com/320

Amazon S3: 파일 관리를 위한 aws-sdk 활용법 :: 마이구미