[React] S3 파일 불러오기

AWS S3 로 관리하고 있는 미디어 파일을 React 프로젝트에 불러오는 과정을 정리해보겠습니다.

 

 

npm i aws-sdk

npm i aws-sdk 명령어를 진행 중인 프로젝트의 터미널에서 입력하여 aws 를 설치해주거나 ubuntu 서버와 같은 가상 서버를 사용한다면 해당 서버 내의 프로젝트에 들어가서 터미널에 명령어를 입력하여 aws를 설치해줍니다.

 

 

[ awsS3.js ]

import AWS from "aws-sdk";

const config = {
  aws_reg: "",	// aws 지역 ex ) ap-northeast-2
  aws_key: "",	// aws 키
  aws_sec: "",	// aws 시크릿 키
};

AWS.config.update({
  region: config.aws_reg,
  accessKeyId: config.aws_key,
  secretAccessKey: config.aws_sec,
});

const s3 = new AWS.S3();

const getImg = async (company, store) => {
  async function download(filename) {
    const data = await s3
      .getObject({
        Key: filename,
        Bucket: "",	// 버킷 이름
      })
      .promise();

    const blob = new Blob([data.Body], { type: "image/jpeg" });
    const urlCreator = window.URL || window.webkitURL;
    const imageUrl = urlCreator.createObjectURL(blob);

    return imageUrl;
  }

  let data;

  try {
    data = await download(`qr_img/${company}/${store}.jpg`);
  } catch {
    try {
      data = await download(`qr_img/${company}/${store}.jpeg`);
    } catch {
      try {
        data = await download(`qr_img/${company}/${store}.png`);
      } catch {
        data = "";
      }
    }
  }

  return data;
};

const getVideo = async (company, store) => {
  async function download(filename) {
    const data = await s3
      .getObject({
        Key: filename,
        Bucket: "",	// 버킷 이름
      })
      .promise();

    const blob = new Blob([data.Body], { type: "video/mp4" });
    const urlCreator = window.URL || window.webkitURL;
    const vedioUrl = urlCreator.createObjectURL(blob);

    return vedioUrl;
  }

  let data;

  try {
    data = await download(`${company}/${store}.mp4`);
  } catch {
    data = "";
  }

  return data;
};

export { getImg, getVideo };

프로젝트 내에 awsS3.js 파일을 만들어줍니다.

해당 파일 내에 S3에 대한 설정 내용이 들어가게 되고 S3 버킷에 접속하여 미디어 파일을 불러올 수 있습니다.

위의 내용에서 일부 변수들에 자신이 만든 S3의 설정 값들을 넣어주면 됩니다. 

 

- aws_reg : aws 사용 지역 (예 : ap-northeast-2)

- aws_key : s3 버킷 생성하면서 발급된 액세스 key

- aws_sec : s3 버킷 생성하면서 발급된 시크릿 key

- Bucket : 만든 버킷 이름

 

!! 따라서 해당 설정을 적용하려면 aws s3 가 생성된 상태여야 합니다.

s3 생성 방법 -> https://jindevelopetravel0919.tistory.com/153

 

 

 

awsS3.js 파일까지 만들었다면 이제 s3의 만든 버킷 내부로 접속해서 동영상 파일이든 이미지 파일이든 원하는 파일을 넣습니다.

 

 

업로드한 파일 이름을 클릭하여 들어가서 객체 url을 복사해두도록 합니다.

 

 

이제 프로젝트로 돌아와서 미디어 데이터를 불러올 필요가 있는 부분에 src 속성에다가 복사한 객체 url을 넣습니다.

 

 

이제 React 프로젝트를 실행해보면 해당 미디어 파일이 정상적으로 출력됩니다!

 

 

+ 추가적으로 react 프로젝트 내부에 비디오 파일과 같은 미디어 파일을 넣고 그 내부 파일들을 호출하는 방식으로 프로젝트가 구성되어있는 상태에서 ec2 서버에 배포했더니 어째서인지 모르겠지만 내부에 있는 파일들에 접근이 되지 않았습니다.

따라서 위와 같은 방법으로 aws s3 를 사용하여 수정해서 정상적으로 동작되었습니다.

나중에 어째서 내부 파일에 대해 접근이 불가능하게 되었는지 확인해볼 필요가 있을 것 같습니다.