O comércio sem cabeça já existe há muito tempo, sendo a Medusa uma das melhores ferramentas para oferecer componentes modulares. A arquitetura combinável da Medusa permite que você crie uma loja com qualquer estrutura ou linguagem de sua escolha, fornecendo assim uma capacidade de personalização completa. A Medusa também permite que você crie uma experiência única de comércio eletrônico, fornecendo um conjunto de ferramentas e blocos de construção essenciais que os desenvolvedores podem adicionar para criar um poderoso site de comércio eletrônico. Ele oferece recursos prontos para uso, como cliente, produto, remessa, gerenciamento de impostos e região e RMA Flow. No tutorial de hoje, você aprenderá como adicionar um plug-in de serviço de arquivos para poder adicionar produtos à sua loja Medusa por meio do  painel de administração   o que é Medusa  Medusa é um conjunto de ferramentas de código aberto que permite criar sites de comércio eletrônico incríveis e confiáveis. Com mais de   , esta solução de comércio sem cabeça vem com vários módulos de comércio, do básico ao avançado, e está disponível gratuitamente. Sua   também contribui para seu sucesso, pois há orientações passo a passo sobre como adicionar um módulo ou plugins. Alguns plugins populares, entre outros, são pagamentos, notificações, pesquisa e plugins de serviços de arquivos. 17,8 mil estrelas e 1,3 mil forks no GitHub documentação bem escrita   O que é um plug-in de serviço de arquivo  Um plug-in de serviço de arquivo permite hospedar arquivos como imagens usadas no Medusa. Você pode enfrentar problemas se não usar ou configurar um serviço de arquivo para sua loja Medusa corretamente. A Medusa oferece três maneiras diferentes de gerenciar o armazenamento de arquivos; S3,   e   . Este tutorial se concentra exclusivamente no armazenamento de arquivos S3 para armazenar imagens e arquivos carregados no Medusa. MinIo Espaços  S3 ou Simple Storage Service é um armazenamento de objeto usado para armazenar e recuperar qualquer quantidade de dados de qualquer maneira e a qualquer momento. Usaremos o Amazon S3 para esta demonstração.   Como fazer upload de arquivos em sua loja Medusa  A Amazon mantém os dados como objetos dentro de um balde. Um objeto consiste em um arquivo e dados opcionais que o descrevem. Para armazenar um arquivo, você precisa carregá-lo em um balde (Baldes são os recipientes para objetos), uma vez carregado, você pode   . definir permissões no objeto  Agora vamos fazer upload de arquivos em seus projetos Medusa rapidamente.   Pré-requisitos    . Um projeto Medusa é basicamente dividido em três componentes; uma vitrine, um painel de administração e um  Uma loja Medusa Medusa Backend  Uma  conta da AWS  Se você tiver tudo configurado, siga as etapas abaixo para adicionar um plug-in de serviço de arquivo à sua loja Medusa.   Etapa 1: criar um balde S3  Faça login na sua conta da AWS, pesquise e  selecione S3  Na próxima página, clique em  Criar balde  Na janela que se abre, forneça as informações necessárias para criar seu bucket.   Configuração Geral  Forneça um nome para seu bucket e deixe a região padrão ou escolha outra de acordo com seus requisitos.   Propriedade do objeto  Para propriedade, permita que os objetos no bucket sejam propriedade de sua conta.  Nas configurações de Bloquear acesso público, desmarque   todo acesso público. Ao fazer isso, uma mensagem de aviso será exibida, marque a caixa na mensagem, como na imagem. Bloquear  Quanto ao controle de versão do bucket, tags, criptografia padrão e configurações avançadas, deixe as configurações padrão ou altere-as de acordo com os requisitos do seu projeto e clique em   . Create bucket   Etapa 2: gerenciar políticas  A próxima etapa consiste em gerenciar suas políticas de bucket criadas. Vá para a página do seu balde e abra a   Em seguida, role para baixo até a seção de política de balde, clique em editar, adicione o código abaixo e  guia de permissão. salve.   { "Version": "2012-10-17", "Id": "Policy1397632521960", "Statement": [ { "Sid": "Stmt1397633323327", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*" } ] }  Substitua   pelo nome do seu intervalo. Aqui é  <YOUR_BUCKET_NAME> medusastorebucket   Etapa 3: anexar uma política  Em sua conta, navegue até    IAM e selecione Gerenciamento de acesso->Políticas no menu à esquerda.  Se esta for a primeira vez que você escolhe uma política, você verá uma página Bem-vindo à página Gerenciar políticas e selecione começar, caso contrário, escolha  Criar política.  Em seguida, selecione a guia JSON e adicione o seguinte código:   { "Version": "2012-10-17", "Statement" : [ { "Effect" : "Allow", "Action" : [ "action-statement" ], "Resource" : [ "resource-statement" ] }, { "Effect" : "Allow", "Action" : [ "action-statement" ], "Resource" : [ "resource-statement" ] } ] }  Substitua a   e   de acordo com sua necessidade e clique em  action-statement resource-statement Next:tag   Saiba mais sobre  políticas e permissões  As tags são opcionais, então você pode pular esta etapa e clicar no botão de revisão para revisar sua política.  Em seguida, forneça um nome e uma descrição para sua política e clique em  Criar política  Agora que você criou sua política, você precisa anexá-la a um grupo de usuários, navegar até   e escolher   . Selecione o nome do grupo e abra a  o console da Amazon Grupos de usuários guia Permissão  Escolha   e, em seguida  Adicionar permissão , anexe políticas  Na janela que se abre, selecione a política que deseja anexar e clique em adicionar permissão na parte inferior da página.   Etapa 4: obtenha sua chave de acesso  Você precisa obter sua chave de acesso para integrar o Plugin S3 em seu projeto. Você precisará de dois elementos;   e   . Access Key ID Secret Access Key  Para obter o ID da chave de acesso da AWS e a chave de acesso secreta, acesse o   na navegação à esquerda e escolha  console da Amazon Usuários.  Escolha seu   e abra a    nome de usuário IAM guia Credenciais de segurança Role para baixo até Chaves de acesso e clique em  Criar chave de acesso  Na próxima janela, você será solicitado a escolher onde deseja usar a chave de acesso. Marque   se estiver trabalhando em um ambiente de desenvolvimento local.  Código local Ao escolher local aparecerá uma mensagem de aviso perguntando se você entendeu a recomendação. Marque a caixa e clique no próximo botão.  Finalmente, adicione uma descrição de tag se você quiser adicionar uma e clique em  Criar chave de acesso  Na próxima janela, você verá sua chave de acesso e acesso secreto. Por favor, copie e cole em algum lugar do seu PC, pois você o usará na próxima etapa ou baixe o arquivo CSV.    Etapa 5: instalar o plug-in S3  Agora que você configurou seu bucket e criou suas chaves de acesso, é hora de instalar o plug-in S3. Para fazer isso, vá para a pasta de back-end da Medusa e instale-a com o seguinte comando:   yarn add medusa-file-s3  Ou   npm install medusa-file-s3  Em seguida, abra seu arquivo   e adicione o seguinte .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>  Onde    é a URL do seu bucket. Ele está no formato   . Onde   é o nome do seu bucket,   a região. <YOUR_BUCKET_URL> https://<BUCKET_NAME>.s3.<REGION>.amazonaws.com <BUCKET_NAME> <REGION>    é o nome do bucket criado <YOUR_BUCKET_NAME>    a região do seu bucket <YOUR_BUCKET_REGION>  <YOUR_ACCESS_KEY_ID> é sua chave de acesso    é sua chave secreta <YOUR_SECRET_ACCESS_KEY>  Por fim, em seu   adicione o seguinte 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, }, }, ]  Observe que se você tiver muitos plug-ins de armazenamento configurados, o último plug-in declarado será usado. Portanto, se você deseja que o S3 seja usado, certifique-se de que seja o último plug-in de armazenamento adicionado.   Passo 6: Testando o Plugin  Agora que você adicionou seu plugin com sucesso. É hora de testar para ter certeza de que tudo está no lugar certo. Você pode usar   ou o Medusa Admin para testar. APIs REST  Navegue até as pastas admin e back-end, respectivamente, e execute o seguinte comando:   // admin yarn run start   // backend yarn run start  O e-mail e a senha padrão do administrador são   e   , respectivamente. Abra seu painel de administração com  admin@medusa-test.com supersecret http://localhost:7000/  No menu, clique em   e em   . Forneça detalhes do seu produto e publique-o. Produtos Adicionar Produto  Por fim, você precisa adicionar uma configuração em sua vitrine que inclua o nome de domínio do bucket S3 nos nomes de domínio das imagens configuradas se estiver usando   . Se você não fizer isso, receberá o seguinte erro   . a vitrine NextJS next/image Un-configured Host  Portanto, em seu   adicione o seguinte: next.config.js   const { withStoreConfig } = require("./store-config")   // ...module.exports = withStoreConfig({ // ... images: { domains: [ // ... "<BUCKET_NAME>.s3.amazonaws.com", ], }, })    representa o nome do seu intervalo. <BUCKET_NAME>  Execute sua vitrine com   para verificar se os novos produtos que você adicionou estão lá e prossiga para a próxima fase do seu projeto. yarn run dev   Conclusão  Isso marca o fim deste tutorial, esperamos que você tenha conseguido adicionar um plug-in de serviço de arquivo à sua loja Medusa. Para obter o melhor da ferramenta, considere adicionar serviços de pagamento, pesquisa e notificações.

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 áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

Adicionando um plug-in de serviço de arquivo à sua loja Medusa: um guia essencial

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Uma breve introdução à teoria do cérebro de Boltzmann

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Toque para ganhar: Telegram pode integrar os próximos 10 bilhões de usuários criptográficos antes de Solana

Uma breve introdução à teoria do cérebro de Boltzmann

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Toque para ganhar: Telegram pode integrar os próximos 10 bilhões de usuários criptográficos antes de Solana

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps