Introducción a AWS
Cree una aplicación React
Cree una aplicación Web simple con AWS Amplify

Alojar aplicación React
Módulo 1: Implementar y alojar una aplicación React
En este módulo, creará una aplicación React y la implementará en la nube utilizando el servicio de alojamiento de la web de AWS Amplify.
Introducción
AWS Amplify ofrece un flujo de trabajo de CI/CD basado en Git para crear, implementar y alojar aplicaciones web de una sola página o sitios estáticos con backends sin servidor. En el momento de conectar un repositorio Git, se determinan automáticamente a través de Amplify los ajustes de compilación para los recursos de backend sin servidor y de marco de frontend configurados con la CLI de Amplify e implementa automáticamente las actualizaciones con cada confirmación de código.
En este módulo, comenzaremos creando una aplicación de React nueva y enviándola a un repositorio de GitHub. Luego, se conectará el repositorio al alojamiento web de AWS Amplify y la implementará en una red de entrega de contenido (CDN) con disponibilidad global alojada en un dominio amplifyapp.com. A continuación, demostraremos las capacidades de implementación continua al efectuar cambios en la aplicación de React, y enviaremos una versión nueva a la ramificación principal, lo cual iniciará una nueva implementación de forma automática.
Lo que aprenderá
- Cree una aplicación de React
- Inicialice el repositorio de GitHub
- Implemente su aplicación con AWS Amplify
- Implemente cambios de código y vuelva a implementar su aplicación
Conceptos clave
Aplicación React: React es un marco de aplicación web que permite que los desarrolladores creen rápidamente aplicaciones eficientes de una sola página utilizando JavaScript.
Git: un sistema de control de versión que permite que los desarrolladores almacenen archivos y también mantengan y actualicen relaciones entre archivos y directorios, versiones y cambios en el archivo.
Tiempo de realización
10 minutos
Servicios utilizados
Implementación
-
Cree una nueva aplicación de React
La manera más simple de crear una aplicación de React es con el comando create-react-app. Instale este paquete utilizando el siguiente comando en el símbolo del sistema o el terminal:
npx create-react-app amplifyapp cd amplifyapp npm start
-
Inicie el repositorio de GitHub
En este paso, creará un repositorio de GitHub, a donde luego enviará el código. Para completar este paso necesitará una cuenta de GitHub; si no tiene una, regístrese aquí.
a. Cree un nuevo repositorio de GitHub para su aplicación (enlace)
b. Inicie Git y, para enviar la aplicación al nuevo repositorio de GitHub, ejecute los siguientes comandos en la interfaz de línea de comandos:
git init git remote add origin git@github.com:username/reponame.git git add . git commit -m “initial commit” git push origin master
-
Inicie sesión en la consola de administración de AWS
Abra la consola de administración de AWS en una nueva ventana del navegador para poder tener abierta esta guía paso a paso. Cuando la pantalla se cargue, escriba su nombre de usuario y contraseña para comenzar. A continuación, escriba “Amplify” en la barra de búsqueda y seleccione AWS Amplify para abrir la consola del servicio.
-
Implemente su aplicación con AWS Amplify
En este paso, conectará el repositorio de GitHub que acaba de crear al servicio AWS Amplify. Esto le permitirá crear, implementar y alojar la aplicación en AWS.
a. En la consola de servicio AWS Amplify, seleccione "Get Started" (Comenzar) en Deploy (Implementar).
b. Seleccione GitHub como el servicio de repositorio y, luego, Continue (Continuar).
c. Autentique con GitHub y regrese a la consola de Amplify. Elija el repositorio y la ramificación principal que creó antes y seleccione Next (Siguiente).
d. Acepte la configuración de recopilación predeterminada y seleccione Next (Siguiente).
e. Revise los detalles finales y seleccione Save and Deploy (Guardar e implementar).
f. Ahora AWS Amplify creará el código fuente e implementará la aplicación en https://...amplifyapp.com.
g. Una vez que la compilación finalice, seleccione la imagen en miniatura para ver la aplicación web en funcionamiento.
-
Implemente automáticamente los cambios en el código
En este paso, hará algunos cambios en el código utilizando el editor de texto y enviará los cambios a la ramificación principal de su aplicación.
a. Edite src/App.js con el siguiente código y guarde.
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1>Hello from V2</h1> </header> </div> ); } export default App;
b. Envíe los cambios a GitHub en el símbolo del sistema (Windows) o en el terminal (macOS) para iniciar automáticamente una nueva creación:
git add . git commit -m “changes for v2” git push origin master
c. Cuando la compilación finalice, seleccione la imagen en miniatura en la consola de AWS Amplify para ver la aplicación actualizada.
Conclusión
Ha implementado una aplicación React en la nube de AWS al integrarse en GitHub y usar AWS Amplify. Con AWS Amplify, puede implementar continuamente su aplicación en la nube y alojarla en una CDN disponible a nivel mundial.
Luego, crearemos una versión local de la aplicación para seguir con el desarrollo y agregar nuevas funciones.