TOC

Comment télécharger un fichier sur un stockage d’objets avec Node.js

introduction

Le stockage d’objets est une méthode populaire et évolutive de stockage et de gestion d’actifs statiques tels que l’audio, les images, le texte, les PDF et d’autres types de données non structurées. Les fournisseurs de cloud offrent un stockage objet en plus du stockage local ou par blocs traditionnel, utilisé pour stocker des fichiers d’application dynamiques et des bases de données. Lire Object Storage vs. Bloquer le stockage pour en savoir plus sur les cas d’utilisation et les différences entre les deux.

Spaces est un service de stockage d’objets simple proposé par DigitalOcean. En plus de pouvoir vous connecter, télécharger, gérer et supprimer des fichiers stockés via un panneau de configuration, vous pouvez également accéder à votre espace DigitalOcean via la ligne de commande et l’API Spaces.

Dans ce didacticiel, nous allons créer une application Node.js qui permet à un utilisateur de télécharger un fichier sur son espace DigitalOcean en soumettant un formulaire au front-end d’un site Web.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin de:

  • Un espace DigitalOcean, avec une clé d’accès et une clé d’accès secrète à votre compte. Lisez Comment créer un espace DigitalOcean et une clé API pour être opérationnel avec un Compte DigitalOcean, créez un espace, puis configurez une clé et un secret d’API.

  • Node.js et npm installés sur votre ordinateur. Vous pouvez visiter les Node.js Téléchargements pour installer la version adaptée à votre système d’exploitation.

Vous devriez maintenant avoir un compte DigitalOcean, un espace avec une clé d’accès et Node.js et npm installés sur votre ordinateur.

Ajouter des clés d’accès au fichier d’informations d’identification

DigitalOcean Spaces est compatible avec l’API Amazon Simple Storage Service (S3) et nous utiliserons https://aws.amazon.com/sdk-for-node. -js / [AWS SDK for JavaScript dans Node.js] pour se connecter à l’espace que nous avons créé.

La première étape consiste à créer un fichier * credentials *, afin de placer la clé d’accès et la clé d’accès secrète obtenues lors de la création de votre espace DigitalOcean. Le fichier se trouvera sous * + ~ / .aws / credentials + * sous Mac et Linux, ou * + C: \ Utilisateurs \ USERNAME \ .aws \ credentials + * sous Windows. Si vous avez déjà enregistré les informations d’identification AWS, vous pouvez en savoir plus sur https://aws.amazon.com/blogs/security/a-new-and-standardized-way-towmanagement-credentials-in-the-aws-sdks/. [en conservant plusieurs informations d’identification] pour plus de précisions.

Ouvrez votre invite de commande, assurez-vous que vous vous trouvez dans votre répertoire * Users *, accédez à un utilisateur administratif + sudo + et créez le répertoire * + .aws + * avec le fichier * + informations d’identification + *.

sudo mkdir .aws && touch .aws/credentials

Ouvrez le fichier et collez le code suivant à l’intérieur en remplaçant les mots «+ votre_access_key » et « votre_secret_key +» par vos clés respectives.

identifiants

[default]
aws_access_key_id=
aws_secret_access_key=

Désormais, votre accès aux espaces via le kit AWS SDK sera authentifié et nous pourrons passer à la création de l’application.

Installer les dépendances Node.js

Pour commencer, créez un répertoire dans lequel vous souhaitez placer votre application Node.js et accédez au répertoire. Pour cette démonstration, nous allons créer notre projet dans * + spaces-node-app * dans le répertoire *` + sites ou` *.

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

Créez un nouveau fichier * + package.json * pour votre projet. Collez le code ci-dessous dans le fichier.

package.json

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

Il s’agit d’un fichier de base + package.json contenant le nom, le numéro de version et la licence de notre application. Le champ + scripts + nous permettra d’exécuter un serveur Node.js en tapant + npm start + au lieu de + node server.js +.

Nous allons installer toutes nos dépendances avec la commande + npm install +, suivie du nom des quatre dépendances de notre projet.

npm install aws-sdk express multer multer-s3

Après avoir exécuté cette commande, le fichier + package.json doit être mis à jour. Ces dépendances nous aideront à nous connecter à l’API DigitalOcean Spaces, à créer un serveur Web et à gérer les téléchargements de fichiers.

Maintenant que l’emplacement du projet et les dépendances sont configurés, nous pouvons configurer le serveur et les vues frontales.

Créer le frontal de l’application

Commençons par créer des fichiers pour les vues publiques de notre application. C’est ce que l’utilisateur verra au début. Créez un répertoire * public * dans votre projet, avec + index.html,` + success.html` et + error.html. Ces trois fichiers auront le squelette HTML ci-dessous, avec des contenus différents dans le + body +. Écrivez le code suivant dans chaque fichier.

<!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>

Ecrivez un message d’erreur dans le + body de` + error.html`.

error.html

...

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

...

Écrivez un message de réussite dans le + body de` + success.html`.

success.html

...

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

...

Dans + index.html +, nous allons créer un HTML + form + avec + multipart / form-data +. Il consistera en un simple téléchargement de fichier + input et un bouton d’envoi.

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>

...

Enfin, créons + style.css et ajoutons juste assez de CSS pour rendre l’application facile à lire.

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;
}

Avec ces trois fichiers, nous avons un formulaire de téléchargement qui constitue la page principale de notre petite application, et nous avons des pages de succès et d’erreurs pour l’utilisateur.

Configurer un environnement Express Server

Nous avons créé tous les fichiers pour le front-end de notre application, mais nous n’avons actuellement pas de serveur configuré ni de moyen de les visualiser. Nous allons configurer un serveur de nœud avec l’infrastructure Web Express.

Dans le répertoire racine du projet, créez un fichier + server.js +. Au sommet, chargez nos quatre dépendances avec + require () +. Nous acheminerons notre application via l’instance + app + de + 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();

Notre serveur frontal se trouve dans le répertoire + public +, donc définissez cette configuration sous les dépendances.

server.js

...

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

Nous acheminerons + index.html +, + success.html + et + error.html + par rapport à la racine du serveur.

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');
});

Enfin, nous indiquerons au serveur le port sur lequel écouter. Dans cet exemple, + 3001 + est utilisé, mais vous pouvez le définir sur n’importe quel port disponible.

server.js

...

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

Enregistrez + server.js + et démarrez le serveur. Vous pouvez le faire en exécutant + node server.js +, ou avec + npm start +, le raccourci que nous avons défini dans + package.json +.

npm start
Output> node server.js

Server listening on port 3001.

Accédez à + ​​http: // localhost: 3001 + et vous verrez le formulaire de téléchargement, car nous avons défini + index.html + comme étant la racine du serveur.

image: https: //assets.digitalocean.com/articles/eng_javascript/nodejs-spaces/upload-form.png [Formulaire d’envoi de DigitalOcean Spaces Node.js]

Vous pouvez également naviguer vers + http: // localhost: 3001 / success et` + http: // localhost: 3001 / error` pour vous assurer que ces pages sont correctement routées.

Télécharger un fichier dans un espace avec Multer

Maintenant que notre environnement de serveur est opérationnel et fonctionne correctement, la dernière étape consiste à intégrer le formulaire à Multer et Multer S3 afin de transférer un fichier dans Spaces.

Vous pouvez utiliser + new aws.S3 () + pour vous connecter au client Amazon S3. Pour une utilisation avec DigitalOcean Spaces, nous devons définir un nouveau point de terminaison afin de s’assurer qu’il est chargé au bon endroit. Au moment de la rédaction de ce document, + nyc3 + est la seule région disponible pour les espaces.

Dans + server.js +, faites défiler vers le haut et collez le code suivant sous les déclarations de constante.

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
});

En utilisant l’exemple de la documentation multer-s3, nous allons créer une fonction + upload +, en définissant la propriété + bucket + avec votre nom d’espace unique. Si vous définissez + acl sur` + public-read i`, votre fichier sera accessible au public; laisser ce champ vide sera privé par défaut, rendant les fichiers inaccessibles depuis le Web

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);

La fonction + upload + est terminée et notre dernière étape consiste à connecter le formulaire de téléchargement avec le code pour envoyer le fichier et acheminer l’utilisateur en conséquence. Faites défiler jusqu’au bas de + server.js +, et collez ce code juste au-dessus de la méthode + app.listen () + à la fin du fichier.

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");
 });
});

Lorsque l’utilisateur clique sur Soumettre, une demande POST passe par + / upload. Le nœud écoute ce POST et appelle la fonction + upload () +. Si une erreur est détectée, l’instruction conditionnelle redirige l’utilisateur vers la page + / error. S’il réussit, l’utilisateur sera redirigé vers la page + / success + et le fichier sera chargé sur votre espace.

Voici le code complet pour + 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.');
});

Arrêtez le serveur de nœud en tapant + CONTROL + + + + C + `dans l’invite de commande et redémarrez-le pour vous assurer que les nouvelles modifications sont appliquées.

npm start

Accédez à la racine du projet, sélectionnez un fichier et soumettez le formulaire. Si tout a été configuré correctement, vous serez redirigé vers la page de réussite et un fichier public sera disponible sur votre espace DigitalOcean.

image: https: //assets.digitalocean.com/articles/fr javascript / node js-spaces / nodejs-spaces-success.png [Page de confirmation de la réussite après le téléchargement]

En supposant que le fichier que vous avez chargé était + test.txt +, l’URL du fichier sera + https: //. Nyc3.digitaloceanspaces.com / test.txt +.

Les raisons courantes d’une transaction infructueuse sont les informations d’identification incorrectes, un fichier d’informations d’identification au mauvais emplacement ou un nom de compartiment incorrect.

Conclusion

Félicitations, vous avez configuré une application Node.js et Express pour télécharger des actifs statiques sur le stockage d’objets!

Vous pouvez jouer avec le code de cette application de nœud DigitalOcean Spaces en remixing the project here.

Des précautions supplémentaires, telles que l’authentification, doivent être prises pour mettre ce type d’application en production, mais il s’agit d’un bon point de départ pour rendre votre application Web fonctionnelle avec DigitalOcean Spaces. Pour plus d’informations sur le stockage d’objets, consultez Introduction aux espaces DigitalOcean.

Related