= Alojar su aplicación React con AWS en 30 minutos =
Este tutorial tiene muchas imágenes y está dirigido a principiantes completos. Explica cómo puede alojar su aplicación React en un sitio web, con un sistema de autorización completo. Invoca el poder de AWS MobileHub a través de la CLI (interfaz de línea de comandos) de Mobilehub. El tutorial no requiere habilidades con los servicios de AWS y también le mostrará cómo configurar una aplicación estándar de React.
Si ya tiene una aplicación React,
**puede pasar a la sección 2 donde instalamos awsmobile-cli y lo agregamos a nuestra aplicación
= Antes de comenzar, necesitamos configurar un par de cosas en su computadora =
**Entorno Node 8.x instalado en su computadora**
- Este es el entorno de tiempo de ejecución para servidores de aplicaciones Javascript. Sigue con el administrador de paquetes de nodos (NPM).
- NPM se utiliza para instalar paquetes de nodos como React, AWS Amplify, un paquete de conector AWS-JS y eso es básicamente todo.
- httpsnodejs.org/en/download/
**Una cuenta de capa gratuita de AWS
- Obtiene acceso gratuito a los servicios de AWS a través de la capa gratuita. Para este tutorial, esto debería ser más que suficiente. Sin embargo, tenga en cuenta que cada servicio tiene un límite de uso cada mes y esto podría costarle dinero real.
-https://www.amazon.com/free/
**Instale la AWS CLI (interfaz de línea de comandos) para llamar a los servicios de AWS directamente desde su consola** **Para este curso, utilizaremos el modelo estándar mantenido por Facebook, creadores de React **Un editor de su elección
- Sugiero comenzar con Visual Studio Code, un editor liviano altamente modificable que puede ejecutar la mayoría de los lenguajes y marcos de programación.
Consejo profesional: en el proceso de instalación de VS Code, asegúrese de marcar la casilla que lo agrega a los nombres de ruta de su entorno. Esto le da acceso para abrir VS Code desde la terminal escribiendo âÃÂÃÂcode filename.jsâÃÂào âÃÂà Âcódigo .âÃÂàpara todo el proyecto en el que se encuentra. **Un terminal en el que se encuentra. estás cómodo en
- La mayoría de los desarrolladores deberían tener Git instalado en su computadora. Esto le da acceso a Git Bash, que es la terminal de acceso de muchos desarrolladores.
¡Vamos a empezar!
**1. Cree la aplicación React e ingrese la carpeta del proyecto a través de la terminal **
Entra en la terminal y localiza tu carpeta donde almacenas las aplicaciones. Sugiero una carpeta llamada âÃÂÃÂdevâÃÂÃÂ.
npx create-react-app nombre-del-proyecto&& cd nombre-proyecto
o
npm -g install create-react-app create-react-app nombre-del-proyecto
Aquí creamos una aplicación React basada en el modelo estándar. âÃÂÃÂnpxâÃÂàes una herramienta de nodo que utiliza el servidor npm para llamar a paquetes remotos. El segundo fragmento de código instala create-react-app localmente con
*npm -g install create-react-app* **y luego crea la aplicación. Sugiero usar npx para estar siempre actualizado con create-react-app y luego crea la aplicación. Sugiero usar npx para estar siempre actualizado con create-react-app. **2. Instale awsmobile CLI en su computadora y ejecútelo en el proyecto**
Desde este punto, debe prestar atención a su aplicación React en su editor de código. Se agregarán carpetas como /awsmobile y algunas adiciones al archivo package.json.
En una ventana de terminal, escriba
npm install -g awsmobile-cli
para instalar awsmobile-cli globalmente. Usaremos esto después de trabajar un poco en la consola de AWS Mobile Hub.
Asegúrese de estar dentro de su proyecto y escriba
inicio de awsmobile
Se le solicitará una serie de preguntas, en las que los valores predeterminados son buenos, así que presione Intro en cada configuración hasta que se abra automáticamente AWS en su navegador predeterminado. Inicie sesión con su cuenta de nivel gratuito si aún no lo hizo.
Esto asegura awsmobile-cli que estamos conectados a la cuenta de AWS correcta. Regrese a su terminal y presione Enter para continuar.
AWS necesita configurar un usuario para controlar la aplicación. Esto lo hará automáticamente awsmobile-cli cuando continúe presionando Intro.
Después de completar esto, lo llevarán a AWS IAM, donde simplemente âÃÂÃÂSiguiente ¢ÃÂàsu camino a través de la integridad! En el segundo paso, debería haber marcado automáticamente âÃÂÃÂAdministrator AccessâÃÂàque le da al usuario acceso a todas las características de AWS que necesitamos.
Cuando termine, es muy importante que descargue el archivo .csv con sus credenciales secretas, ya que solo se mostrarán una vez en AWS. Estas teclas se utilizarán en los siguientes pasos de la ventana de su terminal.
Esto crea correctamente su aplicación AWS MobileHub e instala automáticamente aws-amplify& aws-amplify-react en su proyecto React local
Cuando termine este proceso (~ 1 min), puede escribir
consola awsmobile
para ver su aplicación Mobile Hub en su navegador predeterminado. También puede escribir âÃÂÃÂawsmobileâÃÂàpara ver una lista de diferentes acciones. A partir de aquí, agregaremos Cognito Login con el navegador, pero puede hacerlo desde la CLI de awsmobile.
**3. Agregando Cognito Sign-in and Hosting**
Para el último paso, agregaremos AWS Cognito a nuestro proyecto a través de la consola de AWS MobileHub. También puede consultar el alojamiento que ya está habilitado de forma predeterminada.
Para probar Hosting, haga clic en la función en su consola y haga clic en la URL que se le proporcionó. El contenido aquí es una plantilla de AWS, pero pronto lo sobrescribirá con la aplicación React.
**Para agregar el inicio de sesión de usuario de Cognito, desplácese hacia abajo para encontrar âÃÂÃÂInicio de sesión de usuarioâÃÂày haga clic en él. **Esto habilita los grupos de usuarios de Cognito con un sistema de autenticación. Use âÃÂÃÂCorreo electrónicoâÃÂàde la dirección de correo electrónico o número de teléfono para forzar el correo electrónico como nombre de usuario en su inicio de sesión. O puede usar Nombre de usuario y habilitar âÃÂÃÂCorreo electrónicoâÃÂà+ âÃÂÃÂNombre de usuarioâà Âàpara que el usuario elija. Recibirá el código de confirmación por correo electrónico de cualquier manera.
Aceptamos correo electrónico porque AWS no cobra por enviar códigos de confirmación de registro por correo electrónico, mientras que enviar SMS cuesta dinero real.
Lo que resulta en:
Si hace clic en Acción >Editar en Cognito, verá la consola de Cognito para administrar sus usuarios y funciones de seguridad avanzadas. Parte de la configuración que realizó en este paso no es reversible, pero siempre puede eliminar su grupo de usuarios y crear uno nuevo.
Esto completa la configuración de AWS Cognito dentro de MobileHub. Es hora de agregar código. ¿Cuánto cuesta? ¡5 líneas! Y 3 de ellos son solo importaciones en React.
= Agregar su configuración al proyecto React y publicar en su sitio web =
En su terminal, puede usar awsmobile pull o awsmobile push en cualquier momento para extraer, respectivamente, sus cambios de la consola de AWS MobileHub en línea a su aplicación, o enviar sus cambios locales realizados a través de la CLI de awsmobile en la terminal.
Para este caso de uso, queremos recuperar los cambios que hicimos. Vuelva a su terminal y escriba
De vuelta en VS Code, verá que su proyecto ahora ha sido modificado. Puede consultar sus configuraciones locales en ./awsmobile/backend/mobile-hub-project.yml
Además, en ./package.json encontrará las dos bibliotecas resaltadas agregadas por awsmobile init, lo que hicimos anteriormente.
Ahora los usaremos para envolver nuestra aplicación en una ventana de inicio de sesión de Cognito. Abra ./src/index.js y modifique esto:
a esto:
importar React desde 'react';
importar ReactDOM desde 'react-dom';
importar index.css';
importar aplicación desde aplicación';
importar el registro de ServiceWorker de el registro de ServiceWorker';
importar awsMobile desde aws-exports';
importar Amplify desde 'aws-amplify';
importar { withAuthenticator } desde "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
