= Hospedando seu aplicativo React com AWS em 30 minutos =
Este tutorial é muito pesado em imagens e direcionado para iniciantes completos. Ele explica como você pode hospedar seu aplicativo React em um site, com um sistema de autorização completo. Ele invoca o poder do AWS MobileHub por meio da Mobilehub CLI (Command Line Interface). O tutorial não requer habilidades com os serviços da AWS e também mostrará como configurar um aplicativo clichê React.
Se você já possui um aplicativo React,
**você pode pular para a seção 2 onde instalamos o awsmobile-cli e adicionamos ao nosso aplicativo
= Antes de começarmos, precisamos configurar algumas coisas em seu computador =
**Ambiente Node 8.x instalado em seu computador**
- Este é o ambiente de tempo de execução para servidores de aplicativos Javascript. Ele segue com o gerenciador de pacotes de nós (NPM).
- O NPM é usado para instalar pacotes de nós, como React, AWS Amplify, um pacote de conector AWS-JS e basicamente isso.
- httpsnodejs.org/en/download/
**Uma conta de nível gratuito da AWS
- Você obtém acesso gratuito aos serviços da AWS por meio do nível gratuito. Para este tutorial, isso deve ser mais do que suficiente. No entanto, lembre-se de que cada serviço tem um limite de uso mensal e isso pode custar dinheiro real.
- httpsaws.amazon.com/free/
**Instale a AWS CLI (Command Line Interface) para chamar os serviços da AWS diretamente do seu console** **Para este curso usaremos o clichê mantido do Facebook, criadores do React **Um editor de sua escolha
- Sugiro começar com o Visual Studio Code, um editor leve altamente modificável que pode executar a maioria das linguagens e estruturas de programação.
Dica profissional: no processo de instalação do VS Code, certifique-se de marcar a caixa que o adiciona aos nomes de caminho do ambiente. Isso lhe dá acesso para abrir o VS Code a partir do terminal digitando âÃÂÃÂcode filename.jsâÃÂàou âÃÂà Âcódigo .âÃÂàpara todo o projeto em que você está. **Um terminal em que você está inserido. está confortável em
- A maioria dos desenvolvedores deve ter o Git instalado em seu computador. Isso lhe dá acesso ao Git Bash, que é o terminal de muitos desenvolvedores.
Vamos começar!
**1. Crie o aplicativo React e entre na pasta do projeto pelo terminal**
Entre no terminal e localize sua pasta onde você armazena os aplicativos. Sugiro uma pasta chamada âÃÂÃÂdevâÃÂÃÂ.
nome do projeto npx create-react-app&& cd project-name
ou
npm -g install create-react-app create-react-app nome do projeto
Aqui criamos um aplicativo React baseado no clichê. âÃÂÃÂnpxâÃÂàé uma ferramenta Node que usa o servidor npm para chamar pacotes remotos. O segundo snippet de código instala o aplicativo create-react localmente com
*npm -g install create-react-app* **e então cria o aplicativo. Sugiro usar o npx para estar sempre atualizado com o create-react-app e, em seguida, criar o aplicativo. Sugiro usar o npx para estar sempre atualizado com o create-react-app. **2. Instale o awsmobile CLI em seu computador e execute-o no projeto**
A partir deste ponto, você deve prestar atenção ao seu aplicativo React em seu editor de código. Haverá pastas adicionadas como /awsmobile e algumas adições ao arquivo package.json.
Em uma janela de terminal, digite
npm install -g awsmobile-cli
para instalar o awsmobile-cli globalmente. Usaremos isso depois de fazer algum trabalho no console do AWS Mobile Hub.
Verifique se você está dentro do seu projeto e digite
inicialização do awsmobile
Você é solicitado com um conjunto de perguntas, nas quais os padrões são bons, então pressione enter em cada configuração até que abra automaticamente o AWS em seu navegador padrão. Faça login com sua conta de nível gratuito, caso ainda não o tenha feito.
Isso garante ao awsmobile-cli que estamos conectados à conta correta da AWS. Volte para o seu terminal e pressione Enter para continuar.
A AWS precisa configurar um usuário para controlar o aplicativo. Isso será feito automaticamente pelo awsmobile-cli quando você continuar pressionando enter.
Depois de concluir isso, você será levado ao AWS IAM, onde você apenas âÃÂÃÂPróximo ¢ÃÂào seu caminho para a completude! Na segunda etapa, ele deve ter marcado automaticamente âÃÂÃÂAdministrator AccessâÃÂÃÂ, que fornece ao usuário acesso a todos os recursos da AWS de que precisamos.
Quando terminar, é muito importante que você baixe o arquivo .csv com suas credenciais secretas, pois elas serão exibidas apenas uma vez na AWS. Essas chaves devem ser usadas nas próximas etapas da janela do seu terminal.
Isso cria com sucesso seu aplicativo AWS MobileHub e instala automaticamente o aws-amplify& aws-amplify-react em seu projeto React local
Quando este processo estiver concluído (~1 min), você pode digitar
console awsmobile
para ver seu aplicativo Mobile Hub em seu navegador padrão. Você também pode digitar "awsmobile"para ver uma lista de diferentes ações. A partir daqui, adicionaremos o Cognito Login com o navegador, mas você pode fazer isso a partir da CLI do awsmobile.
**3. Na verdade, adicionando login e hospedagem do Cognito **
Para a última etapa, adicionaremos o AWS Cognito ao nosso projeto por meio do Console do AWS MobileHub. Você também pode verificar a hospedagem que já está habilitada por padrão.
Para testar o Hosting, clique no recurso em seu console e clique no URL fornecido. O conteúdo aqui é um modelo da AWS, mas você o substituirá pelo aplicativo React em breve.
**Para adicionar login de usuário do Cognito, role para baixo para encontrar "Login de usuário"e clique nele. **Isso permite Cognito User Pools com um sistema de autenticação. Use âÃÂÃÂEmailâÃÂàdo endereço de e-mail ou número de telefone para forçar o e-mail como nome de usuário em seu login. Ou você pode usar o nome de usuário e ativar âÃÂÃÂE-mailâÃÂà+ âÃÂÃÂNome de usuário¢à Âàpara deixar o usuário escolher. Você receberá o código de confirmação por e-mail de qualquer maneira.
Aceitamos e-mail porque a AWS não cobra pelo envio de códigos de confirmação de registro para e-mail, enquanto o envio de SMS custa dinheiro real.
O que resulta em:
Se você clicar em Ação >Editar no Cognito, verá o console do Cognito para gerenciar seus usuários e recursos avançados de segurança. Algumas configurações feitas nesta etapa não são reversíveis, mas você sempre pode excluir seu grupo de usuários e criar um novo.
Isso conclui a configuração do AWS Cognito dentro do MobileHub. É hora de adicionar código. Quantos? 5 linhas! E 3 deles são apenas importações no React.
= Adicionando suas configurações ao projeto React e publicando em seu site =
Em seu terminal, você pode, a qualquer momento, usar awsmobile pull ou awsmobile push para, respectivamente, extrair suas alterações do Console do AWS MobileHub on-line para seu aplicativo ou enviar por push suas alterações locais feitas por meio da CLI awsmobile no terminal.
Para este caso de uso, queremos buscar as alterações que fizemos. Volte ao seu terminal e digite
De volta ao VS Code, você verá que seu projeto agora foi modificado. Você pode verificar suas configurações locais em ./awsmobile/backend/mobile-hub-project.yml
Além disso, em ./package.json você encontrará as duas bibliotecas destacadas sendo adicionadas pelo awsmobile init, o que fizemos anteriormente.
Agora vamos usá-los para agrupar nosso aplicativo em uma janela de login do Cognito. Abra ./src/index.js e modifique isto:
para isso:
importar Reagir de 'reagir';
importar ReactDOM de 'react-dom';
import index.css';
importar App de App';
importar registerServiceWorker de registerServiceWorker';
importar awsMobile de aws-exports';
importar Amplify de 'aws-amplify';
importar { withAuthenticator } de "aws-amplify-react"Amplify.configure(awsMobile);
const AppWithAuth = withAuthenticator(App)ReactDOM.render(
('root
registerServiceWorker
And youâÃÂÃÂre done! Try to run your application from your terminal with
npm start
and see it be loaded into the browser with a sleek GUI created by AWS:
From here you can register, login or reset users, and as an admin you can see the users who are registering.
**To add hosting simply go to your terminal and type
awsmobile publish
If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:
When this process is done, your hosted website automatically opens in your default browser:
**There, youâÃÂÃÂre done
= Pitfalls in the process =
If the application says âÃÂÃÂNo user poolsâÃÂÃÂ, make sure your MobileHub console has Sign-In activated, and that youâÃÂÃÂve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!
**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application
Hint: YouâÃÂÃÂll need to import Auth and call its signOut function.
import { Auth } from aws-amplify-react
**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub âÃÂÃÂHosting and StreamingâÃÂÃÂ. Read the docs provided if you want assitance:
== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==
Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the defaultâÃÂæ
docs.aws.amazon.com
**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. ItâÃÂÃÂs a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy
