AWS S3를 이용한 실시간 이미지 업로드 기능

AWS 란 Amazon Web Service의 약자입니다. Amazon에서 Web Service를 제공하는데 상당히 많은 기능을 지원합니다. 예를들어 쿠팡, 배달의민족, 무신사 등등 많은 회사들이 AWS 를 사용하고 있습니다.
AWS 를 사용하기 전 첫 번째 주의 할 것은 요금 입니다. 하지만 아마존 같은 대기업이 공짜로 자사 서비스를 이용하게 할까요? 신규 회원의 경우 1년간 프리티어 이용이 가능하지만 그 1년의 프리티어 조차 무제한 이용은 불가 합니다. 그 말은 우리가 프로젝트의 많은 부분을 AWS 기능을 이용하게 된다면 프리티어의 기간이 끝난 후 AWS에 의존 할 확률이 높아진다는 것입니다.
우리는 AWS의 많은 기능 중 S3 를 사용할겁니다. AWS S3는 객체 스토리지 서비스 입니다. 스토리지는 뭘까요? 우리는 이전에 데이터베이스에 대해 알아보았습니다.
스토리지는 데이터베이스의 상위 버전입니다. 데이터베이스는 ID name title 등 구조적 반구조적 데이터들이 담겨있는 반면 스토리지는 파일 이미지 동영상 등 다양한 종류의 데이터가 저장될 수 있습니다.

AWS console로 들어가 AllService 부분에서 S3를 클릭해줍니다

그다음 버킷을 만들어줍니다. 버킷은 파일을 저장하는 곳입니다.

이제 사용할 준비가 거의 된 겁니다 권한 탭에서 버킷정책을 수정 해줘야 합니다

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::내 버킷 이름/*"
        }
    ]
}

이런 식으로 수정해주시면 AWS 버킷을 우리가 react에서 접근 할 수 있는 겁니다.
근데 react에서 접근하려면 아이디 비번같은 accessKey가 필요하겠죠.

저기를 누르고 보안자격 증명에서 엑세스 키를 생성해 줍니다. 이 엑세스 키는 어디에도 공개되면 안됩니다(진짜 혼쭐남)

React 로 돌아와서

npm i --save react-s3

import S3FileUpload from 'react-s3
const AWSconfig = {
      bucketName : '버킷 이름 입력',
      dirName : '폴더 이름 입력', / * 선택 사항 * /
      region : 'Enter Your Bucket region',
      accessKeyId : '여기에 accessKeyId 입력',
      secretAccessKey : 'secretAccessKey 입력'
}
S3FileUpload.uploadFile("이미지파일",AWSconfig)

지금까지 우리가 한 작업은 파일이 프론트단에 있었을 때 , 그 파일을 AWS S3로 보내주는 작업 이였습니다. 하지만 우리는 글 쓰는 중 이미지 DragDrop을 해서 실시간 이미지를 보여주는 작업을 하려 합니다.
1. CodeEditor.js 수정
CodeMirror 안에 있는 drop 기능을 이용합니다. 자세한건 codemirror 홈페이지에서 확인 할 수 있습니다.

codeMirror.on('drop',function(data,e) {
            var file;
            var files;
            
            files = e.dataTransfer.files;
            if (files.length > 0) {
               
                e.preventDefault();
                e.stopPropagation();
                file = files[0];
                //aws S3 로 이미지 전송
                S3FileUpload.uploadFile(file,AWSconfig)
                .then((data)=> {
                    console.log(data.location)
                    codeMirror.setValue(state.body+"\n"+
                    "![]("
                    +data.location+
                    ")")
                
                  
                })
                return false;
            }
          
        })

그리고 이 부분이

  codeMirror.setValue(state.body+"\n"+
                    "![]("
                    +data.location+
                    ")")

마크다운에서 이미지를 보여지는 법 중 하나 입니다. "Img" 태그를 써도 됩니다.

결과화면

[Issue] AWS 에서 보낸 위험 메세지

위 예시처럼 accesskey와 secretAccessKey를 넣고 git에 올려버리면 , AWS가 key가 남용되었다고 판단해 계정을 잠가버린다.
실제로 EC2를 이용해 배포를 하려할 때 계정이 차단되었다는 이벤트로 몇일동안 애먹었습니다.
프로젝트 구성도는 프런트와 백엔드는 AWS EB를 이용해 배포 하려 했고
MySQL 은 AWS RDS
이미지 업로드는 AWS S3를 이용하려 했으나
계정이 잠겼기에 AWS EB는 당분간 사용할 수 없게 되었다.
AWS 는 모르고 막 쓰면 안될 것 같습니다..