[AWS] AWS S3버킷에 이미지 저장하기

그동안은 Cloudinary를 사용하여 이미지를 업로드 했지만,

오늘은 S3버킷을 사용해 이미지를 업로드하는 방법을 배웠다.

import "./App.css";
import AWS from "aws-sdk";
import { useRef, useState } from "react";

function App() {
  const [imageFile, setImageFile] = useState(null);
  const inputRef = useRef(null);

  const FormImageFile = ({ uploadToS3 }) => {
    const onUpload = (e) => {
      const file = e.target.files[0];
      setImageFile(file);
      // 파일 선택 후 S3에 업로드
      uploadToS3(file);
    };

    return (
      <input
        hidden
        accept="image/*"
        multiple
        type="file"
        ref={inputRef}
        onChange={onUpload}
      />
    );
  };

  const BtnUpload = () => {
    const uploadS3 = (file) => {
      const REGION = process.env.REACT_APP_REGION;
      const ACESS_KEY_ID = process.env.REACT_APP_ACCESS_KEY_ID;
      const SECRET_ACESS_KEY_ID = process.env.REACT_APP_SECRET_ACCESS_KEY_ID;

      AWS.config.update({
        region: REGION,
        accessKeyId: ACESS_KEY_ID,
        secretAccessKey: SECRET_ACESS_KEY_ID,
      });

      const upload = new AWS.S3.ManagedUpload({
        params: {
          ACL: "public-read",
          Bucket: "mys3image",
          Key: `upload/${file.name}`,
          Body: file,
        },
      });

      upload
        .promise()
        .then((response) => {
          console.log("업로드 완료!", response);
        })
        .catch((error) => {
          console.error("업로드 실패:", error);
        });
    };

    return (
      <>
        <FormImageFile uploadToS3={uploadS3} />
        <button
          type="button"
          onClick={() => {
            inputRef.current.click();
          }}
        >
          업로드!
        </button>
      </>
    );
  };

  return (
    <div>
      <BtnUpload />
    </div>
  );
}

export default App;

해당 코드는 업로드! 버튼을 누르면 파일을 선택할 수 있는 Finder가 팝업되고, 이미지를 선택했을 때 아마존 S3버킷에 파일이 업로드되는 코드이다.

맨 처음 코드를 실행했을 때 CORS정책에 대한 내용을 설정해주지 않아 CORS오류가 발생했었다.

S3의 CORS정책은 S3 버킷 > 권한 > CORS(Cross-origin 리소스 공유) 에서 설정할 수 있다.

CORS정책에서 편집을 누른 뒤 json으로 작성된 CORS 구성을 입력해주면 해결할 수 있다.

CORS정책을 설정해줬지만, 여전히 CORS오류가 나는것을 확인할 수 있었다.

위의 콘솔 오류를 확인해보니 이미지 업로드는 PUT메서드를 사용해서 요청을 보내고 있는데,

정책의 "AllowedMethods"부분에선 "PUT"메서드가 허용되어있지 않기 때문이었다.

PUT매서드까지 추가해주니 사진이 정상적으로 업로드 되는 것을 확인할 수 있었다.