El comercio sin cabeza ha existido durante mucho tiempo y Medusa es una de las mejores herramientas para ofrecer componentes modulares. La arquitectura componible de Medusa le permite crear una tienda con cualquier marco o idioma de su elección, lo que proporciona una capacidad de personalización completa. Medusa también le permite crear una experiencia de comercio electrónico única al proporcionar un conjunto de herramientas y componentes esenciales que los desarrolladores pueden agregar para crear un poderoso sitio web de comercio electrónico. Ofrece funciones listas para usar, como gestión de clientes, productos, envíos, impuestos y regiones, y RMA Flow. En el tutorial de hoy, aprenderá cómo agregar un complemento de servicio de archivos para poder agregar productos a su tienda Medusa a través del  panel de administración.   que es medusa  Medusa es un conjunto de herramientas de código abierto que le permite crear sitios web de comercio electrónico sorprendentes y confiables. Con más de   , esta solución de comercio sin cabeza viene con un puñado de módulos de comercio, desde básico hasta avanzado, y está disponible gratuitamente. Su   también contribuye a su éxito, ya que hay pautas paso a paso sobre cómo agregar un módulo o complementos. Algunos complementos populares, entre otros, son complementos de pagos, notificaciones, búsqueda y servicio de archivos. 17,800 estrellas y 1,300 bifurcaciones en GitHub documentación bien escrita   ¿Qué es un complemento de servicio de archivos?  Un complemento de servicio de archivos le permite alojar archivos como imágenes utilizadas en Medusa. Es posible que tenga problemas si no usa o configura correctamente un servicio de archivos para su tienda Medusa. Medusa ofrece tres formas diferentes de administrar el almacenamiento de archivos; S3,   y   . Este tutorial se centra únicamente en el almacenamiento de archivos S3 para almacenar imágenes y archivos cargados en Medusa. MinIo Espacios  S3 o Simple Storage Service es un almacenamiento de objetos que se utiliza para almacenar y recuperar cualquier cantidad de datos de cualquier forma y en cualquier momento. Usaremos Amazon S3 para esta demostración.   Cómo subir archivos a tu tienda Medusa  Amazon guarda los datos como objetos dentro de un cubo. Un objeto consiste en un archivo y datos opcionales que lo describen. Para almacenar un archivo, debe cargarlo en un cubo (los cubos son los contenedores de los objetos), una vez cargado, puede   . establecer permisos en el objeto  Ahora vamos a hacer que cargue archivos en sus proyectos de Medusa rápidamente.   requisitos previos    . Un proyecto Medusa se divide básicamente en tres componentes; un escaparate, un panel de administración y un  Una tienda Medusa backend de Medusa  Una  cuenta de AWS  Si tiene todo configurado, siga los pasos a continuación para agregar un complemento de servicio de archivos a su tienda Medusa.   Paso 1: Cree un depósito S3  Inicie sesión en su cuenta de AWS, busque y  seleccione S3  En la página siguiente, haga clic en  Crear depósito  En la ventana que se abre, proporcione la información necesaria para crear su cubo.   Configuración general  Proporcione un nombre a su depósito y deje la región predeterminada o elija otra según sus requisitos.   propiedad del objeto  Para la propiedad, permita que los objetos en el cubo sean propiedad de su cuenta.  En la configuración de Bloquear acceso público, desmarque   todo el acceso público. Al hacer esto, aparecerá un mensaje de advertencia, marque la casilla en el mensaje como en la imagen. Bloquear  En cuanto al control de versiones del depósito, las etiquetas, el cifrado predeterminado y la configuración avanzada, deje la configuración predeterminada o cámbiela según los requisitos de su proyecto y haga clic en   . Crear depósito   Paso 2: Administrar políticas  El siguiente paso consiste en administrar las políticas de depósito creadas. Dirígete a la página de tu depósito y abre la   Luego, desplácese hacia abajo hasta la sección de políticas del depósito, haga clic en editar, agregue el código a continuación y  pestaña de permisos. guarde.   { "Version": "2012-10-17", "Id": "Policy1397632521960", "Statement": [ { "Sid": "Stmt1397633323327", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*" } ] }  Reemplace   con el nombre de su depósito. Aquí está  <YOUR_BUCKET_NAME> medusastorebucket   Paso 3: adjunte una política  En su cuenta, vaya a    IAM y seleccione Gestión de acceso->Políticas en el menú de la izquierda.  Si es la primera vez que elige una política, verá una página de bienvenida a la administración de políticas y seleccione comenzar; de lo contrario, elija  Crear política.  Luego seleccione la pestaña JSON y agregue el siguiente código:   { "Version": "2012-10-17", "Statement" : [ { "Effect" : "Allow", "Action" : [ "action-statement" ], "Resource" : [ "resource-statement" ] }, { "Effect" : "Allow", "Action" : [ "action-statement" ], "Resource" : [ "resource-statement" ] } ] }  Sustituya la   y   según sus requisitos y haga clic en  action-statement resource-statement Next:tag   Más información sobre  políticas y permisos  Las etiquetas son opcionales, por lo que puede omitir este paso y hacer clic en el botón de revisión para revisar su política.  A continuación, proporcione un nombre y una descripción para su política y luego haga clic en  Crear política  Ahora que ha creado su política, debe adjuntarla a un grupo de usuarios, navegar a   y elegir   . Seleccione el nombre del grupo y luego abra la  la consola de Amazon Grupos de usuarios pestaña Permiso  Elija   y luego  Agregar permiso adjunte políticas  En la ventana que se abre, seleccione la política que desea adjuntar y haga clic en Agregar permiso en la parte inferior de la página.   Paso 4: obtenga su clave de acceso  Debe obtener su clave de acceso para integrar el complemento S3 en su proyecto. Necesitarás dos elementos;   y   . Access Key ID Secret Access Key  Para obtener su ID de clave de acceso de AWS y su clave de acceso secreta, diríjase a su   en la navegación de la izquierda y elija  consola de Amazon Usuarios.  Elija su   y abra la    nombre de usuario de IAM pestaña Credenciales de seguridad Desplácese hacia abajo hasta Claves de acceso y haga clic en  Crear clave de acceso  En la siguiente ventana, se le pedirá que elija dónde desea usar la clave de acceso. Marque   si está trabajando en un entorno de desarrollo local.  Código local Al elegir local aparecerá un mensaje de advertencia preguntándote si entiendes la recomendación. Marque la casilla y haga clic en el siguiente botón.  Finalmente, agregue una descripción de etiqueta si desea agregar una y haga clic en  Crear clave de acceso  En la siguiente ventana, verá su clave de acceso y acceso secreto. Cópielo y péguelo en algún lugar de su PC, ya que lo usará en el siguiente paso o descargará el archivo CSV.    Paso 5: Instale el complemento S3  Ahora que configuró su depósito y creó sus claves de acceso, es hora de instalar el complemento S3. Para hacerlo, diríjase a la carpeta backend de Medusa e instálela con el siguiente comando:   yarn add medusa-file-s3  O   npm install medusa-file-s3  Luego abra su archivo   y agregue lo siguiente .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>  Dónde    es la URL de su depósito. Tiene el formato   . Donde   es el nombre de su depósito,   la región. <YOUR_BUCKET_URL> https://<BUCKET_NAME>.s3.<REGION>.amazonaws.com <BUCKET_NAME> <REGION>    es el nombre del depósito creado <YOUR_BUCKET_NAME>    la región de su depósito <YOUR_BUCKET_REGION>  <YOUR_ACCESS_KEY_ID> es su clave de acceso    es su clave secreta <YOUR_SECRET_ACCESS_KEY>  Finalmente, en su   agregue el siguiente código: 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, }, }, ]  Tenga en cuenta que si tiene muchos complementos de almacenamiento configurados, se utilizará el último complemento declarado. Entonces, si desea que se use S3, asegúrese de que sea el último complemento de almacenamiento agregado.   Paso 6: Prueba del complemento  Ahora que ha agregado con éxito su complemento. Es hora de probar para asegurarse de que todo está en el lugar correcto. Puede usar   o Medusa Admin para probar. las API REST  Navegue a sus carpetas de administrador y back-end respectivamente y ejecute el siguiente comando:   // admin yarn run start   // backend yarn run start  El correo electrónico y la contraseña de administrador predeterminados son   y   respectivamente. Abra su panel de administración con  admin@medusa-test.com supersecret http://localhost:7000/  En el menú, haga clic en   y luego   . Proporcione detalles para su producto y publíquelo. Productos en Añadir producto  Por último, debe agregar una configuración en su tienda que agregue el nombre de dominio del depósito S3 a los nombres de dominio de las imágenes configuradas si está utilizando   . Si no lo hace, recibirá el siguiente error   . la tienda NextJS next/image Host no configurado  Entonces, en su   agregue lo siguiente: next.config.js   const { withStoreConfig } = require("./store-config")   // ...module.exports = withStoreConfig({ // ... images: { domains: [ // ... "<BUCKET_NAME>.s3.amazonaws.com", ], }, })    representa el nombre de su depósito. <BUCKET_NAME>  Ejecute su escaparate con   para verificar si los nuevos productos que agregó están allí y continúe con la siguiente fase de su proyecto. yarn run dev   Conclusión  Esto marca el final de este tutorial, con suerte, pudo agregar un complemento de servicio de archivos a su tienda Medusa. Para obtener lo mejor de la herramienta, considere agregar servicios de pago, servicios de búsqueda y notificaciones.

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

Este audio es producido en el idioma original de la historia!

Agregar un complemento de servicio de archivos a su tienda Medusa: una guía esencial

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps