Implementar y alojar una aplicación ReactJS

con la consola de AWS Amplify

La consola de AWS Amplify ofrece un flujo de trabajo de CI/CD basado en Git para desarrollar, 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 tutorial, comenzaremos creando una aplicación de React nueva y enviándola a un repositorio de GitHub.  Luego, se conectará a la consola de 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.

Todas las operaciones que se explican en este tutorial se pueden realizar con la capa gratuita.

Acerca de este tutorial
Duración 10 minutos                                           
Costo Apto para la capa gratuita
Caso de uso Sitios web y aplicaciones web
Productos Consola de AWS Amplify
Público Desarrollador
Nivel Principiante
Última actualización 04/03/2018

1. Registrarse en AWS

Para seguir este tutorial en la consola de AWS Amplify, necesita tener una cuenta de AWS. No se aplican cargos adicionales por utilizar AWS Amplify para este tutorial. Los recursos que cree con el tutorial se pueden utilizar dentro de la capa gratuita. 

2. Confirme la configuración del entorno

Abra la interfaz de línea de comandos y escriba el siguiente comando:

node -v;

Si este comando devuelve menos de v8.0, actualice el nodo a una versión mayor que la versión 8. Si el comando no se encuentra, vaya a nodejs.org/download e instale el nodo.

3. 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 con el siguiente comando:

npx create-react-app amplifyapp
cd amplifyapp
npm start

4. 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

5. Inicie sesión en la consola de AWS Amplify.

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.

6. Implemente su aplicación en 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. Seleccione Comenzar en Implementar.

b. Seleccione GitHub como el servicio de repositorio y, luego, Siguiente.

c. Autentique con GitHub y regrese a la consola de Amplify. Elija el repositorio que creó antes y la ramificación principal y seleccione Siguiente.

d. Acepte la configuración de recopilación predeterminada y seleccione Siguiente.

e. Revise los detalles finales y seleccione Guardar e implementar.

f. Ahora, la consola de AWS Amplify creará el código fuente e implementará la aplicación en https://<branchname>.<appid>.amplifyapp.com

g. Una vez que la compilación finalice, seleccione la imagen en miniatura para ver la aplicación web en funcionamiento.

tmt-react-ClickThumnail

7. Implemente automáticamente los cambios en el código.

En este paso, hará algunos cambios en el código y enviará los cambios a la ramificación principal de su aplicación.

a. Edite el archivo src/App.js.

b. Cuando la compilación finalice, seleccione la imagen en miniatura en la consola de AWS Amplify para ver la aplicación actualizada.

tmt-react-7b-2

8. Eliminar recursos

Puede terminar fácilmente los recursos que creó en la consola de AWS Amplify. De hecho, se recomienda terminar los recursos que ya no se utilizan para que no se los sigan cobrando.

Seleccione Acción y luego, Eliminar aplicación. En la ventana modal que se abre, escriba eliminar para confirmar que desea eliminar la aplicación. La aplicación se ha eliminado.

Felicitaciones

Ha implementado una aplicación de React en la nube al integrarse en GitHub y usar la consola de Amplify.

Con la consola de AWS Amplify, puede implementar continuamente su aplicación en la nube y alojarla en una CDN disponible a nivel mundial.

¿Le resultó útil este tutorial?

Gracias
Indíquenos lo que le gustó.
Lamentamos haberlo decepcionado
¿Hay información desactualizada, confusa o inexacta? Ayúdenos a mejorar este tutorial con sus comentarios.