S3 사전조사

• 스토리지가 필요한 페이지
• LMS
• 섹션 등록(이미지)
• 모듈 등록(이미지), 모듈 (강의/실습)자료 등록(파일, editor.js 사용 안함)
• 코스 등록(이미지)
• 아카데미 등록(이미지)
• 과제 등록(이미지 + 파일)
• 서비스
• 과제 제출(이미지 + 파일)
• 포럼 글 등록(이미지)
• 포럼 답변 등록(이미지)

0. AWS S3란?

• S3는 Simple Storage Service의 줄임말로서 HDD나 SSD와 같은 저장소를 클라우드로 제공해주는 서비스.

• 확장성, 데이터 가용성 및 보안과 성능을 제공하는 객체 스토리지 서비스.

1. AWS S3 스토리지 클래스

a) S3 Standard

• 모든 데이터 유형에 적합한 범용 스토리지로, 대개 자주 액세스하는 데이터에 사용됨.

b) S3 Intelligent-Tiering

• 액세스 패턴을 알 수 없거나 액세스 패턴이 변경되는 데이터에 대해 자동 비용 절감 효과 제공.

c) S3 Standard - IA(Infrequent Access)

• 라이브 상태가 된 지 오래되었지만 ms 단위 액세스 성능이 요구되면서 자주 액세스하지 않는 데이터용.

d) S3 One Zone - IA

• ms 단위 액세스 성능이 요구되고 다시 생성 가능하면서 자주 액세스 하지 않는 데이터용.

e) S3 Glacier

• 검색 옵션이 1분부터 12시간까지인 장기적인 백업 및 아카이브용.

f) S3 Glacier Deep Archive

• 일년에 한 두번 액세스하고 12시간 이내에 복원할 수 있는 장기적인 데이터 아카이빙용.

g) S3 Outposts

• S3 API와 현재 AWS에서 사용하는 기능을 통해 온프레미스 환경에 객체 스토리지를 제공.

• AWS 인프라, AWS 서비스, API 및 도구를 사실상 모든 데이터 센터, 코로케이션 공간, 온프레미스 시설로 확장하는 완전관리형 서비스.

h) 성능 차트

2. ASW S3 요금

Amazon S3 Simple Storage Service 요금 - Amazon Web Services

사용한 만큼만 비용을 지불합니다. 최소 요금이 없습니다. 데이터 프로필에 가장 적합한 S3 스토리지 클래스를 결정할 때는 스토리지 요금, 요청 및 데이터 검색 요금, 데이터 전송 및 전송 가속화 요금 그리고 데이터 관리 기능 요금이라는 네 가지 비용 요소를 고려해야 합니다. S3 버킷에 객체를 저장하는 비용을 지불합니다.

https://aws.amazon.com/ko/s3/pricing/

a) 네 가지 비용 요소

• 스토리지 요금

• 요청 및 데이터 검색 요금

• 데이터 전송 및 전송 가속화 요금

• 데이터 관리 기능 요금

b) S3 Standard 클래스 사용 예시

• 리전, 아시아 태평양(서울) 기준

• S3 버킷에 객체를 저장하는 비용 (객체의 크기, 해당 월에 객체를 저장한 기간에 따라 차등)
스토리지 요금
기준
요금
처음 50TB/월
$0.025/GB
다음 450TB/월
$0.024/GB
500TB 초과/월
$0.023/GB

• AWS S3의 모든 송수신 대역폭에 대한 비용
데이터 전송
경우
요금
S3로 업로드
비용 없음
S3에서 다운로드
최대 1GB/월 까지는 비용 없음
다음 9.999TB/월, $0.123/GB

• S3 버킷 및 객체를 대상으로 수행된 요청에 대한 비용
요청 및 데이터 검색
요청
비용
GET, SELECT
요청 1,000개당 $0.00034
PUT, COPY, POST, LIST
요청 1,000개당 $0.0045

3. 파일 업로드 구현 (Javascript)

a) react-aws-s3 모듈 (React에서 활용, 브라우저에서 직접 업로드)

React.js 후크 및 react-aws-s3를 사용하여 S3에 파일 업로드

React, React Hooks 및 Modern React Soluitons를 사용하여 AWS S3에 파일을 업로드하는 방법 알아보기 Unsplash에 Piotr Cichosz의 사진 이 기사에서는 다음을 수행합니다. 1. 반응을 사용하여 입력으로 파일을 가져 오는 방법을 이해합니다. 2. npm 패키지 react-aws-s3를 사용하여 해당 파일을 Amazon S3 버킷에 업로드 인덱스: Unsplash에 Piotr Cichosz의 사진 리 액트 앱을 만들어야합니다.

https://ichi.pro/ko/react-js-hukeu-mich-react-aws-s3leul-sayonghayeo-s3e-pail-eoblodeu-216330662787251

Developer-Amit/react-aws-s3

Open Source Module to Upload your Media and files into AWS S3 Bucket directly from Front-end React.

https://github.com/Developer-Amit/react-aws-s3#readme

b) react-s3-uploader 사용 (React에서 활용, 브라우저에서 직접 업로드)

odysseyscience/react-s3-uploader

Provides a React component that automatically uploads to an S3 Bucket. $ npm install --save react-s3-uploader The above example shows all supported props. This expects a request to /s3/sign to return JSON with a signedUrl property that can be used to PUT the file in S3.

https://github.com/odysseyscience/react-s3-uploader

c) JavaScript용 SDK (웹 브라우저, node.js)

브라우저에서 바로 AWS S3에 파일 업로드하기

AWS는 우리가 서버를 고려하지 않고 애플리케이션을 구축하고 실행할 수 있게 해주는(서버리스) 여러가지 서비스를 제공하고 있습니다. 그 중에 S3(Amazon Simple Storage Service)는 안정성과 확장성이 뛰어난 객체 스토리지를 제공하여 웹 어디서나 원하는 양의 데이터를 저장하고 검색할 수 있는 서비스입니다. 즉, 사용한 만큼 돈을 내는...

https://medium.com/@hozacho/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-%EB%B0%94%EB%A1%9C-aws-s3%EC%97%90-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-637dde104bcc

브라우저에서 바로 AWS S3에 파일 업로드하기

AWS는 우리가 서버를 고려하지 않고 애플리케이션을 구축하고 실행할 수 있게 해주는(서버리스) 여러가지 서비스를 제공하고 있습니다. 그 중에 S3(Amazon Simple Storage Service)는 안정성과 확장성이 뛰어난 객체 스토리지를 제공하여 웹 어디서나 원하는 양의 데이터를 저장하고 검색할 수 있는 서비스입니다. 즉, 사용한 만큼 돈을 내는...

https://medium.com/@hozacho/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-%EB%B0%94%EB%A1%9C-aws-s3%EC%97%90-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-637dde104bcc

NODEJS] AWS의 S3에 파일 업로드 다운로드

따라해보면 쉽습니다. | AWS EC2 서버에서 공지사항에 들어가는 첨부 파일을 업로드 하고 다운로드 하는 기능이 필요 했다. 다음의 순서로 처리하면 쉽게 된다. 1. 사용자 생성 하기 1. AWS IAM에서 사용자를 생성 하고, 애세스 유형을 프로그램 방식으로 선택 이후 결과로 Access key ID, Secret access key를 알고 있어야 한다. 2.

https://brunch.co.kr/@daniellim/43

d) multer-s3 모듈 사용(node.js에서 활용, 서버에서 별도의 파일업로드용 API 만들기)

React 이미지 파일 업로드 하기

React로 파일을 업로드 방법을 정리하려고합니다. 간단한 방법은 아래와 같습니다. 클라이언트 앱(react) view 페이지에서 input[type=file] 요소를 적절한 위치에 추가. state 추가( state를 이용해서 파일을 업로드하려고합니다.) input[type=file] 이벤트 처리 추가 전송 버튼 클릭 시 axios 호출 코드 추가 서버 앱(express) multer 설치(aws s3에 업로드하려면 multer-s3 설치) fileupload 모듈 작성 route에서 upload 코드 추가 먼저 클라이언트앱을 작성해봅시다.

https://basketdeveloper.tistory.com/55