이미지 호스팅, aws-amplify 활용하여 react-native에서 Amazon S3로 이미지 전송

이미지 호스팅

스마트폰에서 사진 찍은 것을 스팀잇에 업데이트 하고자 했다.

스팀잇 자체에다가는 못올리고, 자체 이미지 호스팅을 해야하는 것 같다.

검색해보니 Amazon S3로 이미지 호스팅 만드는게 싸면서 효율적일 것 같다.

이 글에서는 Amazon S3로 이미지 호스팅 셋팅과 Client에서 s3에 접근하는 방법에 대해 소개한다.

  1. Amazon S3 셋팅 (http://nobrok.com/getting-started-with-aws-s3-and-react-native/)
  2. Client에서 Amazon S3 저장소에 접근하기

Amazon S3 셋팅

http://nobrok.com/getting-started-with-aws-s3-and-react-native에서 유튜브를 보고 세팅을 했다.

이 방법은 메뉴얼로 하는 거고, CLI를 활용하면 자동으로도 생성해준다.

지역 중에 서울은 CLI에서 지원하지 않아서 메뉴얼로 설정하게됐다.

 

중요한 것은 접근 권한 설정, 지역 설정, identityPoolId 설정이다.

설정을 하고 이미지가 접근이 안돼, 이 블로그 (https://blurblah.net/1082)에서 설명한대로 policy를 정의해서 넣어줬다.


클라이언트 셋팅

나는 react-native app에서 사진을 찍고, 찍은 사진을 Amazon S3에 올리고자 했다.

두가지 방법이 있는데

첫번째는 aws-amplify를 사용하는 것,

두번째는 react-native-aws3를 사용하는 것이다.

결론적으로는 첫번째를 선택하게 됐다. 두번째 방법으로 하다가 access_key가 틀려서 그런지 저장이 안됐다.


aws-amplify에는 여러 가지 기능들이 있는데 그 중에 나는 storage 기능만 사용했다.

auth기능은 로그인, notification은 푸쉬알림으로 봤는데, 기회가 되면 사용해보고 싶다.

아래 글들을 따라 적용을 해봤다.

https://aws-amplify.github.io/docs/

https://aws-amplify.github.io/docs/js/tutorials/building-react-native-apps/

https://aws-amplify.github.io/docs/js/storage

여기서 주의해야 했던건 configure에 identigyPoolId, region, bucket 등을 잘 입력해야한다.

사진 전송을 위해서는 이미지 uri를 blob으로 변경해야했다.


 

참고

http://nobrok.com/getting-started-with-aws-s3-and-react-native/ – aws-s3 셋팅

http://nobrok.com/tag/aws-s3/

https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html – 셋팅 완료 후, 웹페이지에서 저장하기

http://wildpup.cafe24.com/archives/929

https://github.com/benjreinhart/react-native-aws3

https://blog.psangwoo.com/coding/2018/04/03/img_s3_hosting.html

https://aws.amazon.com/ko/getting-started/projects/host-static-website/

http://interconnection.tistory.com/51

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다