브라우저에서 시작하기

AWS Management Console 로그인하고 https://console.aws.amazon.com/cognito/ 에서 Amazon Cognito 콘솔을 엽니다.

왼쪽 탐색 창에서 자격 증명 풀을 선택합니다.

자격 증명 풀 생성을 선택합니다.

자격 증명 풀 신뢰 구성에서 사용자 인증을 위한 게스트 액세스를 선택합니다.

권한 구성에서 새 IAM 역할 생성을 선택하고 IAM 역할 이름에 이름 (예: get StartedRole) 을 입력합니다.

속성 구성의 ID 풀 이름에 이름 (예: get StartedPool) 을 입력합니다.

검토 및 생성에서 새 자격 증명 풀에 대한 선택 사항을 확인합니다. 편집을 선택하여 마법사로 돌아가서 설정을 변경합니다. 완료하면 자격 증명 풀 생성을 선택합니다.

새로 생성된 Amazon Cognito 자격 증명 풀의 자격 증명 풀 ID 및 리전을 기록해 둡니다. 이러한 값은 4단계: 브라우저 코드 설정에서 IDENTITY_POOL_ID 및 REGION을 바꾸는 데 필요합니다.

https://console.aws.amazon.com/iam/ 에서 IAM 콘솔에 AWS Management Console 로그인하고 엽니다.

왼쪽 탐색 창에서 역할을 선택합니다.

수정하려는 역할의 이름 (예: get StartedRole) 을 선택한 다음 권한 탭을 선택합니다.

권한 추가를 선택한 다음, 정책 연결을 선택합니다.

이 역할에 대한 권한 추가 페이지에서 AmazonS3 ReadOnly Access의 확인란을 찾아 선택합니다.

권한 추가를 선택합니다.

AWS Management Console 로그인하고 https://console.aws.amazon.com/s3/ 에서 Amazon S3 콘솔을 엽니다.

왼쪽 탐색 창에서 버킷을 선택한 다음, 버킷 생성을 선택합니다.

버킷 이름 지정 규칙(예: getstartedbucket)을 준수하는 버킷 이름을 입력하고 버킷 생성을 선택합니다.

생성한 버킷을 선택한 다음, 객체 탭을 선택합니다. 그런 다음, 업로드를 선택합니다.

파일 및 폴더(Files and folders)에서 파일 추가(Add files)를 선택합니다.

업로드할 파일을 선택한 후 열기를 선택합니다. 그런 다음, 업로드를 선택하여 버킷에 객체 업로드 작업을 완료합니다.

다음으로, 버킷의 권한 탭을 선택한 다음, 교차 오리진 리소스 공유(CORS) 섹션에서 편집을 선택합니다. 다음 JSON을 입력합니다.

[
  {
    "AllowedHeaders": [
      "*"
    ],
    "AllowedMethods": [
      "GET"
    ],
    "AllowedOrigins": [
      "*"
    ],
    "ExposeHeaders": []
  }
]

변경 사항 저장를 선택합니다.

Node.js를 설치합니다.

명령줄에서 AWS 코드 예 리포지토리를 복제합니다.

git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git

다음과 같이 애플리케이션 예로 이동합니다.

cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/

다음 명령을 실행하여 필수 패키지를 설치합니다.

npm install

다음으로, 텍스트 편집기에서 src/App.tsx를 열고 다음을 완료합니다.

명령줄에서 다음과 같이 애플리케이션 예로 이동합니다.

cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/

명령줄에서 다음 명령을 실행합니다.

npm run dev

Vite 개발 환경은 다음 메시지와 함께 실행됩니다.

VITE v4.3.9  ready in 280 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

웹 브라우저에서 위에 나와 있는 URL(예: http://localhost:5173)로 이동합니다. 앱 예에서는 Amazon S3 버킷의 객체 파일 이름 목록을 보여줍니다.