(풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 08.AWS S3 설정

다음은 이 글의 동영상 강좌입니다.

https://youtu.be/A8FcYGEe2i4

이번 시간은 아마존에서 제공하는 Storage Service인 S3에 파일을 업로드 하는 것을 알아봅니다.

S3는 Simple Storage Service의 각 단어 첫번째 글자가 S가 3개라는 의미입니다.

S3를 이용하면 이미지 파일을 저장할 수 있고, 저장된 이미지를 웹에서 볼 수 있습니다.

 

순서는 다음과 같습니다.

• AWS S3에 버킷 생성
• Cognito Identity Pool(자격 증명 풀) 생성
• IAM에서 자격 증명 풀에 S3 권한 추가

AWS에서 S3 버킷 생성 

우선 AWS에 로그인 한 후 "S3"를 검색하여 서비스로 이동합니다.

AWS S3

 

S3를 사용하기 위해서는 아래와 같이 Bucket을 생성해 주어야 합니다.

• 왼쪽 메뉴의 "버킷"을 클릭
• "버킷만들기" 버튼을 클릭버킷의 이름은 S3 서비스를 통틀어 유일해야만 함.

• 리전을 선택한 후
• 버킷 선택을 클릭

• 퍼블릭 액세스 차단 설정에서 "모든 퍼블릭 엑세스 차단"의 체크 박스를 해제.
  • 현재는 샘플 프로젝트이므로 보안 작업 없이 진행합니다.
  • 운영 환경에서는 권한을 반드시 설정하여 사용하시기 바랍니다.

• "모든 퍼블릭 액세스 차단을 비활성화하면..." 아래의 체크박스를 체크.

• "버킷 만들기" 클릭

• 버킷 생성이 완료되면 생성된 버킷명을 클릭하고, "권한" 탭을 클릭

 

• CORS 항목에서 "편집"을 클릭한 후 다음 내용을 입력합니다.

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

Cognito Identity Pool(자격 증명 풀) 생성

• aws에서 cognito 서비스를 검색하여 이동합니다.

• "자격 증명 풀 관리"를 클릭.

• "새 자격 증명 풀 만들기"를 클릭.

• 자격 증명 풀 이름 입력(예: SliderS3Access)
• "인증되지 않은 자격 증명에 대한 액세스 활성화" 클릭

• "풀 생성" 버튼 클릭

• "허용" 버튼 클릭

• 샘플 코드의 플랫폼에서 "JavaScript"를 선택하면 아래와 같은 코드가 나타납니다.

• 이 코드를 소스에 추가하면 업로드가 가능해집니다.

IAM에서 권한 추가

• AWS의 IAM 서비스로 이동합니다.

• "역할" 메뉴에서 "slider"로 검색.
• 생성된 Role을 클릭.(예 : Cognito_SliderS3AccessAuth_Role)

• "권한 추가" 클릭 후 "정책 연결"을 선택.

• 기타 권한 정책에서 "s3"로 검색 후 "AmazonS3FullAccess"를 선택.
• "정책 연결" 버튼을 클릭.

이렇게 하면 S3에 업로드 할 수 있는 권한 생성 및 설정이 완료되었습니다.