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

AWS 설정 부분

1. Amazon S3 버킷 객체 생성

2. Amazon Cognito 자격 증명 풀 생성

    1. Amazon Cognito 링크

    2. 자격 증명 풀 만들기

    3. 인증되지 않은 자격 증명에 대한 액세스 활성화 체크

인증되지 않은 자격 증명에 대한 액세스 활성화 체크

    4. 풀 생성 클릭

 

3. Identity and Access Management(IAM)에서 Cognito 자격 증명 역할 ARN (Unauth_Role) 가져오기

    1. Amazon IAM 링크

    2. 왼쪽 메뉴 → 엑세스 관리 → 역할 → 생성한 Cognito 자격 증명 Unauth_Role 클릭

왼쪽 메뉴  → 엑세스 관리 → 역할  → 생성한 Cognito 자격 증명 Unauth_Role 클릭

    3. 역할 ARN 복사 및 저장

 

 

4. Amazon S3 버킷 객체 정책 설정

• 생성한 버킷 객체 선택 → 권한 → 버킷 정책 편집 (정책 예제 및 정책 생성기 이용)
• 키 설명
  
  • "Sid": 식별자
  • "Effect": "Allow": 허용 정책 (차단은 "Deny")
  • "Action": "s3:ListBucket": 버킷에 있는 파일 리스트 가져올때 사용 (리소스에 "/*" 사용하지 않음)
  • "Action": "s3:GetObject": 버킷에 있는 파일을 직접 가져올때 사용
  • "Principal": 역할 ARN (고유 역할 코드)
  • "Resource": 버킷 ARN (허용 리소스)

{
    "Version": "2012-10-17",
    "Id": "정책 번호",
    "Statement": [
        {
            "Sid": "식별자",
            "Effect": "Allow",
            "Principal": {
                "AWS": "Cognito 자격 증명 역할(Unauth_Role) ARN"
            },
            "Action": "s3:GetObject",
            "Resource": "버킷 ARN(arn:aws:s3:::버킷_이름)/*"
        },
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "Cognito 자격 증명 역할(Unauth_Role) ARN"
            },
            "Action": "s3:ListBucket",
            "Resource": "버킷 ARN(arn:aws:s3:::버킷_이름)"
        }
    ]
}

 

5. Amazon S3 버킷 객체 CORS 설정

• 생성한 버킷 객체 선택 → 권한 → CORS(cross-orgin 리소스 공유) 편집
• 키 설명
  
  • "AllowedHeaders": 허용 요청 헤더
  • "AllowedMethods": 허용 메소드 (REST API 형식)
  • "AllowedOrigins": 허용할 접속 사이트 (웹사이트 화이트리스트)
  • "ExposeHeader": 식별할 응답 헤더
  • "MaxAgeSeconds": 지정한 리소스에 대한 응답 캐싱 시간 (초 단위)

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

 

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

브라우저에서 Amazon S3 버킷의 사진 보기 - AWS SDK for JavaScript

참고 링크 2: https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html

CORS configuration - Amazon Simple Storage Service

참고 링크 3: https://www.enteroa.com/2020/11/05/s3-%EB%B2%84%ED%82%B7-cors-%EC%84%A4%EC%A0%95-json/

S3 버킷 CORS 설정 (json)

참고 링크 4: https://mygumi.tistory.com/362

[Cognito] 사용자별 파일 접근하기 :: 마이구미