[AWS s3] 헬키 개발일지 11. aws 다시 세팅, s3에서 sign된 url을 가져오자

간만에 글을 쓰는데, 최근에 굉장히 바빴다... 원래 같으면 이것저것 글을 남겨두는데... 흠. 뭐 어쩔 수 없지.

일단 좀 더 개발 환경에 가까운 s3를 먼저 복습해보도록 하자. 이미 개발 자체는 끝났으니까 리뷰하면서 하면 될 듯.

 

이 다음은 대망의 three.js를 다룰 건데, 아직도 viewport sync가 제대로 되지 않아서 그것만 고치면 어떻게든 될 것 같긴하다.

 

이걸 개발하면서 느낀 제일 중요한 점은 "최신 라이브러리도 찍먹 하자" 이다. 알고보니 aws sdk의 버전에 따라서 꽤나 이용방법이 다르다.

 

npm에서 aws-sdk라는 이름의 패키지를 깔아서 이용하고 있다면 v2, @aws-sdk/???? 와 같이 구체적인 패키지를 따로 깔아서 이용하고 있다면 v3 이상을 이용하고 있다는 뜻이다. v2는 이번 년도 이후로 지원은 중지한다는 듯 싶고 지금도 long-maintainence 기간이라는 것 같다. 나는 v2를 이용하려고 했다가 괜히 삽질만 하고 제대로 결과가 나오지 않았기 때문에 v3를 이용하는 방법을 여기에 적어두려 한다.

 

우선 s3 및 계정 설정을 먼저한다.

1. s3 버킷을 생성한다. 이는 특별할 것이 없이 기본 설정으로 하면 된다.

BUCKET_NAME, 원한다면 AWS_REGION(리전 코드, 서울은 ap-northeast-2) 얻기

 

2. iam 에서 policy를 만든다. create policy를 클릭.

2-1. policy 생성 -> 서비스에서 sts 선택 -> 쓰기 탭의 assumeRole 체크 -> 리소스의 모두 체크

 

3. iam 에서 master user를 만든다. assumeStsPolicy를 직접 정책 연결을 선택해서 넣는다.

3-1. 해당 유저에 accesskey를 만들고 accesskey 및 secret key 복사

ACCESS_KEY, ACCESS_SECRET_KEY, AWS_MASTER_ARN 얻기

 

4. role을 만든다. s3 full access 가능.

AWSARN 얻기

 

5. role의 trust 탭에서

{
    "Effect": "Allow",
    "Principal": {
        "AWS": "[AWS_MASTER_ARN]"
    },
    "Action": "sts:AssumeRole"
}

를 넣어준다. 하면 기본적인 access는 가능해진다.

 

이젠 node 프로젝트에서 설정을 해주자.

0. npm i 를 이용해서 다음 패키지를 설치한다.

npm i @aws-sdk/client-s3 @aws-sdk/credential-providers @aws-sdk/s3-request-presigner

 

1. next.config.js 에 해당 origin 추가

    images: {
      remotePatterns: [
        {
          protocol: "https",
          hostname: "[만들어진 s3 bucket 이름].s3.ap-northeast-2.amazonaws.com",
          port: "",
          pathname: "**"
        }
      ]
    }

 

 

2. 한 다음 아래와 같이 s3 client를 생성

import { GetObjectCommand, ListBucketsCommand, PutObjectCommand, S3Client } from '@aws-sdk/client-s3';
import { fromTemporaryCredentials } from '@aws-sdk/credential-providers';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

...dotenv 등이용해서 아래의 키를 받아온다.

const s3 = new S3Client({
    region: AWSREG,
    credentials: fromTemporaryCredentials({
        masterCredentials: {
            accessKeyId: AWSMASTERID!,
            secretAccessKey: AWSMASTERSECKEY!,
        },
        // Required. Options passed to STS AssumeRole operation.
        params: {
            // Required. ARN of role to assume.
            RoleArn: AWSARN!,
            RoleSessionName: `aws-sdk-js-${new Date().getTime().toString()}`,
            DurationSeconds: 3600,
            // ... For more options see https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRole.html
        },
        // Optional. Custom STS client configurations overriding the default ones.
        clientConfig: { region: AWSREG }
    }),
})

 

 

3. 끝! 이제 공식문서 v3를 보면서 받아올거 받아오면 된다. 와!...

사실 @aws-sdk/???? 어캐 이용함? 뭐 이런식으로 google에 치면 앵간한건 나오는 편인듯 하다.