Amazon S3 Storage Browser를 통한 데이터 브라우징 기능 출시

오늘은 Storage Browser for Amazon S3를 소개합니다. 이 기능은 최종 사용자가 Amazon Simple Storage Service(Amazon S3)에 저장된 데이터와 상호 작용할 수 있도록 웹 애플리케이션에 추가할 수 있는 오픈 소스 UI 구성 요소입니다. 이 프론트엔드 구성 요소를 통해 인증된 최종 사용자는 AWS ID 및 보안 서비스 또는 사용자 지정 관리형 솔루션을 사용하여 제어하는 특정 권한에 따라 Amazon S3에서 데이터를 탐색, 업로드, 다운로드, 복사 및 삭제할 수 있습니다.

Storage Browser for S3는 최종 사용자에게 S3의 데이터에 대한 액세스를 제공하려는 개발자의 부담을 덜어주며, 고객, 파트너 및 직원 같은 최종 사용자가 Amazon S3 또는 Amazon Web Services에 익숙하지 않아도 효율적으로 데이터를 사용할 수 있도록 설계되었습니다. 또한 개발자는 애플리케이션 디자인에 맞게 Storage Browser 인터페이스의 모양과 느낌을 사용자 지정할 수 있습니다.

간단한 데모를 통해 시작하는 방법을 보여 드리겠습니다.

설치
Storage Browser for S3는 AWS Amplify UI React 구성 요소이므로 React로 빌드된 웹 애플리케이션 또는 Next.Js, Gatsby, Remix 등과 같은 React 기반 프레임워크에서 사용해야 합니다. 또한 AWS Amplify와 AWS Amplify UI React 패키지를 모두 설치해야 합니다.

이 데모에서는 Next.js를 사용합니다. 앱을 처음부터 설정하는 방법을 알아보려면 AWS Amplify를 구성하고 새 Next.js 애플리케이션에서 Amplify React UI 구성 요소를 사용하는 방법에 대한 단계별 가이드를 참조하세요.

Storage Browser for S3를 사용하기 위해 전체 @aws -amplify/ui-react 라이브러리를 설치할 필요는 없습니다. 사용하려는 경우 다음 명령을 사용하여 스토리지별 패키지만 설치할 수 있습니다.

npm i @aws-amplify/ui-react-storage aws-amplify

Amplify UI React 패키지가 이미 설치된 기존 애플리케이션이 있는 경우 종속성을 업데이트하여 최신 버전을 가져오고 npm install을 실행하여 기존 설치를 업데이트해야 합니다.

마지막으로 애플리케이션을 처음부터 새로 빌드하는 경우 애플리케이션 디렉터리에서 npm create amplify@latest를 실행해야 합니다. 그러면 인증, 스토리지 등 Amplify에서 제공하는 다양한 카테고리를 사용할 수 있습니다.

권한 부여 모드 선택
Storage Browser for S3는 최종 사용자가 액세스할 수 있는 S3 버킷 또는 접두사 뿐만 아니라 수행할 수 있는 작업을 렌더링할 수 있도록 인증 및 권한 부여를 구성해야 합니다.

권한 설정에는 세 가지 옵션이 있으며, 각 옵션은 다양한 사용 사례에 적합합니다.

AWS Amplify Auth 사용 – 이 옵션은 고객 및 서드 파티 파트너에게 Amazon S3의 데이터에 대한 액세스 권한을 제공하려는 경우에 적합합니다. 기본적으로 AWS Amplify Auth를 사용하여 파일에 대한 액세스 제어 및 보안을 관리하는 Amplify Storage를 설정할 수 있습니다. 이 기능은 Amazon Cognito에서 제공되며 사용자 등록, 로그인 및 로그아웃 흐름을 구현하기 위해 사전 구축된 UI 구성 요소와 함께 제공됩니다.

AWS IAM Identity Center 사용 – 이 옵션은 전체 직원이 Storage Browser for S3를 통해 S3의 데이터에 액세스할 수 있도록 하는 확장 가능한 솔루션에 적합합니다. S3 Access Grants 인스턴스를 AWS Identity and Access Management (IAM) Identity Center와 연결합니다. 그러면 Microsoft Entra ID, Okta 등과 같은 외부 ID 제공업체에 호스팅된 사용자 및 그룹을 비롯한 사용자 및 그룹에 대한 S3 Access Grants 권한을 중앙에서 관리합니다. 또한 S3용 각 AWS CloudTrail 데이터 이벤트는 데이터에 액세스한 최종 사용자 ID를 참조하므로 데이터 액세스에 대한 관찰성을 개선하는 데 도움이 됩니다.

Amazon S3 Access Grants와 함께 IAM 역할 사용 – 이 옵션은 Storage Browser for S3를 통해 IAM 위탁자에게 데이터에 대한 액세스 권한을 제공하려는 경우에 적합합니다. 이 기능을 설정하려면 먼저 S3 버킷 및 접두사에 대한 권한을 원하는 IAM ID에 매핑하는 데 사용할 수 있는 S3 Access Grants 인스턴스를 생성해야 합니다. 그런 다음 s3:GetDataAccess를 간접적으로 호출하여 S3 버킷 또는 접두사에 대한 임시 최소 권한 액세스를 얻을 수 있는 권한이 있는 IAM 역할을 생성합니다.

이 데모에서는 최종 사용자가 우리 조직의 일원이 아니라고 가정하므로 Amplify Auth가 이 경우에 매우 적합합니다.

권한 설정
먼저 이 가이드에 따라 Amplify Storage를 설정해야 합니다. 그런 다음 amplify/storage/resource.ts를 열고, 접두사를 활용하여 인증된 사용자를 위해 격리된 스토리지를 구성하는 Amplify 인증 모델에 따라 원하는 액세스 규칙과 함께 S3 버킷을 선언합니다.

다음으로 Amplify Auth와의 통합을 캡슐화하고 나중에 쉽게 페이지에 넣을 수 있는 StorageBrowser라는 구성 요소를 생성합니다. Amplify.config()를 직접적으로 호출하여 amplify_outputs.json에 대한 참조를 파라미터로 사용하여 모두 함께 연결해야 합니다.

Storage Browser for S3의 인증 및 권한 부여 설정에 대한 자세한 지침은 S3 사용 설명서를 참조하세요.

애플리케이션에 Storage Browser for S3 추가
이제 구성 요소가 생성되었으니 <StorageBrowser/>를 선언하여 렌더링하려는 페이지의 애플리케이션에 구성 요소를 추가하기만 하면 됩니다.

npm run dev를 사용하여 애플리케이션을 실행합니다. 애플리케이션을 로드한 후 Storage Browser for S3를 추가한 페이지로 이동하면 기본 레이아웃으로 로드된 것을 확인할 수 있습니다. 또한 위의 amplify/storage/resource.ts에서 정의한 것과 동일한 경로 및 권한으로 구성되어 있으므로 사용자가 설정한 S3 버킷 및 접두사 내에서 파일을 찾아보고, 읽고, 쓰고, 삭제할 수 있습니다.

하위 메뉴에서 관리 작업에 액세스하는 동안 파일을 다운로드하고 폴더를 찾아볼 수 있습니다. 그러면 사용할 수 없는 작업이 자동으로 회색으로 표시됩니다.

Storage Browser for S3를 사용하면 결과를 자동으로 페이징하고 파일 및 폴더를 필터링하고 검색할 수 있으므로 데이터를 쉽게 탐색하고 관리할 수 있습니다.

모든 데이터 액세스는 구성된 권한 부여 모델에 의해 관리되므로 최종 사용자는 보안 또는 규정 준수 요구 사항을 준수하면서 매우 직관적인 인터페이스를 통해 S3 버킷 및 접두사와 원활하게 상호 작용할 수 있습니다.

인터페이스 사용자 지정
유연한 설계 덕분에 애플리케이션의 모양과 느낌에 맞게 Storage Browser for S3를 사용자 지정할 수 있습니다. 다른 Amplify UI 구성 요소와 마찬가지로 애플리케이션에서 활성화한 Amplify 테마를 기본적으로 사용합니다. 그러나 CSS를 사용하여 직접 테마 또는 대상 지정 요소를 만들어 버튼, 브레드크럼, 페이징 컨트롤, 텍스트 필드 등과 같은 구성 요소를 쉽게 수정할 수 있습니다.

테마를 만들려면 먼저 @aws -amplify/ui-react/server 라이브러리의 defineComponentTheme() 함수를 사용하여 테마를 선언해야 합니다. 'storage-browser'와 같은 이름을 지정한 다음 스타일을 지정하려는 요소를 대상으로 지정합니다.

원하는 경우 레이아웃을 재정렬할 수도 있습니다. 예를 들어 코드에서 모든 컨트롤의 flexDirection을 'row-reverse'로 설정하고 있음을 알 수 있습니다.

그런 다음 앞에서 선언한 스토리지 브라우저 테마를 사용하여 createTheme() 함수로 테마를 만들고 적용합니다. 또한 primaryColor를 재정의하여 녹색으로 만듭니다.

페이지가 다시 로드되면 더 간결해진 레이아웃과 녹색 텍스트로 구성된 새로운 색상 체계를 갖춘 Storage Browser for S3 구성 요소를 확인할 수 있습니다.

제목(예: 홈이라고 표시된 제목 또는 기타)을 포함하여 UI 인터페이스의 모든 요소를 기본적으로 사용자 지정할 수 있습니다. 유일한 예외는 물론 버킷 이름 및 키와 같은 데이터에 대한 세부 정보입니다. 예를 들어 이 기능을 활용하여 다양한 언어에 대한 지원을 추가할 수 있습니다.

마지막으로, UI를 처음부터 새로 만들려면 createStorageBrowser() 함수를 직접적으로 호출하여 프로그래밍 방식으로 Storage Browser for S3 구성 요소를 생성합니다. 사용자 지정 프론트엔드와 통합하는 데 사용할 수 있는 useView() 후크를 반환하므로 동일한 기능을 모두 활용하면서 모양과 느낌을 완벽하게 제어할 수 있습니다. 자세한 내용은 설명서에서 다양한 사용자 지정 옵션 및 구성 방법에 대한 세부 정보를 참조하세요.

결론
Storage Browser for S3는 고도로 사용자 지정이 가능하고 사용자 친화적인 AWS Amplify UI React 구성 요소로, 이를 통해 최종 사용자는 Amazon S3의 데이터와 안전하게 상호 작용할 수 있습니다. 액세스 규칙을 완벽하게 제어하여 프론트엔드에서 액세스 요구 사항을 준수하는지 확인하는 동시에 애플리케이션의 자연스러운 확장처럼 보이도록 스타일을 지정할 수 있는 인터페이스를 통해 뛰어난 사용자 경험을 제공합니다.

알아야 할 사항

시작하기 – GitHub 페이지에서 Storage Browser for S3를 설치할 수 있습니다. 시작하는 방법에 대한 자세한 내용은 UI 설명서를 참조하세요.

호환성 – Storage Browser for S3는 Glacier Flexible Retrieval 및 S3 Glacier Deep Archive를 제외한 모든 Amazon S3 스토리지 클래스와 호환됩니다. S3 Intelligent-Tiering과는 호환되지만 S3 Intelligent-Tiering Archive Access 티어 또는 S3 Intelligent-Tiering Deep Archive Access 티어와는 호환되지 않습니다.

성능 및 내구성 – Storage Browser for S3에는 처리량이 많은 데이터 전송을 위한 업로드 요청을 개선하고, 업로드된 데이터(이러한 내구성 검사에 실패한 요청 거부)의 체크섬을 계산하고, 애플리케이션의 로드 시간을 단축하도록 성능을 최적화하는 로직이 내장되어 있습니다.

요금 – Storage Browser for S3는 오픈 소스이므로 추가 비용 없이 애플리케이션과 통합할 수 있습니다. Storage Browser for S3에서 사용한 기본 AWS 리소스에 대한 사용료만 지불하면 됩니다.

지원 – Storage Browser for S3는 S3의 다른 기능과 마찬가지로 AWS Support의 지원을 받습니다. Business Support 및 Enterprise Support 플랜을 이용하는 고객은 연중무휴 AWS Support 엔지니어의 도움을 받아 Storage Browser for S3 사용에 대한 지원을 받습니다.

피드백 – Storage Browser for S3의 기능 및 공개 로드맵에 대한 피드백을 공유해 주시기 바랍니다.

Matheus Guimaraes | @codingmatheus