Bearcam Companion: 스토리지 증폭

제가 개발 중인 Bearcam Companion 애플리케이션에서 이미지를 Explore.org Snapshots에 직접 연결해왔습니다. 이제 이미지를 S3에 저장하고 싶습니다. 이렇게 하면 Rekognition으로 작업하기가 더 쉬워지고 궁극적으로 기계 학습 모델 개발을 위한 훈련 세트를 만들 수 있게 될 것입니다. 이 게시물은 Amplify Storage 작업 경험을 설명합니다.

S3 리소스 추가

Amplify CLI에서 S3 버킷을 추가하는 것은 다음과 같이 간단합니다.

amplify add storage

이 명령은 저장소 유형 및 액세스 권한과 같은 몇 가지 옵션을 안내합니다(자세한 내용은 documentation 참조). S3 Lambda 트리거를 설정할 수도 있지만 다른 방식으로 Lambda를 트리거할 계획입니다(다음 게시물에서 자세히 설명).

설정이 완료되면 amplify push 클라우드 리소스를 업데이트했습니다. 이제 Amplify Studio Storage에서 스토리지를 볼 수 있습니다.

이미지에 S3 파일 객체 추가

이전의 이미지 데이터 모델이 이미 있습니다. 현재 모델에는 URL, 날짜 및 개체와 일대다 관계가 있습니다. 이제 새 S3 버킷의 객체를 참조하려고 합니다. 이미지에 S3 파일 객체를 추가했습니다. 나중에 참조할 수 있도록 URL을 유지하기로 결정했습니다.

Amplify Studio Data 모델링에서 S3Object라는 새 모델을 추가했습니다. 이 모델에는 버킷, 리전 및 키가 포함되어 있습니다.



그런 다음 이미지 데이터 모델에 S3Object 유형의 파일을 추가했습니다.

이미지 업로드 UI

다음으로 지난번에 만들었던 이미지 추가 인터페이스를 수정했습니다. 이미지 모델에 관련 정보를 저장하는 것 외에도 S3에 이미지를 업로드해야 합니다. 이미지 추가에는 URL과 날짜를 입력한 다음 데이터를 이미지에 저장하는 양식이 이미 있습니다. 내 클라이언트 코드에 파일 선택기와 이미지 미리보기를 추가했습니다.

<input type="file" align="center" onChange={uploadFromFile}></input>
<img src={uploadImage} width={200} alt="Selected file" />

함수uploadFromFile는 위의 uploadFile에 표시할 파일uploadImage에 대한 URL과 <img>에 대한 두 가지 상태 변수를 설정합니다.

  async function uploadFromFile(e) {
    const file = e.target.files[0];
    setUploadFile(file);
    setUploadImage(URL.createObjectURL(file));
  }

이미지를 선택하고 URL과 날짜를 입력한 후 저장 버튼을 클릭하면 실행됩니다buttonOnClick(). 이 함수는 이미지를 S3 버킷에 업로드한 다음 이미지 데이터 모델에 항목을 생성합니다. Storage.put()에서 aws-amplify를 사용하여 S3에 쓰는 것은 매우 쉽습니다.

  async function buttonOnClick () {
    try { // Upload Image to S3
      const result = await Storage.put(uploadFile.name, uploadFile);
      console.log("Stored", uploadFile.name, "to", result);
    } catch (error) {
      console.log("Error uploading file: ", error);
    }

    try { // Create new entry in Images
      saveImage (textURLValue, textDateValue, uploadFile.name);
    } catch (error) {
      console.log("Error uploading file: ", error);
    }
  }

위의 코드에서 이미지 레코드 생성은 saveImage() 에 의해 처리됩니다. 이 함수는 DataStore.save()에서 aws-amplify를 사용합니다.

  async function saveImage (url, date, key) {
    await DataStore.save(
      new Images({
        url: url,
        date: date,
        file: {
          bucket: awsExports.aws_user_files_s3_bucket,
          region: awsExports.aws_user_files_s3_bucket_region,
          key: key
        }
      })
    );
  }

bucket 및 region 정보는 이전에 amplify add storage 명령에 의해 awsExports에 추가된 상수에서 가져옵니다.

이미지 추가 및 보기

위의 모든 것을 구현한 후 Bearcam Companion 앱을 통해 이미지를 추가할 수 있습니다.



Amplify Studio의 콘텐츠 섹션에서 이미지 데이터를 볼 수 있습니다.



항목의 상세 보기에는 파일 아래에 새 S3Object 정보가 표시됩니다.

결론

Amplify를 사용하면 웹 애플리케이션에 스토리지를 매우 쉽게 추가할 수 있습니다. CLI를 사용하여 S3 버킷을 추가하고 Amplify Studio를 사용하여 데이터 모델을 업데이트했습니다. S3에 파일을 업로드하고 Storage에서 DataStore 및 aws-amplify를 사용하여 DynamoDB의 테이블에 메타데이터를 저장하도록 Bearcam Companion React 애플리케이션을 수정했습니다.

다음 번에는 DynamoDB의 이미지 테이블에 새 이미지가 추가될 때마다 Rekognition 객체 감지기를 실행하는 Lambda 함수 트리거에 대해 작성하겠습니다. 여기와 Twitter( )를 팔로우하세요.