Déplacer les données vers le cloud est devenu une pratique de facto lors du déploiement d'applications Web et mobiles. Les infrastructures en nuage telles qu'Amazon AWS et Google Cloud permettent de garder les données disponibles et accessibles - ce que les développeurs recherchent. Contrairement à d'autres types de données, le stockage d'images et d'autres médias dans le cloud présente des avantages supplémentaires. Cela comprend l'optimisation et la manipulation côté serveur, la diffusion en temps réel des médias et une livraison plus rapide. Cet article vous explique comment transférer des images dans le cloud et optimiser à la volée en utilisant deux techniques de cloud populaires.

Méthode One of Two:
Utiliser AWS S3 et Lambda

  1. 1 Configurer AWS S3. Commencez par configurer votre compartiment AWS S3 si vous n'en avez pas encore créé. Amazon S3 vous permet de stocker n'importe quelle quantité de données et jusqu'à 5 Go gratuitement. Consultez l'article sur le téléchargement sur Amazon S3 pour configurer et configurer votre compte AWS S3. Une fois que vous avez fini avec cela, créez deux dossiers dans votre compartiment, et nommez-les originaux et redimensionnés. Comme son nom l'indique, le répertoire d'origine stocke l'image d'origine, tandis que le répertoire redimensionné stocke l'image redimensionnée.
  2. 2 Écrivez le code d'optimisation. Nous allons utiliser async, aws-sdk, gm, et chemin libs pour le code d'optimisation démo. Vous devrez d'abord installer le noeud et toutes les dépendances, puis copier le code suivant dans imageResizer.js. 
     // dépendances var async = exiger('async'); var AWS = exiger('aws-sdk'); var gm = exiger('gm') .sous-classe( imageMagick: vrai ); // Activer l'intégration d'ImageMagick. var util = exiger('util'); var chemin = exiger('chemin'); // constantes var WEB_WIDTH_MAX = 150; var WEB_HEIGHT_MAX = 150; var imageResponse; // référence le client S3  var s3 = Nouveau AWS.S3(); exportations.gestionnaire = fonction(un événement, le contexte, rappeler)  // Lire les options de l'événement. console.bûche("Options de lecture de l'événement:\ n", util.inspecter(un événement, profondeur: 5)); var srcBucket = un événement.Des dossiers[0].s3.seau.prénom; // La clé d'objet peut avoir des espaces ou des caractères non-ASCII unicode. var srcKey = decodeURIComponent(un événement.Des dossiers[0].s3.objet.clé.remplacer(/ \ + / g, " ")); // var dstBucket = srcBucket + "-resized"; var imageName=chemin.nom de base(srcKey); var dstBucket = srcBucket; var imageResponse ; // Inférer le type d'image. var typeMatch = srcKey.rencontre(/\.([^.]*)$/); si (!typeMatch)  rappeler("Impossible de déterminer le type d'image."); revenir;  var type d'image = typeMatch[1]; si (type d'image.toUpperCase() != "jpg".toUpperCase() && type d'image.toUpperCase() != "png".toUpperCase() && type d'image.toUpperCase() != "jpeg".toUpperCase())  rappeler('Type d'image non pris en charge: $ imageType'); revenir;  fonction uploadWebMax(réponse, tampon, prochain)  // Diffuse l'image transformée dans un autre compartiment S3. var dstKeyResized = "redimensionné /"+imageName; s3.putObject( Seau: dstBucket, Clé: dstKeyResized, Corps: tampon, ContentType: réponse.ContentType , fonction(se tromper, Les données)  si (se tromper)  console.bûche(se tromper, se tromper.empiler); autre console.bûche('téléchargé sur web-max avec succès !!'); prochain(nul, réponse, tampon);  );
  3. 3 Configurer AWS Lambda. Ensuite, vous devez vous connecter à la console AWS et sélectionner Lambda dans les services. Sur la page Lambda, sélectionnez le bouton "créer la fonction lambda".
  4. 4 Créez une fonction Lambda pour optimiser les images. Vous serez invité à sélectionner un plan. Cliquez sur la fonction vide.
    • Configurez le déclencheur. Vous serez invité à ajouter un déclencheur qui invoquera la fonction lambda. Choisissez S3 ici.
    • Sélectionnez le seau que nous avons créé précédemment. Définissez le type d'événement sur Object created (All) et le préfixe sur original /. Appuyez sur suivant.
    • Choisissez un nom de fonction. Sélectionnez zip pour l'entrée de code et utilisez le téléchargement du fichier zip créé précédemment. L'option en ligne alternative peut utiliser s'il n'y a pas de dépendances.
  5. 5 Configurez les rôles IAM. Vous devez maintenant renseigner le nom du gestionnaire et le rôle IAM pour Lambda. Dans le champ «Gestionnaire et rôle de la fonction Lambda», remplacez le nom du gestionnaire par imageResizer.js. Le nom du fichier js dans notre fichier zip et le gestionnaire doit correspondre. Dans l'onglet Roles, sélectionnez le rôle personnalisé de l'option. Vous pouvez définir de nouveaux rôles et ajouter une stratégie ici.
  6. 6 Terminé. Depuis l'écran final, appuyez sur le bouton de fonction de création. Félicitations, vous avez créé avec succès une fonction lambda qui optimise une image et la déplace ensuite dans le dossier redimensionné. Vous pouvez POSTER de nouvelles images dans le compartiment d'origine et extraire la version redimensionnée de l'image à partir du compartiment redimensionné.

Méthode deux sur deux:
Utiliser Cloudinary et Node.js

  1. 1 Configurez et configurez votre compte. Semblable à celle de S3, Cloudinary dispose d'un plan de niveaux gratuit que vous pouvez utiliser. Une fois que vous êtes connecté, notez le cloud_name, clé API, et le api_secret.
  2. 2 Ajoutez la bibliothèque cloudinaire à votre projet. Nous allons créer un exemple de projet Node.js pour montrer comment cela fonctionne. Installez node.js si vous ne l'avez pas déjà fait. Ensuite, créez un répertoire pour ce projet et installez les dépendances à l'aide de npm. 
     npm installer cloudinary
  3. 3 Configurez les informations d'identification. Importez les dépendances dans votre projet de noeud et configurez les informations d'identification que vous avez notées à l'étape 1. 
     cloudinary.config( cloud_name: 'échantillon', clé API: '874837483274837', api_secret: 'a676b67565c6767a6767d6767f676fe1' );
  4. 4 Créer une fonction de téléchargement. Ecrivez une fonction de téléchargement qui effectue une requête asynchrone sur le serveur cloud. Nous allons utiliser une image statique, mais pour des raisons pratiques, la fonction de téléchargement sera appelée sur la soumission du formulaire. Vous pouvez également télécharger à la volée depuis le client en effectuant un appel AJAX. Vous pouvez en savoir plus sur le téléchargement de fichiers AJAX sur leur page de documentation. 
     fonction télécharger(fichier, options, rappeler)  cloudinary.v2.téléchargeur.télécharger("/home/my_image.jpg", fonction(Erreur, résultat) console.bûche(résultat));
  5. 5 Comprendre la réponse du serveur. Cloudinary assigne un identifiant public et une URL que vous pouvez utiliser pour référencer la ressource téléchargée. Puisque le pubic_id est synonyme du nom de l'image, vous pouvez définir le nom_public lors du téléchargement de l'image. Une fois que vous avez terminé le téléchargement du fichier, vous obtenez un objet de retour qui ressemble à ceci: 
      public_id: 'cr4mxeqx5zb8rlakpfkg', version: 1372275963, Signature: '63bfbca643baa9c86b7d2921d776628ac83a1b6e', largeur: 864, la taille: 576, format: 'jpg', type de ressource: 'image', créé à: '2017-06-26T19: 46: 03Z', octets: 120253, type: 'télécharger', URL: 'https://res.cloudinary.com/demo/image/upload/v1372275963/cr4mxeqx5zb8rlakpfkg.jpg', secure_url: 'https://res.cloudinary.com/demo/image/upload/v1372275963/cr4mxeqx5zb8rlakpfkg.jpg'
  6. 6 Optimiser l'image: Pour optimiser l'image, il existe plusieurs manières de le faire, à l'aide de l'URL ou de la bibliothèque cloudinary.
    • Optimisation de l'image à l'aide de l'URL. Vous pouvez modifier la taille, la dimension, la qualité et de nombreuses autres propriétés de l'image en envoyant une demande à l'URL de l'image réelle. Les images transformées sont créées à la demande et renvoyées à votre serveur de noeud. Voici un exemple d'optimisation d'image en action: 
       https://res.cloudinary.com/demo/image/upload/q_60/sample.jpg
    • Optimisation de l'image en utilisant la méthode de bibliothèque. Vous pouvez également utiliser la méthode de la bibliothèque pour effectuer la transformation. Le premier argument est l'identifiant public de l'image et un second paramètre est un objet comprenant les paramètres d'optimisation. 
       cloudinary.image ("sample.jpg", quality: 50)
  7. 7 C'est tout. Vous disposez d'une solution de manipulation d'images à la volée entièrement intégrée à votre application de noeud.