TOC

So laden Sie eine Datei mit Node.js in den Objektspeicher hoch

Einführung

Die Objektspeicherung ist eine beliebte und skalierbare Methode zum Speichern und Bereitstellen von statischen Elementen wie Audio, Bildern, Text, PDFs und anderen Arten von unstrukturierten Daten. Cloud-Anbieter bieten zusätzlich zum herkömmlichen lokalen oder Blockspeicher Objektspeicher an, in dem dynamische Anwendungsdateien und Datenbanken gespeichert werden. Lesen Sie Object Storage vs. Block Storage, um mehr über die Anwendungsfälle und Unterschiede zwischen den beiden zu erfahren.

Spaces ist ein einfacher Objektspeicherdienst, der von DigitalOcean angeboten wird. Sie können sich nicht nur über ein Bedienfeld anmelden und gespeicherte Dateien hochladen, verwalten und löschen, sondern auch über die Befehlszeile und die Spaces-API auf Ihren DigitalOcean Space zugreifen.

In diesem Lernprogramm erstellen wir eine Node.js-Anwendung, mit der ein Benutzer eine Datei in seinen DigitalOcean Space hochladen kann, indem er ein Formular im Front-End einer Website sendet.

Voraussetzungen

Um diesem Tutorial folgen zu können, benötigen Sie:

  • Ein DigitalOcean Space, zusammen mit einem Zugangsschlüssel und einem geheimen Zugangsschlüssel zu Ihrem Konto. Lesen Sie How To Create a DigitalOcean Space und API Key, um mit a zu beginnen DigitalOcean-Konto, erstellen Sie einen Space und richten Sie einen API-Schlüssel und ein Geheimnis ein.

  • Node.js und npm sind auf Ihrem Computer installiert. Unter Node.js Downloads können Sie die richtige Version für Ihr Betriebssystem installieren.

Sie sollten jetzt ein DigitalOcean-Konto, einen Space mit Zugriffsschlüssel sowie Node.js und npm auf Ihrem Computer installiert haben.

Hinzufügen von Zugriffsschlüsseln zur Anmeldeinformationsdatei

DigitalOcean Spaces ist mit der API Amazon Simple Storage Service (S3) kompatibel, und wir verwenden die https://aws.amazon.com/sdk-for-node -js / [AWS SDK für JavaScript in Node.js], um eine Verbindung zu dem von uns erstellten Space herzustellen.

Der erste Schritt besteht darin, eine * credentials * -Datei zu erstellen, in der der Zugriffsschlüssel und der geheime Zugriffsschlüssel abgelegt werden, die Sie beim Erstellen Ihres DigitalOcean Space erhalten haben. Die Datei befindet sich unter Mac und Linux unter * + ~ / .aws / credentials + * oder unter Windows unter * + C: \ Users \ USERNAME \ .aws \ credentials + *. Wenn Sie zuvor AWS-Anmeldeinformationen gespeichert haben, können Sie Informationen zu https://aws.amazon.com/blogs/security/a-new-and-standardized-way-to-manage-credentials-in-the-aws-sdks/ lesen. [Behalten Sie mehrere Berechtigungsnachweise bei], um weitere Anleitungen zu erhalten.

Öffnen Sie Ihre Eingabeaufforderung, vergewissern Sie sich, dass Sie sich in Ihrem * Users * -Verzeichnis befinden, Zugriff auf einen Administrator-Benutzer haben und erstellen Sie das * + .aws + * -Verzeichnis mit den darin enthaltenen * + Anmeldeinformationen + *.

sudo mkdir .aws && touch .aws/credentials

Öffnen Sie die Datei und fügen Sie den folgenden Code ein. Ersetzen Sie dabei "+ your_access_key " und " your_secret_key +" durch Ihre jeweiligen Schlüssel.

Referenzen

[default]
aws_access_key_id=
aws_secret_access_key=

Jetzt wird Ihr Zugriff auf Spaces über das AWS SDK authentifiziert, und wir können mit der Erstellung der Anwendung fortfahren.

Installieren Sie Node.js Dependencies

Erstellen Sie zunächst ein Verzeichnis, in dem Sie Ihre Node.js-Anwendung platzieren möchten, und navigieren Sie zu dem Verzeichnis. Für diese Demonstration erstellen wir unser Projekt in * + spaces-node-app * im Verzeichnis *` + sites or` *.

mkdir sites/spaces-node-app && cd sites/spaces-node-app

Erstellen Sie eine neue * + package.json * -Datei für Ihr Projekt. Fügen Sie den folgenden Code in die Datei ein.

package.json

{
 "name": "spaces-node-app",
 "version": "1.0.0",
 "main": "server.js",
 "scripts": {
   "start": "node server.js"
 },
 "license": "MIT"
}

Dies ist eine einfache "+ package.json" -Datei, in der Name, Versionsnummer und Lizenz unserer Anwendung aufgeführt sind. Mit dem Feld "+ scripts " können wir einen Node.js-Server ausführen, indem wir " npm start " anstelle von " node server.js +" eingeben.

Wir installieren alle unsere Abhängigkeiten mit dem Befehl + npm install +, gefolgt von den Namen der vier Abhängigkeiten in unserem Projekt.

npm install aws-sdk express multer multer-s3

Nach dem Ausführen dieses Befehls sollte die Datei "+ package.json" aktualisiert werden. Diese Abhängigkeiten helfen uns dabei, eine Verbindung zur DigitalOcean Spaces-API herzustellen, einen Webserver zu erstellen und das Hochladen von Dateien zu verwalten.

Nachdem wir den Projektspeicherort und die Abhängigkeiten eingerichtet haben, können wir die Server- und Front-End-Ansichten einrichten.

Erstellen Sie das Front-End der Anwendung

Erstellen wir zunächst Dateien für die öffentlichen Ansichten unserer Anwendung. Dies wird dem Benutzer am Frontend angezeigt. Erstellen Sie in Ihrem Projekt ein * öffentliches * Verzeichnis mit + index.html,` + success.html` und + error.html. Alle drei Dateien haben das unten stehende HTML-Gerüst mit unterschiedlichen Inhalten im + body +. Schreiben Sie den folgenden Code in jede Datei.

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>DigitalOcean Spaces Tutorial</title>

 <link rel="stylesheet" href="./style.css">
</head>

<body>

 <!-- contents will go here -->

</body>

</html>

Schreiben Sie eine Fehlermeldung in den + body von` + error.html`.

error.html

...

<h1>Something went wrong!</h1>
<p>File was not uploaded successfully.</p>

...

Schreiben Sie eine Erfolgsmeldung in den + body von` + success.html`.

success.html

...

<h1>Success!</h1>
<p>File uploaded successfully.</p>

...

In "+ index.html " erstellen wir ein HTML-Formular mit " multipart / form-data ". Es besteht aus einem einfachen Datei-Upload ` input +` und einem Submit-Button.

index.html

...

<h1>DigitalOcean Spaces Tutorial</h1>

<p>Please select a file and submit the form to upload an asset to your DigitalOcean Space.</p>

<form method="post" enctype="multipart/form-data" action="/upload">
 <label for="file">Upload a file</label>
 <input type="file" name="upload">
 <input type="submit" class="button">
</form>

...

Als letztes erstellen wir "+ style.css" und fügen gerade so viel CSS hinzu, dass die Anwendung einfach zu lesen ist.

style.css

html {
 font-family: sans-serif;
 line-height: 1.5;
 color: #333;
}

body {
 margin: 0 auto;
 max-width: 500px;
}

label,
input {
 display: block;
 margin: 5px 0;
}

Mit diesen drei Dateien haben wir ein Upload-Formular, das die Hauptseite unserer kleinen Anwendung bildet, und wir haben Erfolgs- und Fehlerseiten für den Benutzer.

Richten Sie eine Express Server-Umgebung ein

Wir haben alle Dateien für das Front-End unserer Anwendung erstellt, haben jedoch derzeit keinen Server eingerichtet und keine Möglichkeit, sie anzuzeigen. Wir werden einen Node-Server mit dem Express-Webframework einrichten.

Erstellen Sie im Stammverzeichnis des Projekts eine Datei + server.js +. Laden Sie oben in unseren vier Abhängigkeiten mit + require () +. Wir leiten unsere Anwendung durch die "+ app " -Instanz von " express +".

server.js

// Load dependencies
const aws = require('aws-sdk');
const express = require('express');
const multer = require('multer');
const multerS3 = require('multer-s3');

const app = express();

Unser Frontend befindet sich im Verzeichnis "+ public +". Stellen Sie diese Konfiguration daher unter den Abhängigkeiten ein.

server.js

...

// Views in public directory
app.use(express.static('public'));

Wir leiten "+ index.html ", " success.html " und " error.html +" relativ zum Stammverzeichnis des Servers weiter.

server.js

...

// Main, error and success views
app.get('/', function (request, response) {
 response.sendFile(__dirname + '/public/index.html');
});

app.get("/success", function (request, response) {
 response.sendFile(__dirname + '/public/success.html');
});

app.get("/error", function (request, response) {
 response.sendFile(__dirname + '/public/error.html');
});

Zuletzt teilen wir dem Server mit, welcher Port abgehört werden soll. In diesem Beispiel wird + 3001 + verwendet, aber Sie können es auf einen beliebigen verfügbaren Port setzen.

server.js

...

app.listen(3001, function () {
 console.log('Server listening on port 3001.');
});

Speichern Sie + server.js + und starten Sie den Server. Sie können dies tun, indem Sie "+ node server.js " oder " npm start ", die Verknüpfung, die wir in " package.json +" festgelegt haben, ausführen.

npm start
Output> node server.js

Server listening on port 3001.

Navigieren Sie zu "+ http: // localhost: 3001 ", und Sie werden das Upload-Formular sehen, da wir " index.html +" als Root des Servers festlegen.

image: https://assets.digitalocean.com/articles/eng_javascript/nodejs-spaces/upload-form.png [DigitalOcean Spaces Node.js Upload Form]

Sie können auch zu "+ http: // localhost: 3001 / success" und "+ http: // localhost: 3001 / error" navigieren, um sicherzustellen, dass diese Seiten ordnungsgemäß weitergeleitet werden.

Laden Sie mit Multer eine Datei in einen Space hoch

Nachdem unsere Serverumgebung nun ordnungsgemäß funktioniert, besteht der letzte Schritt darin, das Formular in Multer und Multer S3 zu integrieren, um eine Datei in Spaces hochzuladen.

Sie können + new aws.S3 () + verwenden, um eine Verbindung zum Amazon S3-Client herzustellen. Für die Verwendung mit DigitalOcean Spaces müssen wir einen neuen Endpunkt festlegen, um sicherzustellen, dass dieser an den richtigen Speicherort hochgeladen wird. Zum Zeitpunkt des Schreibens ist + nyc3 + die einzige Region, die für Spaces verfügbar ist.

Scrollen Sie in + server.js + nach oben und fügen Sie den folgenden Code unter den konstanten Deklarationen ein.

server.js

...
const app = express();

// Set S3 endpoint to DigitalOcean Spaces
const spacesEndpoint = new aws.Endpoint('nyc3.digitaloceanspaces.com');
const s3 = new aws.S3({
 endpoint: spacesEndpoint
});

Anhand des Beispiels aus der multer-s3 -Dokumentation erstellen wir eine Funktion "+ upload " und setzen die Eigenschaft " bucket " auf Ihren eindeutigen Space-Namen. Wenn Sie " acl" auf "+ public-read i" setzen, wird sichergestellt, dass Ihre Datei für die Öffentlichkeit zugänglich ist. Wenn Sie dieses Feld leer lassen, ist die Standardeinstellung "privat". Auf diese Dateien kann nicht über das Web zugegriffen werden.

server.js

...

// Change bucket property to your Space name
const upload = multer({
 storage: multerS3({
   s3: s3,
   bucket: '',
   acl: 'public-read',
   key: function (request, file, cb) {
     console.log(file);
     cb(null, file.originalname);
   }
 })
}).array('upload', 1);

Die Funktion "+ upload " ist abgeschlossen, und unser letzter Schritt besteht darin, das Upload-Formular mit Code zu verbinden, um die Datei zu senden und den Benutzer entsprechend weiterzuleiten. Scrollen Sie zum Ende von " server.js " und fügen Sie diesen Code direkt über der Methode " app.listen () +" am Ende der Datei ein.

server.js

...
app.post('/upload', function (request, response, next) {
 upload(request, response, function (error) {
   if (error) {
     console.log(error);
     return response.redirect("/error");
   }
   console.log('File uploaded successfully.');
   response.redirect("/success");
 });
});

Wenn der Benutzer auf "Senden" klickt, wird eine POST-Anfrage an "+ / upload" weitergeleitet. Der Knoten wartet auf diesen POST und ruft die Funktion + upload () + auf. Wenn ein Fehler gefunden wird, leitet die bedingte Anweisung den Benutzer zur Seite "+ / error" weiter. Bei erfolgreichem Abschluss wird der Benutzer auf die Seite "+ / success +" umgeleitet und die Datei in Ihren Space hochgeladen.

Hier ist der gesamte Code für "+ server.js".

server.js

// Load dependencies
const aws = require('aws-sdk');
const express = require('express');
const multer = require('multer');
const multerS3 = require('multer-s3');

const app = express();

// Set S3 endpoint to DigitalOcean Spaces
const spacesEndpoint = new aws.Endpoint('nyc3.digitaloceanspaces.com');
const s3 = new aws.S3({
 endpoint: spacesEndpoint
});

// Change bucket property to your Space name
const upload = multer({
 storage: multerS3({
   s3: s3,
   bucket: '',
   acl: 'public-read',
   key: function (request, file, cb) {
     console.log(file);
     cb(null, file.originalname);
   }
 })
}).array('upload', 1);

// Views in public directory
app.use(express.static('public'));

// Main, error and success views
app.get('/', function (request, response) {
 response.sendFile(__dirname + '/public/index.html');
});

app.get("/success", function (request, response) {
 response.sendFile(__dirname + '/public/success.html');
});

app.get("/error", function (request, response) {
 response.sendFile(__dirname + '/public/error.html');
});

app.post('/upload', function (request, response, next) {
 upload(request, response, function (error) {
   if (error) {
     console.log(error);
     return response.redirect("/error");
   }
   console.log('File uploaded successfully.');
   response.redirect("/success");
 });
});

app.listen(3001, function () {
 console.log('Server listening on port 3001.');
});

Beenden Sie den Knotenserver, indem Sie in der Eingabeaufforderung "+ CONTROL " + " C +" eingeben und ihn neu starten, um sicherzustellen, dass die neuen Änderungen übernommen werden.

npm start

Navigieren Sie zum Stammverzeichnis des Projekts, wählen Sie eine Datei aus und senden Sie das Formular. Wenn alles richtig eingerichtet wurde, werden Sie zur Erfolgsseite weitergeleitet, und eine öffentliche Datei ist auf Ihrem DigitalOcean Space verfügbar.

image: https://assets.digitalocean.com/articles/eng javascript / node js-spaces / nodejs-spaces-success.png [Seite zur Bestätigung des Erfolgs nach dem Upload]

Angenommen, die von Ihnen hochgeladene Datei lautet "+ test.txt ", lautet die URL der Datei " https: //. Nyc3.digitaloceanspaces.com / test.txt +".

Häufige Gründe für eine nicht erfolgreiche Transaktion sind falsche Anmeldeinformationen, Anmeldeinformationsdateien am falschen Speicherort oder ein falscher Bucket-Name.

Fazit

Herzlichen Glückwunsch, Sie haben eine Node.js- und Express-Anwendung eingerichtet, um statische Elemente in den Objektspeicher hochzuladen.

Sie können mit dem Code dieser DigitalOcean Spaces Node-App experimentieren, indem Sie remixing the project here.

Zusätzliche Vorkehrungen wie die Authentifizierung müssen getroffen werden, um diese Art von Anwendung in Betrieb zu nehmen. Dies ist jedoch ein guter Ausgangspunkt, um Ihre Web-App mit DigitalOcean Spaces funktionsfähig zu machen. Weitere Informationen zum Speichern von Objekten finden Sie unter Eine Einführung in DigitalOcean Spaces.

Related