Artigo original: https://www.freecodecamp.org/news/how-to-set-up-simple-image-upload-with-node-and-aws-s3-84e609248792/
Escrito por: Filip Jerga
Um guia passo a passo que explica como fazer o upload de uma imagem ou qualquer arquivo para o serviço Amazon S3.
Esta é a primeira parte de um tutorial no qual trataremos da parte do servidor (Node.js) do código.
Eu também preparei um tutorial em vídeo no YouTube. Você pode encontrar um link nos recursos na parte inferior deste artigo.
1. O que precisamos instalar e uma breve descrição.
multer: middleware para manipulação de arquivos de dados. Usado principalmente para o upload de arquivos. Mais informações: link para o npm
multer-s3: extensão do multer para o upload fácil de arquivos para o serviço Amazon S3. Mais informações: link para o npm
aws-sdk: pacote necessário para trabalhar com o AWS(Amazon Web Services) – no nosso caso, com o serviço S3. Mais informações: link para o npm
Vá para seus projetos e vamos instalar os pacotes:
npm install —-save multer multer-s3 aws-sdk2. Login na AWS
Primeiro, vamos criar uma conta em https://aws.amazon.com. A Amazon oferece um nível gratuito incrível, que você pode usar durante o primeiro ano. Após o login, procure pelo serviço S3.
Simplificando, o S3 é um serviço de nuvem para armazenar arquivos.
Precisamos criar um Bucket. Você pode imaginar um bucket como sendo uma pasta para seus arquivos. Escolha um nome para o bucket e sua região. Como esta é uma configuração simples, não estamos interessados em outras configurações (a configuração padrão já serve). Clique em "Next" (Avançar) até chegar na Revisão e crie seu bucket.
Navegue até o bucket criado e verifique sua barra de URL. Lembre-se do nome do bucket (para mim, "medium-test") e região (para mim, "us-east").
Agora, precisamos obter nossas credenciais seguras. Navegue pelo nome de sua conta até "My Securuty Credentials" (minhas credenciais de segurança, em português). Depois "Access Keys" (chaves de acesso, em português) e "Create Access Key" (criar chave de acesso, em português).
Nunca compartilhe suas chaves com ninguém! Guarde temporariamente essas chaves em algum arquivo ou baixe o arquivo de chave, pois precisamos de chaves para configurar o upload de um arquivo.
Tudo certo. a configuração da Amazon foi concluída!
3. Uso do editor de código
Não vou explicar o básico de Node ou Express aqui. Este tutorial está focado apenas no upload do arquivo. Se você estiver interessado em toda a implementação do projeto, verifique meu repositório no GitHub ou assista o tutorial completo. (Você pode encontrar o link no final deste artigo).
- Crie seu serviço de upload de arquivos com a seguinte implementação (primeira parte):
Observação importante: nunca exponha suas credenciais secretas diretamente em um arquivo! Nunca divulgue suas credenciais secretas! Considere configurar variáveis de ambiente em seu ambiente local ou, no caso de projetos com o deploy realizado, variáveis em seu provedor de nuvem. A melhor solução seria usar os perfis da AWS (texto em inglês).
Primeiro, importamos todos os nossos pacotes instalados. A segunda parte é a configuração da AWS. Precisamos fornecer nossas chaves secretas e região a partir da barra de URLs que mostrei antes.
Após a configuração da AWS, podemos criar uma instância do nosso Amazon S3. Ainda não terminamos. Agora, vamos ver a segunda parte desta implementação.
Podemos criar uma solução para o upload do multer. Precisamos dar funcionalidade ao objeto do multer com as seguintes propriedades:
- s3: instância do Amazon S3 que criamos antes.
- bucket: nome do nosso bucket (no meu caso: "medium-test")
- acl: controle de acesso ao arquivo ("public read" significa que qualquer pessoa pode ver os arquivos). Você pode verificar todos os tipos disponíveis aqui: link da documentação da Amazon (texto em inglês)
- metada: função de callback para definir metadados dos arquivos carregados. Aqui, estou definindo metadados adicionais para um nome de campo. Você pode ver esses dados na imagem abaixo.
5. key: função de callback para definir a propriedade key (chave na qual seu arquivo será salvo no bucket). Em nosso caso, estamos fazendo um carimbo de data/hora atual e salvando esse arquivo com um nome. Desse modo, nosso nome de arquivo será sempre único, mas você pode escolher o nome que quiser.
Depois de toda a configuração, exportamos o objeto do upload a fim de utilizá-lo em outros arquivos.
4. Configuração de uma rota para o upload da imagem
Estamos quase terminando, mas os usuários do nosso aplicativo ainda não têm acesso ao upload da imagem. Precisamos expor essa funcionalidade a eles. Vamos criar um endpoint para salvar um arquivo.
Exportamos nosso objeto de upload criado anteriormente e criamos outro objeto a partir dele. O novo objeto é mais específico, com configuração adicional para um único upload de imagem. Fornecemos um valor de "image" para ele. Esse valor é muito importante, pois enviaremos nosso arquivo para um servidor sob esta chave.
A segunda parte é a própria rota, o endpoint de POST para "/image-upload". Dentro dela, chamamos singleUpload. Não se esqueça de passar req e res como parâmetros, pois o multer receberá o arquivo que estamos enviando para o servidor a partir do objeto de req.
Verificamos, então, a existência de erros. Se não houver nenhum, devolvemos o JSON com o valor da localização do nosso arquivo, que é apenas um URL para o arquivo da Amazon.
Estamos prontos! Já podemos carregar arquivos no Amazon S3. Simples, não acha?
5. Teste no Postman.
Para ver os resultados de nosso trabalho, precisamos enviar um pedido para o servidor com uma imagem da qual queremos fazer o upload. Nessa parte, vamos testar isso através do Postman. Na segunda parte do tutorial, criaremos uma implementação para uma aplicação em Angular.
Se você não tiver o Postman, pode simplesmente fazer o download dele como uma extensão do Google Chrome. Basta pesquisar por 'postman google chrome extension'. O Postman é um aplicativo para inicializar, enviar e testar pedidos ao servidor de modo simplificado.
- Envie uma solicitação de post para o endpoint que criamos antes. No meu caso, especifiquei no caminho do node de /image-upload.
- Selecione Body em form-data.
- Forneça a chave de uma imagem. Você notará que essa é uma key (chave, em inglês) que estabelecemos antes em nosso código. Procure e selecione algum arquivo de imagem em seu computador.
- Envie a solicitação.
Você deve receber de volta o JSON com o URL de seu arquivo carregado.
Aí está! É isso, pessoal. Este é um upload de arquivo simples para o Node. No próximo artigo, faremos uma implementação de front-end para o Angular.
Se gostou deste tutorial, fique à vontade para conferir meu curso completo na Udemy — The Complete Angular, React & Node Guide | Airbnb style app.
Tutorial em vídeo: vídeo no YouTube
Projeto concluído: meu repositório no GitHub