RN에서 s3에 이미지 올리는 방법(serverless 활용)

잊어버리기 전에.
RN에서 S3에 이미지 업데이트하는 방법.

1. S3열고, bucket 만들기
2. Cognito 만들기 => medium.com 블로그 참고
3. serverless 임을 잊지 말고 백엔드를 파는 삽질 하지 말 것.
4. 프론트에만 집중하면 되는데, 일단 인증하는 코드를 삽입해야 함.(프런트에서 upload 기능이 들어가는 파일에 삽입함)

AWS.config.update({
    region: 'ap-northeast-2', // 리전이 서울이면 이거랑 같게
    credentials: new AWS.CognitoIdentityCredentials({
         IdentityPoolId: 'medium.com블로그 참고',
    })
});

var s3 = new AWS.S3({
    apiVersion: '2006-03-01',
});

class 함수 밖에 넣음.

5. upload 기능 삽입

const response1 = await fetch(this.state.photo) //this.state.photo 에는 사진의 uri가 들어가면 됨. 
const blob = await response1.blob()
var params = {Bucket: '버켓이름', Key: `'${사진이름}'.jpeg`, Body: blob, ACL: 'public-read'}
s3.upload(params, function(err, data) {
    if (err) {
        return alert('There was an error uploading your photo: ', err.message);
    }
    alert('Successfully uploaded photo.');
});

꼭 참고할 자료:
블로그: https://medium.com/…/브라우저에서-바로-aws-s3에-파일-업로드하기-637dde104bcc
아마존 독스 : https://docs.aws.amazon.com/…/d…/s3-example-photo-album.html

s3.upload 등 기능 관련 : https://docs.aws.amazon.com/AWSJavaScript…/latest/…/S3.html…

----------------------------------------------------

여기까지 읽은 사람들을 위해 더 쉬운 방법.

aws-amplify 의 storage 사용하기 => 업데이트 하고 받고 둘 다 쉬움

위에서 4번 부분을 

import Amplify, { Auth, Storage } from 'aws-amplify';

Amplify.configure({
    Auth: {
        identityPoolId: '아이덴티티 풀 ㅇㅏ이디', //REQUIRED - Amazon Cognito Identity Pool ID
        region: 'ap-northeast-2', // REQUIRED - Amazon Cognito Region
    },

   Storage: {
       AWSS3: {
           bucket: '버켓이름', //REQUIRED - Amazon S3 bucket
           region: 'ap-northeast-2', //OPTIONAL - Amazon service region
       }
   }
});

로 대체 

아래 5번 부분을 

try {
    const response = await fetch(this.state.photo)
    const blob = await response.blob()
    Storage.put(`'${this.state.goodsName}'.jpeg`, blob, {
         contentType: 'image/jpeg',
    })
} catch (err) {
    console.log(err)
}

로 대체 끝.

추가 자료:

환경 설정을 위한 RN 독스: https://facebook.github.io/react-native/…/03/05/AWS-app-sync

put, get 등 쓰는 방법을 담은 aws amplify 독스: https://aws-amplify.github.io/docs/js/storage