So richten Sie einen einfachen Bild-Upload mit Node und AWS S3 ein

Eine Schritt-für-Schritt-Anleitung zum Hochladen eines Bildes oder einer Datei in den Amazon S3-Dienst.

Dies ist der erste Teil eines Tutorials, in dem wir den Serverteil (Node.js) des Codes behandeln.

Ich habe auch ein Video-Tutorial auf YouTube vorbereitet. Sie finden einen Link in den Ressourcen am Ende dieses Artikels.

1. Was wir installieren müssen & eine kurze Beschreibung.

multer: Middleware für den Umgang mit Datendateien. Wird hauptsächlich zum Hochladen von Dateien verwendet. Weitere Infos: Npm Link

multer-s3: multer-Erweiterung für einen einfachen Datei-Upload zum Amazon S3-Dienst. Weitere Infos: Npm Link

aws-sdk: Erforderliches Paket für die Arbeit mit AWS (Amazon Web Services). In unserem Fall S3 Service. Weitere Infos: Npm Link

Gehen Sie zu Ihren Projekten und installieren Sie die Pakete:

npm install —-save multer multer-s3 aws-sdk

2. Melden Sie sich für AWS an

Erstellen wir zunächst ein Konto auf //aws.amazon.com. Amazon bietet eine erstaunliche kostenlose Stufe, die Sie für das 1. Jahr nutzen können. Suchen Sie nach der Anmeldung nach dem S3-Dienst.

Einfach gesagt, S3 ist ein Cloud-Dienst zum Speichern von Dateien.

Wir müssen einen Eimer schaffen . Sie können sich einen Bucket als Ordner für Ihre Dateien vorstellen. Wählen Sie einen Bucket-Namen und die Region . Da dies eine einfache Einrichtung ist, sind wir nicht an anderen Konfigurationen interessiert. (Die Standardeinstellung ist in Ordnung - wenn etwas nicht klar ist, fragen Sie in den Kommentaren). Klicken Sie auf " Weiter ", bis Sie auf " Überprüfen " klicken und Ihren Bucket erstellen.

Navigieren Sie zu Ihrem erstellten Bucket und überprüfen Sie Ihre URL-Leiste . Erinnern Sie sich an Ihren Eimernamen (für mich "mittlerer Test") und Ihre Region (für mich "us-east").

Jetzt müssen wir unsere sicheren Anmeldeinformationen erhalten . Navigieren Sie durch Ihren Kontonamen zu " Meine Sicherheitsanmeldeinformationen ". Dann " Access Keys " und Create New Access Key .

Teilen Sie niemals Ihre Schlüssel mit jemandem! Speichern Sie diese Schlüssel vorübergehend in einer Datei oder laden Sie die Schlüsseldatei herunter, da wir Schlüssel benötigen, um einen Datei-Upload einzurichten.

Gut. Amazon Setup fertig!

3. Gehen Sie zu Ihrem Codierungseditor

Ich werde die Grundlagen von Node oder Express hier nicht erklären. Dieses Tutorial konzentriert sich nur auf das Hochladen von Dateien. Wenn Sie an der gesamten Projektimplementierung interessiert sind, überprüfen Sie mein GitHub-Repository oder sehen Sie sich das vollständige Tutorial an. (Links finden Sie am Ende dieses Blogposts).

  1. Erstellen Sie Ihren Datei-Upload-Service mit der folgenden Implementierung (erster Teil):

Wichtiger Hinweis: Legen Sie Ihre geheimen Anmeldeinformationen niemals direkt in einer Datei offen! Teilen Sie niemals Ihre geheimen Anmeldeinformationen! Erwägen Sie, Umgebungsvariablen in Ihrer lokalen Umgebung oder bei bereitgestellten Projekten Variablen in Ihrem Cloud-Anbieter einzurichten. Die beste Lösung wäre die Verwendung von aws-Profilen : //docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html.

Zuerst importieren wir alle unsere installierten Pakete. Der zweite Teil ist die Konfiguration unseres AWS . Wir müssen unsere geheimen Schlüssel und Regionen in der URL-Leiste angeben, die ich Ihnen zuvor gezeigt habe.

Nach der AWS-Konfiguration können wir eine Instanz unseres Amazon S3 erstellen. Wir sind noch nicht ganz fertig. Lassen Sie uns nun den zweiten Teil dieser Implementierung sehen.

Jetzt können wir eine Lösung für einen Multer-Upload einrichten. Wir müssen dem Multer-Objekt eine Funktion mit den folgenden Eigenschaften bereitstellen.

  1. s3 : Instanz von Amazon S3, die wir zuvor erstellt haben.
  2. Eimer : Name unseres Eimers (in meinem Fall: "mittlerer Test")
  3. acl : Zugriffskontrolle für die Datei ('public read' bedeutet, dass jeder Dateien anzeigen kann), Sie können alle verfügbaren Typen hier überprüfen: amazon link
  4. metada : Rückruffunktion zum Festlegen von Metadaten hochgeladener Dateien. Hier setze ich zusätzliche Metadaten für einen Feldnamen . Sie können diese Daten auf dem Bild unten sehen.

5. key: Rückruffunktion zum Festlegen der Schlüsseleigenschaft (unter welcher Taste Ihre Datei in Ihrem Bucket gespeichert wird). In unserem Fall erstellen wir einen Zeitstempel einer aktuellen Zeit und speichern diese Datei unter diesem Namen. Auf diese Weise ist unser Dateiname immer eindeutig, Sie können jedoch einen beliebigen Namen auswählen.

Nach dem gesamten Setup exportieren wir das Upload- Objekt, um es in anderen Dateien zu verwenden.

4. Richten Sie eine Route zum Hochladen des Bildes ein

Wir sind fast fertig, aber Benutzer unserer App haben immer noch keinen Zugriff auf den Bild-Upload. Wir müssen ihnen diese Funktionalität zugänglich machen. Erstellen wir einen Endpunkt zum Speichern einer Datei.

Wir exportieren unser zuvor erstelltes Upload-Objekt und erstellen daraus ein neues. Das neue ist spezifischer mit zusätzlicher Konfiguration für einen einzelnen Bild-Upload . Wir geben ihm einen ' Image' -Wert. Dieser Wert ist sehr wichtig, da wir unsere Datei unter diesem Schlüssel an einen Server senden.

Der zweite Teil ist die Route selbst. POST- Endpunkt auf ' / image-upload '. Im Inneren nennen wir singleUpload . Vergessen Sie nicht, req und res zu übergeben, da multer die Datei, die wir vom req-Objekt an den Server senden, erhält.

Wir suchen nach einem Fehler. Wenn es keine gibt, senden wir JSON mit dem Wert unseres Dateispeicherorts zurück, der nur eine URL zu der Datei bei Amazon ist .

Aaaaund das wars! Wir können jetzt Dateien auf Amazon S3 hochladen. Ziemlich einfach, was denkst du?

5. Testen wir es in Postman.

Um die Ergebnisse unserer harten Arbeit zu sehen, müssen wir eine Anfrage mit einem Bild, das wir hochladen möchten, an den Server senden. In diesem Teil werden wir es über Postman testen. Im nächsten Teil des Tutorials erstellen wir eine Implementierung in einer Angular-Anwendung.

Wenn Sie keinen Postboten haben, können Sie ihn einfach als Google Chrome-Erweiterung herunterladen. Suchen Sie einfach nach " Postman Google Chrome Extension ". Postman ist eine Anwendung zum Initialisieren, Senden und Testen von Anforderungen an den Server in einer einfachen Angelegenheit.

  1. Senden Sie eine Post-Anfrage an einen zuvor erstellten Endpunkt. In meinem Fall habe ich im Knotenpfad von / image-upload angegeben .
  2. Wählen Sie Body of Formulardaten .
  3. Geben Sie den Schlüssel eines Bildes an. Sie werden feststellen, dass dies ein Schlüssel ist, den wir zuvor in unserem Code eingerichtet haben. Überprüfen Sie eine Datei und wählen Sie eine Datei von Ihrem Computer aus.
  4. Senden Sie die Anfrage .

Sie sollten JSON mit der URL Ihrer hochgeladenen Datei zurückerhalten.

Voilà! Das war's Jungs. Dies ist ein einfacher Datei-Upload für Node. Im nächsten Artikel werde ich mit einer Frontend-Implementierung für Angular fortfahren.

Wenn Ihnen dieses Tutorial gefällt, können Sie meinen vollständigen Kurs über Udemy - The Complete Angular, React & Node Guide | lesen Airbnb-Stil App.

Videovortrag : Youtube Video

Abgeschlossenes Projekt: Mein Github-Repository

Prost,

Filip