S3 file upload

youngw77 2023. 3. 15. 15:01

2023. 3. 15. 15:01

aws에 올라온 예제 코드를 이용해 S3에 file이 업로드 되는지 확인해보겠다.

Amazon S3에 사진 업로드: 전체 코드 - AWS SDK for JavaScript

이 페이지에 작업이 필요하다는 점을 알려 주셔서 감사합니다. 실망시켜 드려 죄송합니다. 잠깐 시간을 내어 설명서를 향상시킬 수 있는 방법에 대해 말씀해 주십시오.

docs.aws.amazon.com

위 사이트에 들어가 HTML 예제 -> index.html, 브라우저 스크립트 코드 예제 -> app.js 로 VSCode 빈폴더에 만들어 준다.

2. terminal을 열어 npm install aws-sdk 명령어를 쓰면 package-lock.json, package.jon으로 aws-sdk와 관련된 파일이 생긴다.

pakgae-lock.json 파일을 오픈해보면 packages에 aws-sdk: 2.1335.0 이 나와있는 모습을 볼 수 있다.

3.위에서 확인한 sdk 버전을 SDK_VERSION_NUMBER 대신 넣어주고 src="./app.js"로 변경해준다.

AWS S3 버킷 생성 및 설정

1.aws에 들어와 제품 -> 주요서비스 -> Amazon Simple Storage Service(S3)에 접속한다 2.버킷 만들기 클릭 한다. 3.버킷 이름 정하기 소문자와 - 이용 ex)abc-def 4.외부에서 자격을 부여한 사람은 접속이 가능하

les-fourmis.tistory.com

aws cognito에서 만들 풀에 들어가 자격 증명 풀 -> 샘플 코드를 선택해 준다.

AWS 자격 증명 얻기의 region 값과 IdentityPoolId 값을 app.js에

albumBucketName -> 기존 S3에서 만들 bucket 이름

bucketRegion -> region 값 'ap-northeast-2'

IdentityPoolId -> IdentityPoolId 값 '모자이크 값' 을 넣어주면 된다.

5.이후 VSCode 확장 프로그램 Live Server을 이용하여 index.html 파일을 웹으로 열게 되면

위와 같이 기존 S3에 test 폴더를 만든 값을 가지고 오는 모습을 볼 수 있다.

만약 값을 가지고 오지 못했으면 Albums 및에 데이터를 받아오지 못한다.

값을 가지고 오지 못하면 풀 생성을 다시해보기, app.js의 bucket name, region, identity 다시 확인 하고 저장을 하면

정상적으로 돌아가는 모습을 확인 할 수 있을 것이다.

상상력 코딩