AWS 3장 - S3 연결하기

AWS

S3

• EC2가 Elastic Computer Cloud의 약자인 것처럼, S3는 Simple, Storage, Service의 약자이다.
• 파일을 저장하며 데이터를 객체 형태로 저장하는 역할을 한다.
• 주로 이미지나 동영상 파일을 저장하는 용도로 사용된다.
  • 파일 저장에 최적화 되어 있어, 파일의 업로드/다운로드가 매우 빠르다.
  • 거의 무한대로 저장이 가능하다.
• SSL을 통해 높은 보안을 자랑하지만, 높은 보안성만큼이나 비용이 많이 들기 떄문에 개인정보나 유실되면 안 되는 데이터를 저장하는 것이 적합하다.

사용법

1. 기본적으로 버킷 단위로 사용하며 버킷을 생성하고 기본 옵션들을 수정한다.
2. 객체 소유권

• ACL 의 활성화 여부를 통해 S3를 외부에 공개할 지 (접근)를 설정한다.

1. 버킷 버전 관리

• 비활성화가 권장되며, 활성화를 선택 시, 파일을 버전 별로 관리하기 때문에 유실 시 복구가 가능하지만, 높은 비용이 책정된다.

1. 기본 암호화

• 활성 시, 객체를 저장할 때 암호화하여 저장하고 다운로드 시, 복화하한다. (비활성화)

1. 버킷 생성 후 권한 > 버킷 정책 > 편집 > 정책 생성기로 접근한다.
2. 정책 설정

Select Type of Policy: S3 Bucket Policy
Effect: Allow (접근하는 모든 사람을 허용)
Principal: * (모두에게 접근 권한 부여)
Actions: GetObject, PutObject, DeleteObject (사진 조회, 업로드, 삭제)
ARN: arn:aws:s3:::내 버킷 이름

1. 정책을 생성 후, 편집하기를 눌러 그대로 붙여넣는다.
2. 버킷 이름으로 생성된 Resource 뒤에 /*을 붙여 접근할 수 있는 경로를 설정한다.
3. CORS 에러 발생 시 권한 > CORS 에서 편집을 눌러 아래와 같이 입력하여 모든 접근을 허용한다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

예시 코드

const fetchS3Objects = async (folder: string) => {
  const ACCESS_ID = process.env.REACT_APP_AWS_ACCESS_KEY_ID;
  const ACCESS_KEY = process.env.REACT_APP_AWS_ACCESS_KEY;
  const region = "ap-northeast-2";
  const bucketName = "choigirang-portfolio";

  AWS.config.update({
    accessKeyId: ACCESS_ID,
    secretAccessKey: ACCESS_KEY,
    region,
  });

  const s3 = new AWS.S3();

  try {
    const data = await s3
      .listObjectsV2({ Bucket: bucketName, Prefix: folder })
      .promise();

    if (data.Contents) {
      const urls = data.Contents.map((obj) => {
        return `https://${bucketName}.s3.amazonaws.com/${obj.Key}`;
      });

      return urls.slice(1);
    }
  } catch (error) {
    throw new Error(`Error listing objects: ${error}`);
  }
};

const useGetImg = (folder: string) => {
  return useQuery(["s3Objects", folder], () => fetchS3Objects(folder));
};

export default useGetImg;