본문으로 건너뛰기

23.08.06

오늘 한 일​

  • gloddy 프로젝트
    • 게시글 상세 페이지 구현
  • 카공실록 프로젝트
    • S3 이미지 업로드 기능 구현

S3 이미지 업로드 기능 구현​

클라이언트 -> S3 이미지 업로드 -> 서버 -> DB 저장(이미지 url)

AWS를 사용하는건 처음이라서 많이 헤맸다..

S3에 버킷을 생성하고 이것저것 권한을 세팅해줬다.


그다음 클라이언트에서 S3에 업로드를 해야한다.

나는 aws-sdk를 사용했다.

import AWS, { S3 } from 'aws-sdk';

AWS.config.update({
  accessKeyId: process.env.NEXT_PUBLIC_AWS_ACCESS_KEY as string,
  secretAccessKey: process.env.NEXT_PUBLIC_AWS_SECRET_KEY as string,
});

const myBucket = new AWS.S3({
  params: { Bucket: process.env.NEXT_PUBLIC_AWS_BUCKET_NAME as string },
  region: process.env.NEXT_PUBLIC_AWS_REGION as string,
});

export const uploadImage = async (file: File, folderName: string) => {
  if (!file) {
    return;
  }

  const params: S3.Types.PutObjectRequest = {
    Bucket: process.env.NEXT_PUBLIC_AWS_BUCKET_NAME as string,
    Key: folderName + '/' + file.name,
    Body: file,
    ACL: 'public-read',
    ContentType: file.type,
  };

  const data = await myBucket.putObject(params).promise();

  return data;
};

export const uploadImages = async (files: File[], folderName: string) => {
  const promises = files.map(file => uploadImage(file, folderName));

  const data = await Promise.all(promises);

  return data;
};

처음에 url을 클릭했을 때 다운로드가 되는 문제가 있었다. 알고보니 contentType을 설정해주지 않아서 그런 것이었다. 수정하니 잘 되었다.

서버에서 요구하는 데이터 형식​

{
  url: string,
  width: number,
  height: number,
  extension: string
}

근데 S3에서 받아오는 데이터는 width, height가 없었다.

따로 구할 수는 있겠지만, 일단 백엔드와 협의해서 다른 방향으로 할 수 있도록 얘기를 해봐야겠다.

내일 할 일​

  • 마지막 TS 스터디
  • 카공실록 이미지 api 연결
  • gloddy PR 리뷰 및 수정