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   , 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   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. 17,8k étoiles et 1,3k forks sur GitHub documentation bien écrite   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,   et   . Ce didacticiel se concentre uniquement sur le stockage de fichiers S3 pour stocker des images et des fichiers téléchargés dans Medusa. MinIo Espaces  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 projet Medusa est essentiellement divisé en trois composants ; une vitrine, un tableau de bord d'administration et un  Un magasin Medusa 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   tous les accès publics. Cela affichera un message d'avertissement, cochez la case dans le message comme dans l'image. Bloquer  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'   Ensuite, faites défiler jusqu'à la section de la politique de compartiment, cliquez sur modifier, ajoutez le code ci-dessous et  onglet d'autorisation. 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   par le nom de votre compartiment. Ici c'est  <YOUR_BUCKET_NAME> 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'   et   selon vos besoins et cliquez sur  action-statement resource-statement 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 à   et choisir   . Sélectionnez le nom du groupe puis ouvrez l'  la console Amazon Groupes d'utilisateurs onglet Autorisation  Choisissez   , puis  Ajouter une autorisation 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;   et   . Access Key ID Secret Access Key  Pour obtenir votre ID de clé d'accès AWS et votre clé d'accès secrète, accédez à votre   dans la navigation de gauche et choisissez  console Amazon Utilisateurs.  Choisissez votre   et ouvrez l'    nom d'utilisateur IAM 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   si vous travaillez dans un environnement de développement local.  Code 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   et ajoutez ce qui suit .env   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ù    est l'URL de votre bucket. Il se présente sous la forme   . Où   est le nom de votre compartiment,   la région. <YOUR_BUCKET_URL> https://<BUCKET_NAME>.s3.<REGION>.amazonaws.com <BUCKET_NAME> <REGION>    est le nom du bucket créé <YOUR_BUCKET_NAME>    la région de votre compartiment <YOUR_BUCKET_REGION>  <YOUR_ACCESS_KEY_ID> est votre clé d'accès    est votre clé secrète <YOUR_SECRET_ACCESS_KEY>  Enfin dans votre   ajoutez le code suivant : medusa-config.js   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   ou l'administrateur Medusa pour tester. les API REST  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   et   . Ouvrez votre panneau d'administration avec  admin@medusa-test.com supersecret http://localhost:7000/  Dans le menu cliquez sur   puis   . Fournissez des détails sur votre produit et publiez-le. Produits Ajouter un produit  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   . Si vous ne le faites pas, vous recevrez l'erreur suivante   . la vitrine NextJS next/image Un-configured Host  Donc, dans votre   ajoutez ce qui suit : next.config.js   const { withStoreConfig } = require("./store-config")   // ...module.exports = withStoreConfig({ // ... images: { domains: [ // ... "<BUCKET_NAME>.s3.amazonaws.com", ], }, })    représente le nom de votre bucket. <BUCKET_NAME>  Exécutez votre vitrine avec   pour vérifier si les nouveaux produits que vous avez ajoutés sont là et passez à la phase suivante de votre projet. yarn run dev   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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Get more from the website

Read My Stories

Newsletter

Buy Me a Coffee

Support Me On Patreon

Cet audio est produit dans la langue originale de l'histoire !

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps