Node.js AWS S3 이미지 업로드하기 feat. AWS-SDK v3

● AWS IAM 유저 추가하기

우선 AWS 콘솔에서 iam을 검색해서 들어가준다

AWS 콘솔 IAM 검색결과

 

좌측 사용자를 누르고 사용자 추가를 눌러준다

IAM 사용자 추가

 

사용자 이름을 적절하게 지정해준다

IAM 사용자 이름 지정

 

다음 권한설정에서 "직접 정책 연결" 을 눌러주고 "s3" 를 검색해서 "AmazonS3FullAccess" 를 선택한다

IAM 사용자 권한설정

 

 

사용자 생성 이후에 해당 사용자를 눌러준다.

사용자 설정 후 화면

 

 

보안 자격 증명 탭에서 사용자에 대한 Access key를 생성해준다.

엑세스 키 만들기

 

 

사용할 환경에 체크하면 되며 우선 나는 기타로 체크했다.

엑세스 키 사례

 

설명 태그를 적절하게 작성해준다

 

유저에 대한 액세스 키가 발급된다. 해당 키는 외부에 노출되지 않도록 주의하자

엑세스 키 발급완료

 

 

● AWS S3 버킷 생성하기

IAM과 마찬가지로 AWS 콘솔에서 S3를 검색하여 들어간뒤 버킷 생성을 눌러주면 된다.

 

적당한 버킷이름과 AWS 리전을 골라준다. 그리고 ACL을 활성화 시켜줘야 한다.

 

만약 ACL 비활성화시 추후 에러가난다

버킷생성 1

 

그 후 퍼블렉 엑세스 차단 설정을 모두 비활성화 해준다.

 

테스트환경을 위해 비활성화 했지만 실제 프로덕션에 사용시 커스텀 ACL로 적절한 조치가 필요하다

버킷생성 2

 

 

● 코드 작성하기!

우선 nodejs에서 aws의 기능을 활용하기 위해서 아래 패키지를 다운로드 해준다.

# 자바스크립트
npm i aws-sdk
npm i @aws-sdk/client-s3

# 타입스크립트
npm i aws-sdk
npm i @aws-sdk/client-s3
npm i -D aws-sdk

 

우선 AWS S3 클라이언트를 생성해준다.

 

위에서 생성한 accessKey, secretAccessKey는 유출될 위험이 있으니 .env에서 관리해주는게 좋다.

const s3Client = new S3Client({
  region: "ap-northeast-1",
  credentials: {
    accessKeyId: config.aws.accessKey,
    secretAccessKey: config.aws.secretAccessKey,
  },
});

 

 

다음은 s3Client에 요청을 보낼 command를 작성해준다.

 

• Bucket: S3 버킷 이름
• Key: 업로드될 파일의 이름
• Body: Buffer 혹은 그 외 데이터 ( PutObjectRequest["Body"] | string | Uint8Array | Buffer )
• ACL : "public-read"로 설정

  const command = new PutObjectCommand({
    Bucket: "hellodeveloper",
    Key: key,
    Body: body,
    ACL: "public-read",
  });

 

마지막으로 실제 s3Client에 업로드 요청을 보내준다.

 

리턴값의 경우 업로드된 이미지의 URL을 반환했다. 이는 데이터베이스에 저장하기 위한 데이터이다.

try {
    await s3Client.send(command);
    return `https://hellodeveloper.s3.ap-northeast-1.amazonaws.com/${key}`;
  } catch (err: any) {
    throw err;
  }

 

 

최종 코드 ( imageUploader.ts )

import config from "../config";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

/**
 * AWS S3 이미지 업로더
 * @param {string} key - 이미지 이름
 * @param {buffer} body - multer에서 받은 image buffer
 * @returns {string} - S3에 업로드된 이미지의 URL
 */
export const imageUploader = async (key: string, body: Buffer): Promise<string> => {
  const s3Client = new S3Client({
    region: "ap-northeast-1",
    credentials: {
      accessKeyId: config.aws.accessKey,
      secretAccessKey: config.aws.secretAccessKey,
    },
  });

  const command = new PutObjectCommand({
    Bucket: "hellodeveloper",
    Key: key,
    Body: body,
    ACL: "public-read",
  });

  try {
    await s3Client.send(command);
    return `https://hellodeveloper.s3.ap-northeast-1.amazonaws.com/${key}`;
  } catch (err: any) {
    throw err;
  }
};

 

업로드 이후 데이터베이스에 성공적으로 URL이 저장되어 잘 불러오는것을 볼 수 있다.

결과화면