AWS SDK 로 s3 파일 사이즈 조회하기

 

📌 업로드 할 바우처에 크기 제한을 추가할 수 있을까요?

트리플 TNA 파트너웹 에는 파트너가 고객에게 예약 바우처를 전송하는 기능이 있습니다.

기존에는 파일 사이즈의 제한 없이 전송하도록 했는데, 사이즈가 커질 경우 이슈가 생겨서

이번에 리뉴얼하면서 서버에서 바우처 사이즈가 클 경우 이를 분리해서 전송 처리하는 것 이외에

프론트엔드에서도 개별 바우처에 용량 제한(15MB)을 추가하기로 했습니다.

 

이를 위해 브라우저에서 올리는 파일 사이즈 체크 이외에도

S3 에 이미 업로드 된 바우처 파일 사이즈를 조회해서

각 바우처 항목에 용량정보를 함께 노출해줘야 했습니다.

그래야 고객이 어떤 파일에 문제가 있는지 한번에 확인이 가능할 테니까요.

 

📌 S3 파일 사이즈 (HeadObject)

브라우저에서 업로드한 파일 사이즈를 알아오는 것은 별다른 처리가 필요없지만,

이미 S3 에 업로드한 파일을 알아오기 위해서는 S3 의 HeadObject 접근이 필요합니다.

HTTP 요청 중에서 HEAD 는 request 대상의 content 메타 정보를 얻을 수 있는 요청입니다.

 

S3 에서도 접근할 대상 파일의 HEAD 정보를 HeadObject 를 통해 제공하고 있습니다.

파트너웹은 Next.js 의 API Routes 를 이용해서 API 프록시를 구성하고 있기 때문에

여기에 핸들러를 추가해주는 방향으로 진행했습니다.

 

import { NextApiRequest, NextApiResponse } from 'next'
import { S3 } from 'aws-sdk' // ✅ aws-sdk v2 를 사용하고 있습니다.

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const s3 = new S3({
    ... access key, id 등등 설정값들
  })

  const { fileKey } = req.body

  try {
    const data = await s3
      .headObject({
        Bucket: S3_BUCKET,
        Key: fileKey,
      })
      .promise()

    res.status(200).send(data)
  } catch (error) {
    // ...
  }
}

 

파일을 요청할 S3 객체를 생성한 뒤에, headObject 요청으로

response body 가 비어있는 메타 정보를 담고있는 응답을 얻을 수 있습니다.

 

HTTP/1.1 200

Content-Length: ContentLength
ETag: ETag
Cache-Control: CacheControl
Content-Disposition: ContentDisposition
Content-Encoding: ContentEncoding
Content-Language: ContentLanguage
Content-Type: ContentType
Expires: Expires

// ...

 

대략 위와 같은 형식을 가지는 응답을 보내주며 여기서 Content-Length 를 통해

파일의 크기를 Byte 단위로 읽어올 수 있습니다.

HeadObject 요청은 요청에 대한 400, 403, 404 3가지의 에러 케이스가 존재합니다.

 

이를 위해 aws-sdk v3 부터는 Error Class 를 정의해서 제공해주지만,

v2 에서는 AWSError 라는 인터페이스만 구현되어있고

실제 에러 클래스는 제공해주지 않기 때문에 error.name 속성으로 에러 타입을 구분하도록 했습니다.

 

try { /** headObject 요청 */ }
catch (error) {
  let errorCode = 'unknown'
  if (error instanceof Error) {
    errorCode = error.name
  }

  if (errorCode === 'BadRequest') {
    res.status(400).send(error)
  } else if (errorCode === 'Forbidden') {
    res.status(403).send(error)
  } else if (errorCode === 'NotFound') {
    res.status(404).send(error)
  } else {
    res.status(500).send('Error From AWS SDK')
  }
}

 

📌 브라우저 파일 사이즈 (file.size)

브라우저에서 input 태그로 업로드된 파일의 사이즈는

File 객체의 size 속성으로 접근이 가능합니다.

여기도 마찬가지로 Byte 단위로 반환해줍니다.

 

const handleChange = (files: FileList) => {
  const sizes = [...files].map((file) => file.size) // ✅ File.size 속성으로 접근

  // ...
}

<input type="file" onChange={handleChange} />

 

📌 Byte 형식 변환

아마도 Byte 단위로 표기된 크기를 딱 보고 음, 이 파일이 xxMB 여서 문제가 생긴거구나? 라며

한번에 식별할 수 있는 사람은 없을 겁니다.

이를 위해 사람이 이해하기 쉬운 단위로 변환을 해서 보여줘야하는데,

여기에 사용할 Byte 단위 포맷팅 함수를 구현해줍니다.

 

💡 Note
실제 코드에서는 symbol 노출 여부, 소수점 자리수 등을 함수의 인자로 받아서 처리했지만,
여기서는 예시를 위해 간략화하였습니다.

 

function convertByte(value: number) {
  const kb = 1024
  const fraction = 2
  const notations = ['Byte', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']

  const exponent = Math.floor(Math.log(value) / Math.log(kb))
  const size = parseFloat((value / Math.pow(kb, exponent)).toFixed(frac))
  const notation = notations[exponent]

  return `${size} ${notation}`
}

 

적절한 테스트 코드도 추가해서 제대로 변환이 되는지 확인해봅니다.

 

describe('Formatter > byte', () => {
  it('should change 1024byte to 1KB', () => {
    expect(Formatter.byte({ value: 1024 })).toBe('1 KB')
  })

  it('should change 10000byte to 9.77KB', () => {
    expect(Formatter.byte({ value: 10000 })).toBe('9.77 KB')
  })

  it('should change 100000000byte to 95.37MB', () => {
    expect(Formatter.byte({ value: 100000000 })).toBe('95.37 MB')
  })

  it('should change 100000000000byte to 93.13GB', () => {
    expect(Formatter.byte({ value: 100000000000 })).toBe('93.13 GB')
  })
})

 

💡 1K = 1000? 1024?

이번에 알게된 사실인데, 2진법 컴퓨팅 시스템에서는 1MB = 1024Byte 이기 때문에

10진법을 사용하는 환경에서 보편적으로 사용되는 1K = 1000 에 차이가 있다고 합니다.

때문에 보통 기기 스펙에 명시된 하드웨어 용량보다 실제 사이즈는 작게 표기된다고 하네요.

 

📌 검증 로직 추가하기

이제 위에서 구현한 함수들을 이용해서 바우처 파일을 업로드 하기 전에

파일 사이즈 체크를 해주도록 검증 과정을 추가합니다.

 

// 현재 컴포넌트의 state에 파일 목록이 File[] 형태로 관리되고 있다는 가정

const handleVoucherUpload = (files: File[]) => {
  const limit = 1024 * 1024 * 15 // 15MB
  const exceed = stagedFiles.some((file) => file.size > limit)
  if (exceed) {
    throw new Error('FileSizeLimitExceed')
  }
}

 

해당 함수를 호출하는 쪽에서 에러 타입을 체크해서 FileSizeLimitExceed 일 경우에는

안내 메시지를 담은 토스트 메시지를 띄워줍니다.

 

잘 동작하는군요 😀

 

📌 참고자료

HeadObject

where to find all the exception classes in AWS-SDK for dynamodb in NodeJS typescript?