사진 AWS S3 업로드 기능 구현하기

목적

일나쓰 101 프로젝트의 '새로운 수업 만들기' 페이지 구현 중, 프로필 사진을 업로드하는 기능을 만들어야 했다. 검색해보니 Form-data 형식으로 백엔드 쪽에 전송해주면 된다고 했지만, 프론트엔드에서 파일을 업로드시 자동으로 AWS S3 bucket에 업로드되고, 백엔드에는 url(string) 형식으로 전송해주는 것이 더 효율적일 것 같아서 구현해보기로 했다.

 

AWS 에서 새로운 bucket 생성 및 세팅

아래와 같은 순서로 작업을 진행하였다.

참고 : lovit.github.io/analytics/2019/01/25/aws_s3_release_files/

AWS S3 에 데이터셋 공유하기 (Bucket 만들고 파일 업로드 하기)

AWS 에서 S3 bucket 생성

S3는 아마존 웹서비스에서 제공하는 스토리지 서비스이다. AWS 콘솔에서 S3를 선택한 후 'Create Bucket'을 클릭하여 새로운 버킷 저장소를 생성한다.

 

접근 권한 설정

• 버킷 저장소의 'permission'을 클릭하여 접근 권한을 설정해 주어야 한다. (외부에서 해당 스토리지에 접근할 수 있게 하기 위함)
• 'Block all public access' (기본 설정) 를 체크 해제한다.
• Bucket policy를 생성한다. (bucket policy generator 를 사용한다)
• CORS setting을 추가한다. (아래)

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

 

 

코드

  // 아마존 s3 설정
  const config = {
    bucketName: ",
    region: "ap-northeast-2",
    accessKeyId: ,
    secretAccessKey: ,
  };

  // 프로필 업로드 함수
  const [profile, setProfile] = useState("");
  const handleProfile = (e) => {
    const file = e.target.files[0];
    S3FileUpload.uploadFile(file, config)
      .then((data) => {
        setProfile(data.location);
      })
      .catch((err) => {
        alert("이미지 업로드에 실패하였습니다.");
      });
  };

config 변수에 aws S3 버킷 정보를 추가한다. (하지만 프론트엔드 코드에 key와 Id를 넣는 것은 보안적으로 위험하여, 다른 방법을 찾아볼 예정이다.

 

S3FileUpload 패키지 라이브러리를 통해서 선택된 파일을 업로드 해준 후, 해당 사진의 url을 프로필 사진 state에 넣어주면 된다.