[AWS S3] React 에서 버킷 속 객체 리스트 불러오기 ( ListObjectsV2 )

 

 

 

내가 만든 특정한 이름의 버킷에 저장되어있는 모든 버킷을 불러와보자. 마찬가지로 백엔드에서 처리할 필요 없이, 프론트단에서 할 수 있다.(사실 이렇게 하면 안된다. 이유는 뒤에서 설명..)

 

JS환경에서 진행하며, 공식 문서와 함께 스크린샷으로 진행 방법을 상세히 안내하였으니 차근차근.. 빠르게 따라와도 해낼 수 있다. 

전체 코드는 언제나처럼 제일 하단에 작성하였다. [더보기]를 클릭하면 된다.

 

 

---

 

 

 

 

 

AWS 공식 문서는 깔끔하고 악랄하다. React 문서를 읽으면서 우와 공식문서 짱이다 했는데 AWS를 읽으면서는 8지옥을 도는 것 같았다.. 거미그물 같은 곳이라 한번 들어가면 걸려서 못 나온다. 한국어로 읽어도 잘 모르겠는데, 아직 번역되지 않은 문서들이 많기 때문에 읽으면 읽을수록 모르는 미궁에 빠지는 경험을 다들 한번씩은 해봤을 것이다.

 

이럴때 필요한 것이 '이거 하고 싶은데 공식문서 어디서부터 읽으면 될까요' 라는 출발선이다. 열심히 찾아왔다.

Node.js, 즉 자바스크립트 환경에서 버킷을 다루는 aws-sdk 에 대한 공식 문서는 이곳이다. : https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v3/developer-guide/s3-example-creating-buckets.html

Amazon S3 버킷 생성 및 사용 - AWS SDK for JavaScript

 

 

 

 

 

이제 어디부터 읽어야 할 지 알게 되었으니, 공식 문서를 읽으며 진행해보자. 해당 문서는 'Node.js에서 버킷 다루는 법' 을 설명하고 있다. 읽어보니 저 문서를 따라하기 위해서는 '사전 필수 작업' 이 있는 듯 하다. 사용자 자격 증명에 대한 사전 작업을 하라고 안내하고 있다. 아래에서 파란색으로 링크된 [공유 인증 자격 증명 파일에서 Node.js의 인증 자격 증명 로드] 를 클릭해본다.

사전작업을 안했으면 공유 인증 자격 증명 파일에서 Node.js의 인증 자격 증명 로드 에 들어가라고 한다.

 

 

 

 

 

 

아래 글이 있는 사이트로 이동되었다. access key와 secret key가 필요하다고 하는데... 우리는 아직 이 키들을 발급받은 적이 없다. 따라서 [자격 증명 받기] 라고 파란색 링크가 되어있는 글로 이동해보자.

 

 

 

 

 

엑세스 키와 시크릿 키를 받기 위한 방법이 설명되어 있다. 1부터 7단계 중에, 1부터 5단계까지만 따라하면 된다. csv 파일을 이용할 거라면 6과 7단계를 따라해도 된다. 복사 붙여넣기가 더 쉬운 길이기 때문에 우리는 5단계까지만 진행한다. 

맨 윗줄의 이해 이해 이해 이해... ... 는 무시한다. 우리에게 자격증명을 이해하기를 매우 권장하고 있을 뿐이다. 

자격증명을 이해하기를 매우 권장하는 듯한 이해 이해 이해 이해 이해 이해를 만날 수 있다.

 

 

 

---

1. AWS Management Console에 로그인하여 https://console.aws.amazon.com/iam/에서 IAM 콘솔을 엽니다.

2. 탐색 창에서 사용자를 선택합니다.

3. 액세스 키를 생성할 사용자의 이름을 선택한 다음 Security credentials(보안 자격 증명) 탭을 선택합니다.

---

 

 

를 실행한다. IAM에 들어가보자. 전 글에서 해봤기 때문에 쉽다. 다만 우리는 역할만 만들었지, 사용자를 만들지 않았기 때문에 사용자를 새로 만들어 주어야 한다. IAM의 [사용자] 탭에서 [사용자 추가]를 클릭하여 , 사용자를 생성한다.

[IAM] - [사용자]

 

 

 

 

 

 

[사용자 추가] 를 클릭하면 아래와 같은 창이 나타난다. 원하는 이름으로 사용자 이름을 설정하고, 액세스 키-프로그래밍 방식 액세스 에 체크한다. 우리에게 두 개의 키를 발급받게 해 줄 것이다.

 

 

 

 

 

다음으로 넘어가 [기존 정책 직접 연결] 을 클릭한다. 검색창에 s3를 검색해, AmazonS3FullAccess 를 선택한다. S3 서비스에 대한 모든 관리를 할 수 있게 해 주는 권한을 가진, 사용자를 생성하는 것이다.

 

 

 

 

 

아래 두 단계는 건드릴 부분이 없으므로. [다음:검토] 와 [사용자만들기] 를 눌러 넘어가면 된다.

 

 

 

 

 

 

사용자가 추가되었다. 여기서 공식 문서의 5번을 실행할 수 있다.

---

5. 새 액세스 키 페어를 보려면 표시를 선택합니다. 이 대화 상자를 닫은 후에는 보안 액세스 키에 다시 액세스할 수 없습니다. 자격 증명은 다음과 비슷합니다.
액세스 키 ID: AKIAIOSFODNN7EXAMPLE
비밀 액세스 키: wJalrXUtnFEMI/K7MDENG/bPxRfi사이클 예제 키

---

 

 

 

 

여기서 눈여겨 보아야 할 부분은 이 대화 상자를 닫은 후에는 보안 액세스 키에 다시 액세스할 수 없습니다 이다. 이 페이지를 벗어나면 다시는 key를 얻을 수 없으므로, 사용자 생성부터 다시 해야 한다는 뜻이다. 액세스 키 ID와 비밀 액세스 키 ID를 복사하여 텍스트 파일에 잠시 붙여넣기 해 둔다. 잃어버리면 처음부터 다시해야함..

 

 

 

 

이렇게 액세스 키와, 비밀 액세스 키를 모두 받았다. 나머지 글은 이것인데...

 

 

 

 

 

우리는 react를 이용할 것이기 때문에, 해당 부분은 모든 단계를 Node.js에서 다시 작성할 다음 글에서 진행한다. 파일을 건들고 환경변수를 등록하는 대신 React에서는 하드코딩을 통해 accesskey와 secret accesskey를 등록해줄 수 있다.

 

저번 시간에 생성한 config 파일을 아래와 같이 수정하자. 복사해둔 키를 붙여넣는다. 액세스 키는 accessKeyId, 비밀 액세스 키는 secretAccessKey가 된다. 

export const bucketName = '버킷이름'
export const awsRegion = 'region값';
export const awsIdentityPoolId = 'PoolId'

export const accessKeyId = '복사해둔 accessKeyId'
export const secretAccessKey = '복사해둔 secretAccessKey'

// Create an Amazon S3 service client object.s

 

 

 

지난 시간에 설치한 AWS-SDK 라이브러리에 기본으로 존재하는 S3를 사용하여, S3객체를 생성해 주어야 한다. config 파일에 등록한 key값들을 불러와 연결해주자. objlist는 버킷에서 불러온 객체들의 이름들을 담을 빈 배열이다.

 
import AWS from "aws-sdk"
import * as config from 'config.js경로'

function Previews() {

...

let objlist = []

 const s3 = new AWS.S3({
    region:config.awsRegion,
    credentials: {      
    accessKeyId:config.accessKeyId,
    secretAccessKey:config.secretAccessKey
    }
  })

 

 

 

 

테스트용으로 버튼을 하나 추가해 주었다.

객체 리스트 가져오기 버튼을 추가한다.

 

<div style={{marginTop:'20px'}} onClick={getButton}> 객체 리스트 가져오기</div>

 

 

 

 

 

버튼을 클릭하면, '내가 지정한 버킷 속의 객체 이름들' 을 가져올 것이다. 생성한 s3 객체를 사용하며, AWS의 listObjectsV2를 사용한다. maxKeys(가져올 최대 정보 수), 인코딩 유형 등의 옵션을 설정할 수 있다.

ListObjectsV2 공식 문서 : https://docs.aws.amazon.com/AmazonS3/latest/API/API_ListObjectsV2.html

 

아래 내용은 파라미터로 전달된 버킷 이름 속 객체를 가져오는 코드이다. promise가 성공하면 data에 버킷 속의 객체들 정보가 담겨 전달된다. i.Key에는 객체의 '이름' 이 들어있다. 생성해놓은 objlist 변수에 이름을 담아 콘솔로 출력해보자.

 async function getButton() {
    
    await s3
    .listObjectsV2({Bucket:config.bucketName})
    .promise()
    .then((data)=> {
      console.log('버킷 속 객체들 정보: ',data)
      for (let i of data.Contents) {
        objlist.push(i.Key) //Key는 객체의 이름이다.
      }            
      console.log('객체의 총 리스트 : ',objlist)
    })
    .catch((error)=>{
      console.log('객체 가져오기에서 에러 발생: ',error)
    })

  }

 

 

 

 

[객체 리스트 가져오기] 버튼을 클릭하면, 콘솔창에 가져온 정보들이 출력된다. 

콘솔에 해당 버킷 속 객체의 리스트가 나열되고 있다.

 

 

 

 

이렇게 프론트단에서 AWS S3에 정보를 입력하고, 가져오는 CRUD 중 C, R을 실행해 보았다. 

 

 

 

 

 

 

 

 

지금까지는 React를 통해 S3 버킷을 다루었다. 하지만 공식 문서가 Node.js에서 진행되는 상황을 설명한 만큼, 이러한 처리는 백엔드단에서 처리해 주어야 한다. 이 글에서 진행한 방식은 Node.js와 리액트가 모두 같은 JS로 만들어졌다는 점을 이용한 편법인 것이다. 이 경우 JS파일은 다운받을 수 있다는 헛점 때문에, 우리의 AWS 입장권 KEY가 털려버릴 수 있다는 지대한 위험이 존재한다. 그렇게 되면 누군가가 우리의 AWS를 함부로 이용해서 과금폭탄 을 안겨 줄 수도 있다. 검색하면 실제 사례들이 매우 많이 나온다. 해커들이 s3를 코인 채굴용으로 사용한다고 한다. 

 

 

따라서 다음 글부터는 aws가 권장하는 대로 백엔드에서 버킷을 다루는 법을 진행한다.

 

---

참고한 곳 : https://inpa.tistory.com/entry/AWS-SDK-%F0%9F%91%A8%F0%9F%8F%BB%E2%80%8D%F0%9F%92%BB-Node-S3-%EB%A9%94%EC%86%8C%EB%93%9C-%EC%98%88%EC%A0%9C-%EC%A0%95%EB%A6%AC#%EA%B0%9D%EC%B2%B4_%EB%AA%A9%EB%A1%9D_%EC%A1%B0%ED%9A%8C

 

 

 

 

 

---

 

 

 

전체 코드

 

import React, { useRef, useState } from "react";
import AWS from "aws-sdk"
import * as config from '../config/config.js'
function Previews() {

  
  //  =========================== set AWS ===========================
  AWS.config.update({
    region: config.awsRegion, // 버킷이 존재하는 리전(Ex. "ap-northeast-2")
    credentials: new AWS.CognitoIdentityCredentials({
      IdentityPoolId: config.awsIdentityPoolId, // cognito 인증 풀에서 받아온 키 (Ex. "ap-northeast-2...")
    }),
  })
  
  const s3 = new AWS.S3({
    region:config.awsRegion,
    credentials: {      
    accessKeyId:config.accessKeyId, //accessKeyId
    secretAccessKey:config.secretAccessKey /secretAccessKey
    }
  })  


  const uploadIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA0klEQVR4nO2UWQ6CQBAF+8cbavjQ4+BJ1VNAUgaXxI1lIJPuwVcJP8yQVE1nMBMiLkDVPVYiwA5ogBY4WKHyT8qJ4Fu+nAj65eNHcL+wn/JNz7uqhJNvgT2w7VmLMYkh+Zc9MSOYIB82ggT5cBHMkA8Twfiv8saP78Zos0dMlZ8ZkDciRX5BQJ6IVPmFAW4X+43UdXcU4I0m4I0m4I0m4I0m4M3qJjCGRQO4MJ2TRQM4JgTUFg1g84g4D4h3a3W319tXCCEyQXBMAc7Y6icgxJ9xBUOuyY7C/8ZJAAAAAElFTkSuQmCC'
  const imageInput = useRef();  


  const[files,setFiles] = useState('')
  const [imageSrc, setImageSrc] = useState('');

  const [imgname,setImgname] = useState('')

  let objlist = []


  // <=========== test Click event ===========>
 

 async function getButton() {
    
    await s3
    .listObjectsV2({Bucket:config.bucketName})
    .promise()
    .then((data)=> {
      console.log('버킷 속 객체들 정보: ',data)
      for (let i of data.Contents) {
        objlist.push(i.Key) //Key는 객체의 이름이다.
      }            
      console.log('객체의 총 리스트 : ',objlist)
    })
    .catch((error)=>{
      console.log('객체 가져오기에서 에러 발생: ',error)
    })

  }
    // <=========== Savebutton Click event ===========>

  function saveEventhandler() {  
      
        if (files && files[0].size > (10 * 1024 * 1024)) {
          alert("10mb 이하의 파일만 업로드할 수 있습니다.");
       } else {

        const uploadFiles = files[0]          

          // S3에 파일 저장
          const upload = new AWS.S3.ManagedUpload({
            params: {
              Bucket: 'chaliport', // 업로드할 대상 버킷명
              Key: `${Date.now()}_${uploadFiles.name}`,
              Body: uploadFiles, // 업로드할 파일 객체
            },
          })

          const promise = upload.promise()

          // 저장한 데이터가 data에 들어있다.
          promise.then(
            function (data) {
              alert("이미지 업로드에 성공했습니다.")
              console.log('업로드한 데이터',data)
            },
            function (err) {
              return alert("오류가 발생했습니다: ", err.message)
            }
          )

          
          // Todo axios로 파일 이름과 함께 경로를 몽고db에 저장한다.

          }

      

  
  } 
  
const onClickInput = () => {
  imageInput.current.click();
  }   


  const onLoadFile = (e) => {

    const file = e.target.files;
    console.log('onLoadFile',file)
    setFiles(file);
    console.log('state에 저장 완료 files',files)

    let fileBlob = e.target.files[0]
    
      const reader = new FileReader();
      reader.readAsDataURL(fileBlob);
      return new Promise((resolve) => {
        reader.onload = () => {
          setImageSrc(reader.result);
          resolve();
        };
      });

  }
  

  return(
    <div style={{position:'relative'}}>
      <div>
        <input type="file" 
        style={{display:'none'}} 
        
        onChange={onLoadFile}
        ref={imageInput} 
        />
        
        <img 
        style={{
          position:'absolute',
          top:'20%',
          left:'44%',
          cursor:'pointer'
        }}
        src={ imageSrc ? '' : uploadIcon}
        onClick={onClickInput}/>
        
        </div>
        
        <img

        className="uploadImage"
        style={{
         minWidth:'150px', minHeight:'150px',maxWidth:'500px', border:'1px solid lightgray',
        alignItems:'center', justifyContent:'center', cursor:'pointer'
       
        }}
        onClick={onClickInput}
        
        src={imageSrc? imageSrc : ''}/>

      <div style={{marginTop:'50px'}} >
        <input type="text" placeholder="제목을 입력해주세요."
      style={{width:'300px',height:'30px',outline:'none',
      fontSize:'25px', color:'white',
      borderLeftWidth:0,borderRightWidth:0,borderTopWidth:0,borderBottomWidth:1,
      backgroundColor:"transparent"
      }}
      onChange={(e)=>{setImgname(e.target.value)}}
      /><span style={{marginLeft:'20px', fontSize:'20px', cursor:'pointer' }}
      onClick={saveEventhandler}
      >업로드</span>
      </div>
      <div
      style={{marginTop:'20px',cursor:'pointer'}}
      onClick={getButton}>
        객체 리스트 가져오기
      </div>
      

    </div>
  )
}

  export default Previews;