Support & Downloads

Quisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
198 West 21th Street, Suite 721
New York, NY 10010
youremail@yourdomain.com
+88 (0) 101 0000 000
Follow Us

Deploy React no S3 da AWS [Fácil e barato]

Neste tutorial você vai aprender como realizar de forma fácil e automatizada o Deploy do seu APP React no S3 da Aws.

Caso você não saiba, deploy é o ato de subir um projeto local para a Web, ou seja, deixa-lo disponível em uma URL para ser acessado através da internet.

Quando nós desenvolvemos um projeto com React é possível realizar o build dele, ou seja, transformar todo o nosso código em um conjunto simples de HTML, Css e javascript e depois subir esses arquivos para uma hospedagem estática que apenas devolver arquivos prontos.

Por isto utilizaremos serviço de hospedagem de arquivos estáticos da Aws chamado S3, com ele vamos conseguir manter nosso APP online de forma fácil e pagando realmente pouco (dependendo do numero de acesso e da quantidade de arquivos pode custar centavos por mês).

Então vamos aprender como fazer isto o/

 

Dependências para o tutorial

  1. Npm ou Yarn
  2. create-react-app

 

Preparando sua conta na AWS

  1. Crie sua conta na Aws acessando este link: https://portal.aws.amazon.com/billing/signup
  2. Realize o Login 🙂
  3. Na barra localizar serviços, digite IAM e selecione o primeiro serviço que aparecer.
  4. Selecione Usuários no menu lateral
  5. Click em Adicionar usuário.
  6. Escolha um nome para seu usuário depois selecione o campo Acesso Programático e clique em Próximo.
  7. Selecione “Anexar Políticas existentes…” pesquise por “S3” e depois selecione AmazonS3FullAccess e clique em Próximo.
  8. Clique em Próximo (Ou criar usuário).
  9. Salve o Id do seu usuário e a chave de acesso (usaremos em breve)

 

Instalando o AwsCli

  1. Para instalar o awscli rode:

    Obs: Se estiver no windows, para instala visite: https://docs.aws.amazon.com/pt_br/cli/latest/userguide/install-windows.html

  2. Agora para incluir as credencias, rode:
  3. Ele abrirá um menu solicitando as seguintes informações:

    Obs: Preencha o Key ID e o Secret com as informações que pegamos na AWS, na region coloque sa-east-1 e no output apenas pressione ENTER.

 

Criando o APP de exemplo

Para iniciar, vocês gerar nosso APP React que será usado como exemplo no deploy, caso você já possua um projeto e deseje realizar o deploy dele, pode utiliza-lo.

1 – Gere seu projeto rodando:

2 – Atualize o arquivo src/app.js colocando:

3 – Suba o projeto para visualiza-lo no seu browser rodando:

4 – Pronto, nosso exemplo está criado.

 

Criando seu Bucket para o deploy

  1. Acesse novamente seu console da Aws: https://signin.aws.amazon.com/signin
  2. Pesquise por S3 e selecione a primeiro opção que aparecer
  3. Click em “Criar Bucket”
  4. Escolha um nome único para seu bucket (caso você pretenda apontar um domínio futuramente para o bucket, coloque o nome do domínio ou subdomínio, exp: escoladejavascript.com)
  5. Escolha a região America do Sul (São Paulo)
  6. Click em Próximo
  7. Click em Próximo novamente
  8. Desmarque todos os bloqueis e click em próximo
  9. Click em criar Bucket
  10. Click no nome do Bucket para abrir as opções de configuração
  11. Click em propriedades e depois em Hospedagem de sites dinâmicos
  12. Agora click em Usar esse bucket para hospedar um site
  13. Em Documentos de índice digite “index.html” e click em Salvar
  14. Ainda dentro das configurações do Bucket click em “Política de Bucket” e coloque o seguinte conteúdo:

    Obs: Mude o example-bucket para o nome do seu bucket.
  15. Pronto o/

 

Realizando o Deploy

  1. Para incluir o comando de deploy (e para facilitar no dia a dia), inclua na parte de scripts do seu package.json:
  2. Finalmente, para realizar nosso deploy basta rodar:
  3. Prontoooo, agora visite novamente no console da Aws as configurações do seu Bucket, e no painel Hospedagem de site estático, pegue a URL do seu site e coloque no browser para ver seu APP React online o/

 

Conclusão

E ai Programador, curtiu o tutorial? Antes de você ir, eu gostaria de te dar uma noticia muito importante o/

Nós lançamos recentemente um treinamento completo chamado Programador Full Stack Javascript em 8 semanas,

Nele você vai aprender do zero Html 5, CSS, Bulma para criar sites responsivos, javascript, git e github, javascript moderno (es6+), React, Express que é uma framework para o backend desenvolvido com NodeJs e ainda vai aprender como criar um clone do Evernote usando React + Express.

E para que você aumente muito suas chances de conseguir bons jobs como programador, nós temos um módulo completo sobre carreira nesse treinamento e entrevistas com outros programadores.

Para saber mais sobre o treinamento, click no link a baixo, será um prazer ter você com a gente. https://programador.escoladejavascript.com

Obrigado por acompanhar este Screencast sobre Deploy React na Aws,

Eu vejo você no próximo tutorial,

Grande abraço o/

 

Referências e Links úteis

  1. https://medium.com/serverlessguru/deploy-reactjs-app-with-s3-static-hosting-f640cb49d7e6
  2. Como associar um domínio ao site estático no S3: https://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html

 

1
Deixe um comentário

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Altevir Carvalho Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Altevir Carvalho
Visitante
Altevir Carvalho

Show de bola…