paint-brush
Adicionando um plug-in de serviço de arquivo à sua loja Medusa: um guia essencialpor@learndevts
243 leituras

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

por Learndevtools
Learndevtools HackerNoon profile picture

Learndevtools

@learndevts

Learning dev tools from beginner to advanced level. Visit learn-dev-tools.blog

8 min read2023/05/09
Read on Terminal Reader
Read this story in a terminal
Print this story

Muito longo; Para ler

Medusa é uma solução de comércio sem cabeça de código aberto. Ele oferece recursos prontos para uso, como gerenciamento de clientes, produtos, remessas, impostos e regiões e fluxo de RMA. Este tutorial se concentra no armazenamento de arquivos S3 para armazenar imagens e arquivos carregados no Medusa.
featured image - Adicionando um plug-in de serviço de arquivo à sua loja Medusa: um guia essencial
Learndevtools HackerNoon profile picture
Learndevtools

Learndevtools

@learndevts

Learning dev tools from beginner to advanced level. Visit learn-dev-tools.blog

0-item
1-item

STORY’S CREDIBILITY

Guide

Guide

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

Code License

Code License

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

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 17,8 mil estrelas e 1,3 mil forks no GitHub , 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 documentação bem escrita 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.

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, MinIo e Espaços . Este tutorial se concentra exclusivamente no armazenamento de arquivos S3 para armazenar imagens e arquivos carregados no Medusa.

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

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

image

Na próxima página, clique em Criar balde

image

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.

image

Propriedade do objeto

Para propriedade, permita que os objetos no bucket sejam propriedade de sua conta.

image

Nas configurações de Bloquear acesso público, desmarque Bloquear todo acesso público. Ao fazer isso, uma mensagem de aviso será exibida, marque a caixa na mensagem, como na imagem.

image

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 .

image

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 guia de permissão. Em seguida, role para baixo até a seção de política de balde, clique em editar, adicione o código abaixo e salve.

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

image

Substitua <YOUR_BUCKET_NAME> pelo nome do seu intervalo. Aqui é medusastorebucket

Etapa 3: anexar uma política

Em sua conta, navegue até IAM e selecione Gerenciamento de acesso->Políticas no menu à esquerda.

image

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.

image

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" ] } ] }

image

Substitua a action-statement e resource-statement de acordo com sua necessidade e clique em 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.

image


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é o console da Amazon e escolher Grupos de usuários . Selecione o nome do grupo e abra a guia Permissão

image

Escolha Adicionar permissão e, em seguida , anexe políticas

image

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; Access Key ID e Secret Access Key .


Para obter o ID da chave de acesso da AWS e a chave de acesso secreta, acesse o console da Amazon na navegação à esquerda e escolha Usuários.


Escolha seu nome de usuário IAM e abra a guia Credenciais de segurança

image


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 Código local se estiver trabalhando em um ambiente de desenvolvimento local.

image


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

image

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.


image

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 .env e adicione o seguinte

 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

  • <YOUR_BUCKET_URL> é a URL do seu bucket. Ele está no formato https://<BUCKET_NAME>.s3.<REGION>.amazonaws.com . Onde <BUCKET_NAME> é o nome do seu bucket, <REGION> a região.
  • <YOUR_BUCKET_NAME> é o nome do bucket criado
  • <YOUR_BUCKET_REGION> a região do seu bucket
  • <YOUR_ACCESS_KEY_ID> é sua chave de acesso
  • <YOUR_SECRET_ACCESS_KEY> é sua chave secreta


Por fim, em seu medusa-config.js adicione o seguinte código:

 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 APIs REST ou o Medusa Admin para testar.


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 admin@medusa-test.com e supersecret , respectivamente. Abra seu painel de administração com http://localhost:7000/


No menu, clique em Produtos e em Adicionar Produto . Forneça detalhes do seu produto e publique-o.

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 a vitrine NextJS . Se você não fizer isso, receberá o seguinte erro next/image Un-configured Host .


Portanto, em seu next.config.js adicione o seguinte:

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

<BUCKET_NAME> representa o nome do seu intervalo.


Execute sua vitrine com yarn run dev para verificar se os novos produtos que você adicionou estão lá e prossiga para a próxima fase do seu projeto.

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.

L O A D I N G
. . . comments & more!

About Author

Learndevtools HackerNoon profile picture
Learndevtools@learndevts
Learning dev tools from beginner to advanced level. Visit learn-dev-tools.blog

Rótulos

ESTE ARTIGO FOI APRESENTADO EM...

Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Also published here
X REMOVE AD