Einführung von Amazon S3 Storage Browser für Apps

von Matheus Guimaraes übersetzt durch Marco Strauss

3Heute stellen wir den Storage Browser für Amazon S3 vor, eine Open-Source-UI-Komponente, die Sie Ihren Webanwendungen hinzufügen können, um die Interaktion mit Ihren in Amazon Simple Storage Service (Amazon S3) gespeicherten Daten durch ein GUI zu ermöglichen. Mit dieser Frontend-Komponente können autorisierte Endnutzer basierend auf ihren spezifischen Berechtigungen, die Sie über AWS-Identitäts- und Sicherheitsdienste oder benutzerdefinierte verwaltete Lösungen steuern, Daten in Amazon S3 durchsuchen, hochladen, herunterladen, kopieren und löschen.

Der Storage Browser für S3 erleichtert Entwicklern die Bereitstellung von Zugriff auf Daten in S3 für Endnutzer und ist so konzipiert, dass Endnutzer effizient mit Daten arbeiten können, unabhängig von ihren Kentnissen über Amazon S3 oder Amazon Web Services. Darüber hinaus können Sie das Erscheinungsbild der Storage Browser-Oberfläche anpassen, um sie an das Design ihrer Anwendung anzupassen.

Lassen Sie uns eine kurze Demo durchgehen, um zu zeigen, wie Sie beginnen können.

Installation
Der Storage Browser für S3 ist eine AWS Amplify UI React-Komponente, daher müssen Sie ihn in einer mit React oder einem React-basierten Framework wie Next.js, Gatsby, Remix oder anderen erstellten Webanwendung verwenden. Sie müssen sowohl AWS Amplify als auch die AWS Amplify UI React-Pakete installiert haben.

Diese Demo verwendet Next.js. Wenn Sie lernen möchten, wie Sie eine App von Grund auf einrichten, schauen Sie sich diese Schritt-für-Schritt-Anleitung zur Konfiguration von AWS Amplify und Verwendung der Amplify React UI-Komponenten mit einer neuen Next.js-Anwendung [EN] an.

Sie müssen nicht die gesamte @aws-amplify/ui-react-Bibliothek installieren, um den Storage Browser für S3 zu verwenden. Wenn Sie nur das speicherspezifische Paket verwenden wollen können Sie es mit dem folgenden Befehl installieren:

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

Wenn Sie eine bestehende Anwendung haben, die bereits das Amplify UI React-Paket installiert hat, stellen Sie sicher, dass Sie Ihre Abhängigkeiten aktualisieren, um die neueste Version zu importieren, und führen Sie npm install aus, um vorhandene Installationen zu aktualisieren.

Wenn Sie eine Anwendung von Grund auf neu erstellen, dann müssen Sie sicherstellen, dass Sie npm create amplify@latest im Verzeichnis Ihrer Anwendung ausführen, damit Sie die verschiedenen von Amplify bereitgestellten Kategorien wie Auth, Storage und andere verwenden können.

Auswahl eines Autorisierungsmodus
Der Storage Browser für S3 erfordert die Konfiguration von Authentifizierung und Autorisierung, damit er die S3-Buckets oder Präfixe rendern kann, auf die Endnutzer zugreifen können, sowie die Aktionen, die sie ausführen können.

Es gibt drei Optionen für die Einrichtung von Berechtigungen, die jeweils für verschiedene Anwendungsfälle geeignet sind:

Verwendung von AWS Amplify Auth – Diese Option ist ideal, wenn Sie Externen Zugriff auf Ihre Daten in Amazon S3 gewähren möchten. Sie können Amplify Storage einrichten, das standardmäßig AWS Amplify Auth [EN] zur Verwaltung der Zugriffssteuerung und Sicherheit für Dateien verwendet. Dies wird von Amazon Cognito unterstützt und enthält vorgefertigte UI-Komponenten zur Implementierung von Benutzerregistrierungs-, Anmelde- und Abmeldeabläufen.

Verwendung von AWS IAM Identity Center – Diese Option ist ideal für eine skalierbare Lösung, die Ihrer gesamten Belegschaft Zugriff auf Ihre Daten in S3 über den Storage Browser für S3 ermöglicht. Sie verknüpfen eine S3 Access Grants-Instanz mit Ihrem AWS Identity and Access Management (IAM) Identity Center, um S3 Access Grants-Berechtigungen für Ihre Benutzer und Gruppen zentral zu verwalten, einschließlich derjenigen, die auf externen Identitätsanbietern wie Microsoft Entra ID, Okta und anderen gehostet werden. Darüber hinaus verweist jedes AWS CloudTrail-Datenereignis für S3 auf die Endbenutzeridentität, die auf Ihre Daten zugegriffen hat, was zur Erhöhung der Beobachtbarkeit Ihres Datenzugriffs beiträgt.

Verwendung von IAM-Rollen mit Amazon S3 Access Grants – Diese Option ist ideal, wenn Sie Zugriff für IAM-Pincipals gewähren möchten. Um dies einzurichten, müssen Sie zunächst eine S3 Access Grants-Instanz erstellen, die Sie verwenden können, um Berechtigungen für S3-Buckets und Präfixe den gewünschten IAM-Identitäten zuzuordnen. Dann erstellen Sie eine IAM-Rolle, die Berechtigungen hat, s3:GetDataAccess aufzurufen, um temporären Zugriff mit minimalen Rechten auf S3-Buckets oder Präfixe zu erhalten.

Diese Demo geht davon aus, dass die Endnutzer nicht Teil unserer Organisation sind, daher ist Amplify Auth in diesem Fall eine großartige Wahl.

Einrichten von Berechtigungen
Zuerst müssen Sie Amplify Storage einrichten, indem Sie dieser Anleitung folgen[EN]. Öffnen Sie dann amplify/storage/resource.ts, um einen S3-Bucket zusammen mit den gewünschten Zugriffsregeln gemäß dem Amplify-Autorisierungsmodell[EN] zu deklarieren, das Präfixe verwendet, um isolierten Speicher für autorisierte Benutzer zu konfigurieren.

Erstellen Sie als Nächstes eine Komponente namens StorageBrowser, die die Integration mit Amplify Auth kapselt und die wir später einfach in eine Seite einfügen können. Stellen Sie sicher, dass Sie Amplify.config() aufrufen, um alles mit einem Verweis auf amplify_outputs.json als Parameter zusammenzufügen.

Nutzen Sie das S3-Benutzerhandbuch für detaillierte Anweisungen zur Einrichtung von Authentifizierung und Autorisierung für Storage Browser für S3.

Hinzufügen von Storage Browser für S3 zu meiner Anwendung
Nachdem die Komponente erstellt wurde, müssen Sie sie nur noch zu Ihrer Anwendung auf einer Seite hinzufügen, auf der Sie sie rendern möchten, indem Sie <StorageBrowser/> deklarieren.

Verwenden Sie npm run dev, um die Anwendung auszuführen. Nachdem sie geladen ist, navigieren Sie zu der Seite, auf der Sie Storage Browser für S3 hinzugefügt haben, und Sie sollten sehen, dass er mit dem Standardlayout geladen wird. Beachten Sie auch, dass er mit denselben Pfaden und Berechtigungen konfiguriert ist, die wir oben in amplify/storage/resource.ts definiert haben, sodass Benutzer Dateien in den S3-Buckets und Präfixen, die wir eingerichtet haben, durchsuchen, lesen, schreiben und löschen können.

Sie können Dateien herunterladen und Ordner durchsuchen und auf weitere Verwaltungsoperationen mit dem Untermenü zugreifen. Nicht verfügbare Aktionen werden automatisch ausgraut.

Storage Browser für S3 paginiert automatisch Ergebnisse und ermöglicht es, Dateien und Ordner zu filtern und zu durchsuchen, was die Navigation und Verwaltung von Daten erleichtert.

Der gesamte Datenzugriff wird durch das konfigurierte Autorisierungsmodell gesteuert, sodass Endbenutzer nahtlos mit S3-Buckets und -Präfixen über eine intuitive Schnittstelle interagieren können, ohne Ihre Sicherheits- oder Compliance-Anforderungen zu gefährden.

Anpassen der Benutzeroberfläche
Dank seines flexiblen Designs können Sie Storage Browser für S3 an das Erscheinungsbild Ihrer Anwendung anpassen. Wie alle anderen Amplify UI-Komponenten verwendet er standardmäßig das in Ihrer Anwendung aktive Amplify-Theme. Sie können jedoch leicht jede seiner Komponenten wie Schaltflächen, Breadcrumb, Paginierungssteuerelemente, Textfelder und andere anpassen, indem Sie Ihr eigenes Theme erstellen oder Elemente direkt mit CSS ansprechen.

Um ein Theme zu erstellen, müssen Sie es zunächst mit der Funktion defineComponentTheme() aus der @aws-amplify/ui-react/server-Bibliothek deklarieren. Sie geben ihm einen Namen wie 'storage-browser' und zielen dann auf die Elemente, die Sie gestalten möchten.

Wenn Sie möchten, dann können Sie auch das Layout neu anordnen. Im Code können Sie sehen, dass wir das flexDirection aller Steuerelemente auf 'row-reverse' setzen, zum Beispiel.

Dann erstellen Sie das Theme mit der Funktion createTheme() unter Verwendung des zuvor deklarierten storage-browser-Themes und wenden es an. Wir überschreiben primaryColor um es grün zu machen.

Nachdem die Seite neu geladen wurde, sollten Sie die Storage Browser für S3-Komponente mit ihrem neuen, kompakteren Layout und dem neuen Farbschema mit grünem Text sehen.

Sie können im Wesentlichen jedes Element der Benutzeroberfläche anpassen, einschließlich aller Anzeigetexte, z.B. den Titel der standardmäßig „Home“ anzeigt. Die einzigen Ausnahmen sind natürlich die Details über die Daten, wie Bucket-Namen und Schlüssel. Sie können dieses Feature nutzen, um beispielsweise Unterstützung für verschiedene Sprachen zu implementieren.

Wenn Sie es vorziehen, Ihre eigene Benutzeroberfläche von Grund auf neu zu erstellen, können Sie schließlich die Funktion createStorageBrowser() aufrufen, um programmatisch eine Storage Browser für S3-Komponente zu erstellen. Sie gibt einen useView()-Hook zurück, den Sie zur Integration in Ihr eigenes benutzerdefiniertes Frontend verwenden können, wodurch Sie die volle Kontrolle über das Erscheinungsbild haben und gleichzeitig alle dieselben Funktionen nutzen können. Weitere Informationen finden Sie in der Dokumentation zu den verschiedenen Anpassungsoptionen und deren Konfiguration[EN].

Fazit
Storage Browser für S3 ist eine hochgradig anpassbare und benutzerfreundliche AWS Amplify UI React-Komponente, die es Endnutzern ermöglicht, sicher mit Daten auf Amazon S3 zu interagieren. Sie gibt Ihnen die volle Kontrolle über die Zugriffsregeln, um sicherzustellen, dass das Frontend Ihren Zugriffsanforderungen entspricht, während es gleichzeitig eine großartige Benutzererfahrung durch eine Oberfläche bietet, die Sie so gestalten können, dass sie als natürliche Erweiterung Ihrer Anwendung erscheint.

Wissenswerte Dinge

Erste Schritte – Sie können Storage Browser für S3 von der GitHub-Seite[EN, EXTERN] installieren. Weitere Informationen zu den ersten Schritten finden Sie in der UI-Dokumentation[EN].

Kompatibilität – Storage Browser für S3 ist mit allen Amazon S3 Speicherklassen kompatibel, mit Ausnahme von S3 Glacier Flexible Retrieval und S3 Glacier Deep Archive. Er ist kompatibel mit S3 Intelligent-Tiering, aber nicht mit der S3 Intelligent-Tiering Archive Access Tier oder der S3 Intelligent-Tiering Deep Archive Access Tier.

Leistung und Haltbarkeit – Storage Browser für S3 enthält integrierte Logik, die Upload-Anfragen für Hochdurchsatz-Datenübertragungen verbessert, Prüfsummen der hochgeladenen Daten berechnet (und Anfragen ablehnt, die diese Haltbarkeitsprüfungen nicht bestehen) und die Leistung für schnellere Ladezeiten in Ihrer Anwendung optimiert.

Preisgestaltung – Storage Browser für S3 ist Open Source und Sie können ihn kostenlos in Ihre Anwendungen integrieren. Sie zahlen nur für die Nutzung der zugrunde liegenden AWS-Ressourcen, die Sie mit Storage Browser für S3 verwenden.

Support – Storage Browser für S3 wird wie jede andere Funktion von S3 vom AWS Support unterstützt. Kunden mit Business- und Enterprise-Support-Plänen erhalten rund um die Uhr Zugang zu AWS-Support-Ingenieuren, um ihre Nutzung von Storage Browser für S3 zu unterstützen.

Feedback – Wir laden Sie ein, Feedback[EN, EXTERN] zur Funktionalität und zum öffentlichen Fahrplan für Storage Browser für S3 zu geben.

Über die Autoren

Matheus Guimaraes begann seine Karriere vor über 22 Jahren als Junior-Videospielentwickler, als C/C++ noch die Welt beherrschte und HTML ein Zusatzkurs war. Vom Junior-Entwickler zum CTO und allen Positionen dazwischen hat Matheus seine Leidenschaft für die Rolle bewahrt, die Technologie dabei spielt, die Gegenwart mit all den Möglichkeiten für unsere Zukunft zu verbinden.