Ajouter un plugin de service de fichiers à votre boutique Medusa : un guide essentiel

Le commerce sans tête existe depuis longtemps, Medusa étant l'un des meilleurs outils pour proposer des composants modulaires. L'architecture composable de Medusa vous permet de créer un magasin avec n'importe quel framework ou langage de votre choix, offrant ainsi une capacité de personnalisation complète. Medusa vous permet également de créer une expérience de commerce électronique unique en fournissant un ensemble d'outils et de blocs de construction essentiels que les développeurs peuvent ajouter pour créer un site Web de commerce électronique puissant. Il offre des fonctionnalités prêtes à l'emploi telles que la gestion des clients, des produits, des expéditions, des taxes et des régions, et RMA Flow. Dans le tutoriel d'aujourd'hui, vous apprendrez comment ajouter un plugin de service de fichiers afin de pouvoir ajouter des produits à votre boutique Medusa via le tableau de bord d'administration

Qu'est-ce que la méduse

Medusa est un ensemble d'outils open source qui vous permettent de créer des sites Web de commerce électronique étonnants et fiables. Avec plus de 17,8k étoiles et 1,3k forks sur GitHub , cette solution de commerce sans tête est livrée avec une poignée de modules de commerce de base à avancé et est disponible gratuitement. Sa documentation bien écrite contribue également à son succès car il existe des directives étape par étape sur la façon d'ajouter un module ou des plugins. Certains plugins populaires, entre autres, sont les paiements, les notifications, les plugins de recherche et de service de fichiers.

Qu'est-ce qu'un plugin de service de fichiers

Un plugin de service de fichiers vous permet d'héberger des fichiers comme les images utilisées dans Medusa. Vous pouvez rencontrer des problèmes si vous n'utilisez pas ou ne configurez pas correctement un service de fichiers pour votre boutique Medusa. Medusa propose trois manières différentes de gérer le stockage des fichiers ; S3, MinIo et Espaces . Ce didacticiel se concentre uniquement sur le stockage de fichiers S3 pour stocker des images et des fichiers téléchargés dans Medusa.

S3 ou Simple Storage Service est un stockage d'objets utilisé pour stocker et récupérer n'importe quelle quantité de données de n'importe où et à tout moment. Nous utiliserons Amazon S3 pour cette démonstration.

Comment télécharger des fichiers dans votre boutique Medusa

Amazon conserve les données sous forme d'objets dans un compartiment. Un objet se compose d'un fichier et de données facultatives qui le décrivent. Pour stocker un fichier, vous devez le télécharger dans un bucket (les buckets sont les conteneurs des objets), une fois téléchargé, vous pouvez définir des autorisations sur l'objet .

Nous allons maintenant vous permettre de télécharger rapidement des fichiers dans vos projets Medusa.

Conditions préalables

• Un magasin Medusa . Un projet Medusa est essentiellement divisé en trois composants ; une vitrine, un tableau de bord d'administration et un backend Medusa
• Un compte AWS

Si vous avez tout configuré, suivez les étapes ci-dessous pour ajouter un plugin de service de fichiers à votre boutique Medusa.

Étape 1 : créer un compartiment S3

Connectez-vous à votre compte AWS, recherchez et sélectionnez S3

Dans la page suivante, cliquez sur Créer un bucket

Dans la fenêtre qui s'ouvre, fournissez les informations nécessaires à la création de votre bucket.

Paramétrage général

Donnez un nom à votre compartiment et laissez la région par défaut ou choisissez-en une autre selon vos besoins.

Propriété de l'objet

Pour la propriété, autorisez les objets du bucket à appartenir à votre compte.

Dans les paramètres Bloquer l'accès public, décochez Bloquer tous les accès publics. Cela affichera un message d'avertissement, cochez la case dans le message comme dans l'image.

En ce qui concerne la gestion des versions du bucket, les balises, le chiffrement par défaut et les paramètres avancés, laissez les paramètres par défaut ou modifiez-les en fonction des exigences de votre projet et cliquez sur Create bucket .

Étape 2 : Gérer les politiques

L'étape suivante consiste à gérer vos stratégies de compartiment créées. Rendez-vous sur la page de votre compartiment et ouvrez l' onglet d'autorisation. Ensuite, faites défiler jusqu'à la section de la politique de compartiment, cliquez sur modifier, ajoutez le code ci-dessous et Enregistrer.

 { "Version": "2012-10-17", "Id": "Policy1397632521960", "Statement": [ { "Sid": "Stmt1397633323327", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*" } ] }

Remplacez <YOUR_BUCKET_NAME> par le nom de votre compartiment. Ici c'est medusastorebucket

Étape 3 : Joindre une politique

Dans votre compte, accédez à IAM et sélectionnez Gestion des accès->Politiques dans le menu de gauche.

Si c'est la première fois que vous choisissez une politique, vous verrez une page Bienvenue dans la gestion des politiques et sélectionnez Commencer, sinon choisissez Créer une politique.

Sélectionnez ensuite l'onglet JSON et ajoutez le code suivant :

 { "Version": "2012-10-17", "Statement" : [ { "Effect" : "Allow", "Action" : [ "action-statement" ], "Resource" : [ "resource-statement" ] }, { "Effect" : "Allow", "Action" : [ "action-statement" ], "Resource" : [ "resource-statement" ] } ] }

Remplacez l' action-statement et resource-statement selon vos besoins et cliquez sur Next:tag

En savoir plus sur les politiques et les autorisations

Les balises sont facultatives, vous pouvez donc ignorer cette étape et cliquer sur le bouton de révision pour revoir votre politique.

Ensuite, fournissez un nom et une description pour votre politique, puis cliquez sur Créer une politique

Maintenant que vous avez créé votre politique, vous devez l'attacher à un groupe d'utilisateurs, accéder à la console Amazon et choisir Groupes d'utilisateurs . Sélectionnez le nom du groupe puis ouvrez l' onglet Autorisation

Choisissez Ajouter une autorisation , puis attachez des stratégies

Dans la fenêtre qui s'ouvre, sélectionnez la politique que vous souhaitez attacher et cliquez sur ajouter une autorisation en bas de la page.

Étape 4 : Obtenez votre clé d'accès

Vous devez obtenir votre clé d'accès afin d'intégrer le plugin S3 dans votre projet. Vous aurez besoin de deux éléments; Access Key ID et Secret Access Key .

Pour obtenir votre ID de clé d'accès AWS et votre clé d'accès secrète, accédez à votre console Amazon dans la navigation de gauche et choisissez Utilisateurs.

Choisissez votre nom d'utilisateur IAM et ouvrez l' onglet Informations d'identification de sécurité

Faites défiler jusqu'à Clés d'accès et cliquez sur Créer une clé d'accès

Dans la fenêtre suivante, il vous sera demandé de choisir où vous souhaitez utiliser la clé d'accès. Cochez Code local si vous travaillez dans un environnement de développement local.

En choisissant local, un message d'avertissement apparaîtra vous demandant si vous comprenez la recommandation. Cochez la case et cliquez sur le bouton suivant.

Enfin, ajoutez une description de balise si vous souhaitez en ajouter une et cliquez sur Créer une clé d'accès

Dans la fenêtre suivante, vous verrez votre clé d'accès et d'accès secret. Veuillez le copier et le coller quelque part sur votre PC car vous l'utiliserez à l'étape suivante ou téléchargerez le fichier CSV.

Étape 5 : Installez le plug-in S3

Maintenant que vous avez configuré votre bucket et créé vos clés d'accès, il est temps d'installer le plugin S3. Pour ce faire, dirigez-vous vers votre dossier backend Medusa et installez-le avec la commande suivante :

 yarn add medusa-file-s3

Ou

 npm install medusa-file-s3

Ouvrez ensuite votre fichier .env et ajoutez ce qui suit

 S3_URL=<YOUR_BUCKET_URL> S3_BUCKET=<YOUR_BUCKET_NAME> S3_REGION=<YOUR_BUCKET_REGION> S3_ACCESS_KEY_ID=<YOUR_ACCESS_KEY_ID> S3_SECRET_ACCESS_KEY=<YOUR_SECRET_ACCESS_KEY>

Où

• <YOUR_BUCKET_URL> est l'URL de votre bucket. Il se présente sous la forme https://<BUCKET_NAME>.s3.<REGION>.amazonaws.com . Où <BUCKET_NAME> est le nom de votre compartiment, <REGION> la région.
• <YOUR_BUCKET_NAME> est le nom du bucket créé
• <YOUR_BUCKET_REGION> la région de votre compartiment
• <YOUR_ACCESS_KEY_ID> est votre clé d'accès
• <YOUR_SECRET_ACCESS_KEY> est votre clé secrète

Enfin dans votre medusa-config.js ajoutez le code suivant :

 const plugins = [ // ... { resolve: `medusa-file-s3`, options: { s3_url: process.env.S3_URL, bucket: process.env.S3_BUCKET, region: process.env.S3_REGION, access_key_id: process.env.S3_ACCESS_KEY_ID, secret_access_key: process.env.S3_SECRET_ACCESS_KEY, }, }, ]

Notez que si vous avez plusieurs plugins de stockage configurés, alors le dernier plugin déclaré sera utilisé. Donc, si vous voulez que S3 soit utilisé, assurez-vous qu'il s'agit du dernier plugin de stockage ajouté.

Étape 6 : Tester le plugin

Maintenant que vous avez ajouté votre plugin avec succès. Il est temps de tester pour s'assurer que tout est au bon endroit. Vous pouvez utiliser les API REST ou l'administrateur Medusa pour tester.

Accédez à vos dossiers admin et backend respectivement et exécutez la commande suivante :

 // admin yarn run start

 // backend yarn run start

L'e-mail et le mot de passe par défaut de l'administrateur sont respectivement [email protected] et supersecret . Ouvrez votre panneau d'administration avec http://localhost:7000/

Dans le menu cliquez sur Produits puis Ajouter un produit . Fournissez des détails sur votre produit et publiez-le.

Enfin, vous devez ajouter une configuration dans votre vitrine qui ajoute le nom de domaine du compartiment S3 dans les noms de domaine des images configurées si vous utilisez la vitrine NextJS . Si vous ne le faites pas, vous recevrez l'erreur suivante next/image Un-configured Host .

Donc, dans votre next.config.js ajoutez ce qui suit :

 const { withStoreConfig } = require("./store-config")

 // ...module.exports = withStoreConfig({ // ... images: { domains: [ // ... "<BUCKET_NAME>.s3.amazonaws.com", ], }, })

<BUCKET_NAME> représente le nom de votre bucket.

Exécutez votre vitrine avec yarn run dev pour vérifier si les nouveaux produits que vous avez ajoutés sont là et passez à la phase suivante de votre projet.

Conclusion

Ceci marque la fin de ce didacticiel. Nous espérons que vous avez pu ajouter un plug-in de service de fichiers à votre boutique Medusa. Pour tirer le meilleur parti de l'outil, pensez à ajouter des services de paiement, de recherche et de notifications.