Next.js 14 - Dateiupload mit Dropzone, gestylt mit TailwindCss

Azure Blob Storage bietet 5 GB lokal redundanten Speicher (LRS) Hot Block mit 20.000 Lese- und 10.000 Schreibvorgängen jeden Monat für 12 Monate kostenlos. Also, lassen Sie uns ein hübsches Upload-Formular mit Next.js 14 erstellen. Wir werden eine Dropzone und die Möglichkeit, mehrere Dateien gleichzeitig hochzuladen, mit einer schicken Upload-Fortschrittsleiste integrieren.

Hier ist das GitHub Repo mit dem gesamten Code

Verwendeter Stack

Ich werde mit meinem Standard-Stack beginnen:

• Next.js 14 als Web-Framework

• TailwindCss for Styling

• Contentful CMS (Kostenloses Abo)

• Microsoft Azure für das Erstellen des Storage Accounts

• Vercel für das Hosting

Hier ist bereits ein Spoiler für das Ergebnis.

Speicherkonten (Azure, Aws, Google)

Azure Blob Storage, AWS S3 (Simple Storage Service) und Google Cloud Storage sind die beliebtesten Cloud-basierten Objektspeicherlösungen, die von Microsoft Azure, Amazon Web Services bzw. Google Cloud Platform bereitgestellt werden. Hier finden Sie eine Aufschlüsselung der Unterschiede zwischen ihnen:

Übersicht

• Azure Blob Storage: Als Teil von Microsoft Azure ist Blob Storage eine Objektspeicherlösung für die Cloud, die unstrukturierte Daten wie Dokumente, Bilder, Videos und Backups speichert. Es werden verschiedene Arten von Blobs unterstützt, z. B. Block-Blobs (für diskrete Objekte wie Bilder oder PDFs), Append-Blobs (optimiert für Anhängevorgänge wie die Protokollierung) und Page-Blobs (optimiert für zufällige Lese-/Schreibvorgänge).

• AWS S3 (Einfacher Speicherdienst): Amazon S3 ist der Objektspeicherservice von AWS, der hoch skalierbare, dauerhafte und sichere Speicherung für jede Art von Daten bietet. Er unterstützt eine Vielzahl von Anwendungsfällen, darunter Data Lakes, Backups und Inhaltsspeicher. S3 ist für seine Einfachheit und Robustheit bekannt und bietet verschiedene Speicherklassen wie S3 Standard, S3 Intelligent-Tiering, S3 Glacier, usw.

• Google Cloud-Speicher: Google Cloud Storage ist Googles einheitlicher Objektspeicher für Entwickler und Unternehmen, der die Speicherung und den Zugriff auf beliebige Datenmengen zu jeder Zeit ermöglicht. Er bietet mehrere Speicherklassen, darunter Standard, Nearline, Coldline und Archive, die auf unterschiedliche Zugriffsanforderungen und Kostenvorlieben abgestimmt sind.

Langlebigkeit und Verfügbarkeit

Alle drei Dienste zeichnen sich durch eine lange Lebensdauer und eine unterschiedlich hohe Verfügbarkeit aus:

Azure Blob Storage: Dauerhaftigkeit: 99,999999999% (11 Neunen) Verfügbarkeit: Zu den Optionen gehören 99,9 % für Hot und Cool und 99,99 % für Read-Access Geo-Redundant Storage (RA-GRS).

AWS S3: Dauerhaftigkeit: 99,999999999% (11 Neunen) Verfügbarkeit: 99,9 % für Standard und 99,99 % für Intelligent-Tiering und Standard.

Google Cloud Storage: Dauerhaftigkeit: 99,999999999% (11 Neunen) Verfügbarkeit: 99,9 % bis 99,95 % je nach Speicherklasse und Redundanztyp.

Modelle zur Preisgestaltung

Die Preise variieren je nach Speicherklasse, Zugriffshäufigkeit und Datenübertragungsanforderungen erheblich:

• Azure Blob-Speicher: Die Preisgestaltung basiert auf dem Speichertyp (Hot, Cool, Archive), der Redundanzoption, dem Datenabruf und den Vorgängen.

• AWS S3: Gebühren für Speicher (pro GB), Anforderungskosten (PUT, GET) und Datentransfer. Außerdem gibt es verschiedene Preisstufen für unterschiedliche Speicherklassen.

• Google Cloud Storage: Ähnlich wie bei AWS richtet sich die Preisgestaltung nach der Speicherklasse (Standard, Nearline, Coldline, Archive), den Vorgängen und dem Netzwerkausgang.

Sicherheit und Compliance

Alle drei Plattformen bieten robuste Sicherheitsfunktionen wie Verschlüsselung im Ruhezustand und bei der Übertragung, Identitäts- und Zugriffsmanagement (IAM), Datenrichtlinien und die Einhaltung globaler Standards (z. B. GDPR, HIPAA).

• Azure Blob-Speicher: Bietet Azure Active Directory-Integration, Managed Service Identity und Advanced Threat Protection.

• AWS S3: Bietet S3 Bucket Policies, AWS IAM, AWS KMS für Verschlüsselung und Funktionen wie MFA Delete.

• Google Cloud-Speicher: Integriert sich mit Cloud IAM, Cloud KMS und unterstützt Object-Level IAM für eine fein abgestufte Zugriffskontrolle.

Einzigartige Merkmale

• Azure Blob-Speicher: Funktionen wie Soft Delete, Snapshot und Blob Versioning.

• AWS S3: Bietet S3-Übertragungsbeschleunigung, Glacier Vault Lock und S3 Select für die Abfrage von Daten in S3.

• Google Cloud Storage: Bietet Object Lifecycle Management, Requester Pays und Signierte URLs.

Beginnen wir mit der Entwicklung

Für dieses Beispiel habe ich mich für Azure entschieden. Die erste Aktion besteht darin, ein Konto und ein entsprechendes Azure-Abonnement zu erstellen.

Azure Kontoerstellung

Am einfachsten ist es, ein kostenloses GitHub-Konto zu erstellen, das Sie für die Erstellung weiterer Konten verwenden können. In diesem Beispiel werden wir ein Azure-Konto mit einem Abonnement zur Erstellung eines Speicherkontos erstellen. Die Erstellung des Azure-Kontos ist kostenlos, aber Sie müssen eine Zahlungsmethode angeben (ich habe eine Kreditkarte verwendet), um den Erstellungsprozess abzuschließen. Gehen Sie auf https://signup.live.com/signup und geben Sie Ihre E-Mail-Adresse, Ihren Namen, Ihre Region und Ihr Geburtsdatum an. Danach erhalten Sie eine Bestätigungsmail/einen OTP-Code, und der Vorgang ist abgeschlossen.

Dann gehen wir zu portal.azure.com, und Sie sind bereits angemeldet. Microsoft hat bereits ein Abonnement für Sie erstellt, das mit einem neuen Azure AD Directory verbunden ist.

Klicken Sie nun auf das Hamburger-Menü in der oberen linken Ecke und wählen Sie „Home“, was uns zum folgenden Bildschirm führt.

CORS Einstellungen

Nach der Erstellung des Speicherkontos öffnen Sie das Speicherkonto und wählen „Einstellungen“->„Ressourcenfreigabe (CORS)“.

Storage Account Key

Prüfen Sie bitte unter „Einstellungen“->„Konfiguration“, dass „Zugriff auf Speicherkonto-Schlüssel zulassen“ aktiviert und „Version 1.2“ als Mindest-Tls-Version ausgewählt ist. Als letzte Aktion gehen Sie zu „Sicherheit + Netzwerk“ -> „Zugriffsschlüssel“ und klicken Sie auf „Schlüssel1“ anzeigen. Danach sehen Sie das „Kopieren“-Symbol, um den Schlüssel zu erhalten, den wir in unserem Next.js 14-Projekt benötigen.

Erstellen eines neuen "Container"

Öffnen Sie „Datenspeicher“ und wählen Sie „Container“. Oben links „+ Container“, rechts im Flyout einen Namen festlegen und unten auf „Erstellen“ klicken.

Neue Env Variablen

Für dieses Beispiel benötigen wir drei neue env-Variablen.

Neue FileUploader Komponente

Unter components/azure/storageaccounts habe ich eine neue Komponente namens „fileuploader.component.tsx“ erstellt.

Neue NPM Pakete

Oben befindet sich ein mit „react-chartjs-2“ erstelltes Donut-Diagramm, das uns den „belegten“ und „freien“ Speicherplatz anzeigt. Darunter befindet sich die Dropzone, die auch als Dateiselektor verwendet werden kann. Darunter befinden sich die Schaltfläche „Hochladen“ und drei verschiedene Schaltflächen zur Selbsterklärung, gefolgt von der Liste der hochgeladenen Dateien.

Neue API-Routen für die verschiedenen Aktionen

Wir benötigen 4 neue API-Routen für die Logik von delete, deleteall, list und sastoken. Wir erstellen sie unter app/api/azure/storageaccount

deleteall/route.ts

filedelete/route.ts

list/route.ts

sastoken/route.ts

Wir müssen einen SAS-Token-Link für den direkten Upload auf Azure generieren, da sonst der Upload von Dateien mit einer Größe von mehr als 4,5 MB fehlschlägt (Limit der Vercel Serverless-Funktion).

Alle benötigten Routen wurden mit next-auth und Azure AD B2C gesichert. Genießen Sie das Widget, das großartig funktioniert und auch schön aussieht, und passen Sie es Ihren Bedürfnissen entsprechend an.

Cloudapp-dev und bevor Sie uns verlassen

Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:

Wenn Ihnen gefallen hat was Sie gelesen haben oder wenn es Ihnen sogar geholfen hat, dann würden wir uns über einen "Clap" 👏 oder einen neuen Follower auf unseren Medium Account sehr freuen.

Oder folgen Sie uns auf Twitter -> Cloudapp.dev