S3 file upload with Presigned url

 

1.s3 Presigned url 

2.react file upload

 

 

nodejs를 통해서 s3로 파일 업로드 방법은 s3.update() putobject 등등 있는걸로 안다

하지만 여러가지 이유중 파일 용량대비 업로드 시간을 고려하여 백엔드를 거치치않고 바로 s3버킷으로 파일을 업로드 할 필요가 생겼다. 용량이 100mb이상은 아니라서 미리서명된(presigned) url api 사용하기로 했다. 나중에 고용량 파일을 올릴때에는   multipartupload를 사용해서 작업 후 글을 작성할 예정이다.

 

s3 설정

기본설정은 똑같다

https://bae-ha.tistory.com/23

React+Node+S3 upload download

 

presignedUrl

 

presigned.js

const getSignedUrl = ({ key }) => {
  return new Promise((resolve, reject) => {
    s3.createPresignedPost(
      {
        Bucket: BUCKET,
        Fields: {
          key,
        },
        Expires: 30,
        Conditions: [
          ["content-length-range", 0, 50 * 1024 ** 2],  
          ["starts-with", "$Content-Type", ""]
        ],
      },
      (err, data) => {
        if (err) reject("err");
        resolve(data);
      }
    );
  });
};

createPresignedPost를 사용한 이유는 file 용량을 제한하기위해서 사용하였다.

기존에 getSignedUrl을 주로 사용하였지만 file용량 설정기 없는것 같아서 이번에는 createPresignedPost 사용하였다.

content-length-range를 사용해서 용량을 제한한다.

그리고 content-type을 넣은이유는 나중에 s3업로드할때 확장자를 따로 붙이지않고 uuid형식으로 파일이름을 저장할 것이다. 그때 해당 파일이 어떤 타입이 제공하기 위해서 사용하였다.

 

get presignedUrl 

const files = [...파일 데이터들]

const getPresigned = await Promise.all(
  files.map(async(file) => {
    const fileKey = uuid();
    const key = `{path}/${fileKey}`;
    const presigned = await getSignedUrl({key})
    return {imageKey, presigned}
  })
)

이렇게 함수를 실행시키면 파일 개수 만큼 presignedUrl 이 생성 된다.

생성된 데이터를 이제 react에서 http통신만 진행하면 된다.

 

React

 

response = url 데이터들..

const files = [...file 데이터들]

const result = await Promise.all(
  [...files].map(async (file, index) => {
    const presigned = response.getPresigned[index].presigned;

    const formData = new FormData();
    for (const key in presigned.fields) { // *1
      formData.append(key, presigned.fields[key]);
    }
    formData.append("Content-Type", file.type); // *2
    formData.append("file", file); // *3
    const result = await axios.post(presigned.url, formData);
    return result;
  })

 

이제 nodejs에서 받아온 presignedUrl 정보를 가지고 s3에 직접 업로드를 할 차례이다.

*1 presignedUrl에 담겨있는 각종 정보들이다 이걸 빠짐없이 다 붙여줘야한다.

for in을 사용하면 각 object에 key값을 알 수 있다 그 기준으로 값도 표현 할 수 있다.

*2 각 파일의 타입을 설정해주기 위해서이다. 위에서 말했던 content type설정이 지금 이 부분이다.

*3 마지막으로 파일 데이터가 입력되면 끝이다.