= Implantar React Apps no Amazon S3 =

== Guia de 5 minutos sobre como implantar React Apps com S3 ==

![ ](httpsmiro.medium.com/max/1400/1*h4TLlisFk7XvtREAsS7C7Q.jpeg)

Então você concluiu seu aplicativo React e deseja hospedá-lo em algum lugar. Você sabia que pode usar o Amazon AWS S3 para hospedar seus aplicativos React? É relativamente fácil, de baixo custo e rápido de implantar.

= Vamos começar! =

== Pré-requisitos ==

Antes de entrarmos na hospedagem, vamos fazer a configuração administrativa. Certifique-se de que o seguinte foi concluído:

**Você tem uma conta da AWS Inscreva-se para uma conta da AWS aqui: httpsaws.amazon.com/resources/create-account/ **Crie um usuário da AWS No Console da AWS, vá para a guia IAM e vá para à Seção ¢ÃÂÃÂUsuáriosâ¢ÃÂàna barra lateral.

Clique em âÃÂÃÂAdicionar usuárioâÃÂàe marque âÃÂÃÂAcesso programáticoâàÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*gMtvyUQ_X2YVYHwNfLeygg.png)

Clique em âÃÂÃÂNext: PermissionsâÃÂàe aqui selecione âÃÂÃÂAnexar políticas existentes diretamenteâà ÂÃÂ. Marque âÃÂÃÂAdministratorAccessâÃÂàpara fins de implantação.

![ ](httpsmiro.medium.com/max/1400/1*UfuPz5oak9QbxX0VXlNV5g.png)

Clique nos botões Avançar e, finalmente, clique em âÃÂÃÂCriar usuárioâÃÂÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*aSCgwjWRAiNQHBV_bSRlvA.png)

Na etapa final, recebemos um ID de chave de acesso e uma chave de acesso secreta. Baixe e

** salve-os em seu computador, pois você precisará disso mais tarde

== Instalar AWS CLI ==

A AWS CLI é uma ferramenta poderosa que pode nos ajudar a simplificar o processo de implantação.

Vamos instalar o AWS CLI usando o Homebrew (para macOS). Instale o Homebrew, caso ainda não o tenha feito.

*Nota: Se você estiver usando o Windows, você pode encontrar as instruções nos documentos oficiais * *aqui*

Abra seu terminal e digite

preparar instale o awscli.

Uma vez instalada a ferramenta CLI, podemos configurar nossa conta AWS com

aws configurar. É aqui que você precisará inserir as informações da chave de acesso que baixou anteriormente. Deve ser algo como o seguinte.

Para região, você pode verificar seu URL no Console AWS e ele mencionará sua região. Por exemplo, o meu é âÃÂÃÂap-southeast-1âÃÂÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*TbFgHQ9ey3SwBWtadBtqSQ.png)
= Criando um aplicativo React =

Talvez você já tenha seu aplicativo React pronto para implantar. No entanto, se você precisar de um aplicativo de amostra, poderá usar as seguintes opções:

- Gere um aplicativo React clichê executando

npx create-react-app meu-aplicativo

- Baixe meu aplicativo React de amostra (com um exemplo de formulário) em httpsgithub.com/harishv7/react-hook-form-example. Isso foi feito para um tutorial para adicionar formulários a aplicativos React. Confira aqui.

Uma vez feito isso, verifique se todas as dependências estão instaladas usando

yarn install e execute o aplicativo usando

início do fio.

= Configurar um balde S3 =

Agora que temos nosso aplicativo de exemplo pronto, vamos configurar um bucket S3 para hospedar nosso aplicativo.

No Console AWS, procure por âÃÂÃÂS3âÃÂàe vá para S3 Dashboard. Clique em âÃÂÃÂCreate bucketâÃÂàe dê ao balde um nome como âÂÂÃÂmy-react -app-2021âÃÂà(ou qualquer outra coisa que você desejar).

*Observação: o nome do bucket deve ser exclusivo em todo o S3. Portanto, escolha um nome exclusivo que não exista, senão você receberá um erro!* ![ ](httpsmiro.medium.com/max/1400/1*tLDgJ0HJNEUA9DwhD5XiUw.png)

Ative o acesso público ao bucket, pois o estamos hospedando ao vivo.

![ ](httpsmiro.medium.com/max/1400/1*Mqn0JUnqAvMMmimuLj7rTg.png)

Deixe o restante das configurações como estão e clique em "Criar balde". Você verá uma entrada como a seguinte em seu painel do S3.

![ ](httpsmiro.medium.com/max/1400/1*pW6x0HIgq9WgauWy-SFIOw.png)

Vamos clicar e entrar em nosso balde S3 recém-criado.

![ ](httpsmiro.medium.com/max/1400/1*PNhe4x_fs02RmMKIQmGbng.png)

Vamos clicar em âÃÂÃÂPropriedadesâ¢ÃÂàe rolar até o final, onde você consulte âÃÂÃÂHospedagem de site estático¢ÃÂÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*mRdXzoHrc1LHQ8Hy-2V4UQ.png)

Clique em âÃÂÃÂAtivarâÃÂàe digite âÃÂÃÂindex.htmlâààem Documento de índice.

![ ](httpsmiro.medium.com/max/1400/1*3d4nQKZrRAh5SmgbL0-yhA.png)

Deixe os outros campos iguais e clique em ¢ÃÃÂSalvar alterações.

= Implantando no S3 =

Agora, estamos prontos para implantar nosso aplicativo no S3. A maneira de fazer isso é usar o seguinte comando da CLI:

aws s3 sync build/ s3your-bucket-name>--acl public-read
Podemos adicionar este comando ao nosso arquivo package.json também como um script âÃÂÃÂdeployâÃÂÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*BY8AO0YO7WqOUMPWA_XsVQ.png)

Vamos construir nosso aplicativo usando

construção de fios que ajuda a criar uma construção de produção otimizada.

Em seguida, vamos executar o comando CLI fornecido acima ou, se você tiver configurado seu script de publicação em package.json, podemos usar

implantação de fio.

![ ](httpsmiro.medium.com/max/1400/1*8ZbQ49dzPzGo_TkYh3_H1w.png)

É isso, nosso aplicativo agora está implantado!

Para descobrir onde nosso aplicativo está hospedado (o link do site), acesse o console AWS S3 e clique no bucket que você criou.

Vá para a guia ¢ÃÂÃÂPropriedadesâÃÂàe role para baixo até o site estático hostingâ¢ÃÂàe nosso URL estará lá.

![ ](httpsmiro.medium.com/max/1400/1*SbuQahvHex1KetHvddN2rw.png)

Clique nele e seu aplicativo será aberto em uma nova guia. Aqui está o meu!

![ ](httpsmiro.medium.com/max/1400/1*LcpVXd_SeBMLbJafgOAbEA.png)

= Conclusão =

Implementamos com sucesso nosso aplicativo React no Amazon S3! Essa é uma ótima opção para implantar e testar rapidamente seus protótipos React e compartilhá-los com outras pessoas. Também é muito fácil e rápido de implantar.

Espero que este tutorial tenha sido útil para você!

Codificação feliz! ðÂÃÂû

*Mais conteúdo em * *plainenglish.io*