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:
   
   Default

   sudo apt-get install awscli // Ou caso você esteja no Mac brew install awscli

   1 2 3

   sudo apt-get install awscli // Ou caso você esteja no Mac brew install awscli

   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:
   
   Default

   aws configure

   1	aws configure

3. Ele abrirá um menu solicitando as seguintes informações:
   
   Default

   AWS Access Key ID [None]: AWS Secret Access Key [None]: Default region name [None]: us-west-2 Default output format [None]: ENTER

   1 2 3 4

   AWS Access Key ID [None]: AWS Secret Access Key [None]: Default region name [None]: us-west-2 Default output format [None]: ENTER

   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:
    
    Default

    { "Version": "2012-10-17", "Statement": [ { "Sid": "AllowPublicReadAccess", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::example-bucket/*" ] } ] }

    1 2 3 4 5 6 7 8 9 10 11 12

    {   "Version": "2012-10-17",   "Statement": [     {       "Sid": "AllowPublicReadAccess",       "Effect": "Allow",       "Principal": "*",        "Action": [ "s3:GetObject" ],        "Resource": [ "arn:aws:s3:::example-bucket/*" ]      }   ] }

    
    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:
   
   Default

   "deploy": "aws s3 sync build/ s3://NOME-DO-SEU-BUCKET --acl public-read"

   1	"deploy": "aws s3 sync build/ s3://NOME-DO-SEU-BUCKET --acl public-read"

2. Finalmente, para realizar nosso deploy basta rodar:
   
   Default

   yarn build && yarn deploy

   1	yarn build && yarn deploy

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