Presigned URL이란

S3 Bucket에 파일을 업로드하기 전에 미리 발급받아 S3에 영상을 업로드할 수 있도록 해주는 url이다.
Presigned URL로 브라우저에서 AWS Bucket에 영상을 바로 업로드할 수 있다❗️

Presigned URL을 사용하는 이유

서버를 거쳐서 무거운 파일을 업로드하는 경우 자원이 소모되고 비효율적이다.
-> URL을 발급받아 S3에 바로 업로드

사용하기✨

사용자가 로컬 파일을 올리면 presigned URL을 발급받아서 바로 업로드하는 방식으로 코드를 짰다.

const props = {
  beforeUpload: (file: File) => {
    if (file.type !== "video/mp4") {
      message.error("Please upload video(mp4) file");
    } else {
      setUploadFile(file);
    }
    return file.type === "video/mp4" ? false : Upload.LIST_IGNORE;
  },
};

사용자가 mp4 파일을 올리는 경우에만 file 변수에 파일을 저장한다.

그리고 버튼을 클릭하면 업로드 로직 실행!

const { data: { data } } = await client({
  url: "/media/video/presigned-url",
  method: "get",
});

먼저 백엔드에 presigned URL을 요청한다.

const { status, statusText, url } = await fetch(data.videoS3Url, {
  method: "PUT",
  body: file,
});

받아온 data에 있는 presigned URL을 사용해 PUT 방식으로 데이터를 전달하기만 하면❗️

S3로 이동해보면 원하는 파일이 제대로 업로드된 것을 확인할 수 있다.

export const upload = async (file: File | null) => {
  const {
    data: { data },
  } = await client({
    url: "/media/video/presigned-url",
    method: "get",
  });
  const { status, statusText, url } = await fetch(data.videoS3Url, {
    method: "PUT",
    body: file,
  });
  if (status === 200) {
    // 머신러닝 작동 호출
    return { status, url };
  } else {
    return { status, statusText };
  }

Presigned URL을 처음 사용해봐서 약간 겁먹었는데 너무 간단했다.👍