[2024년 버전]React AWS S3로 파일 업로드하는 창 만들기

AWS S3 으로 파일을 업로드 하는 페이지 제작

AWS S3으로 파일을 업로드 하는 페이지를 만드려고 합니다.

바로 시작하겠습니다.

설계 및 작동

위와 같이 저는 버킷 내부에 “test” 라는 폴더를 만들었습니다.

이 폴더 내부에 “animal” 이라는 폴더를 한 번 더 만들고, 그 하위에는 “cat” 과 “dog” 라는 2개의 폴더가 있습니다.

목적은 cat 폴더에 고양이 사진을, dog 폴더에 개 사진을 넣는 것입니다.

이를 위해서 백엔드 설계는 다음과 같이 했습니다.

				
					// 파일 업로드를 위한 Signed URL 제공 라우터
app.post("/api/s3-upload", (req, res) => {
  const {  folderName, fileName, targetFolder, fileType } = req.body;

  const params = {
    Bucket: process.env.S3_BUCKET_NAME,
    Key: `/${folderName}/${targetFolder}/${fileName}`, // S3에 저장될 경로
    Expires: 60 * 5, // 5분간 유효한 URL
    ContentType: fileType, // 파일 타입 설정
  };

  // S3에서 Signed URL 생성
  s3.getSignedUrl("putObject", params, (err, url) => {
    if (err) {
      console.error("S3 서명 URL 생성 중 오류 발생:", err);
      return res.status(500).json({ error: "S3 서명 URL 생성 중 오류 발생" });
    }

    res.json({ url }); // 서명된 URL을 프론트엔드에 전달
  });
});

여기서는 특정한 경로의 이름과 업로드 하는 파일명을 통해서 특정 S3 경로 내부로 파일을 업로드 합니다.

이때 사용하는 것이 바로 getSignedurl 함수입니다.

해당 함수에 “putObject” 를 통해서 파일을 넣을 것이며, 위와 같은 형식의 params 내부에서 key 쪽에 경로를 넣어줍니다.

이를 사용하는 프론트 엔드 함수는 다음과 같이 작성했습니다.

				
					import React, { useState } from "react";

const TestSetUpload = () => {
  const [files, setFiles] = useState([]);

  // 파일 선택 시 파일 상태에 저장
  const handleFileChange = (event) => {
    setFiles(event.target.files);
  };

  const [targetFolder, setTargetFolder] = useState("");

  const onTargaetFolder = (e) => {
    setTargetFolder(e.target.value);
  };

  // 파일 업로드 핸들러
  const handleUpload = async () => {
    const adminCode = "test";
    const folderName = "animal";

    // 모든 파일을 순회하며 업로드
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const fileName = file.name;
      const fileType = file.type;

      // 백엔드로 S3 Signed URL 요청
      const response = await fetch("/api/s3-upload", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          adminCode,
          folderName,
          fileName,
          targetFolder,
          fileType,
        }),
      });

      const { url } = await response.json();

      // S3로 파일 업로드
      await fetch(url, {
        method: "PUT",
        headers: {
          "Content-Type": fileType,
        },
        body: file,
      });

      console.log(`${fileName} 업로드 완료!`);
    }
  };

  return (
    <div>
      <h2>S3 파일 업로드</h2>

      <input type="text" value={targetFolder} onChange={onTargaetFolder} />
      <input type="file" multiple onChange={handleFileChange} />
      <button onClick={handleUpload}>파일 업로드</button>
    </div>
  );
};

export default TestSetUpload;

test 라는 폴더 내부에 있는 animal 폴더 내부에 있는 어떤 하위 폴더 안으로 파일들을 넣을 것인지 직접 입력이 가능한 방식입니다.

이 방식을 이용하여 내가 원하는 특정한 하위 폴더 안으로 파일들을 업로드 가능토록 하였습니다.

이런 느낌이죠.

조잡하긴 하지만 잘 작동하나 한 번 볼까요?

파일 12개를 선택하고, 파일 업로드 버튼을 눌렀습니다.

계획대로라면 “cat” 이라는 폴더 내부에 내가 올린 12장의 파일들이 존재하면 됩니다.

업로드 버튼을 누르고 콘솔창을 보면 이렇게 업로드가 이뤄지는 과정을 볼 수 있습니다.

잘 되는 것 같네요.

결과 확인

실제로 cat 이라는 폴더 내부로 제가 올린 12개의 파일이 존재하는 것을 확인 가능합니다.

마치며...

오늘은 어떻게 S3 특정 디렉토리 내부로 파일을 업로드 할 수 있는지 알아보았습니다.

해당 방법을 응용하여, S3를 파일 저장소로 적극 활용해보세요.