Introducción a AWS

Cree una aplicación React

Cree una aplicación Web simple con AWS Amplify

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)

    Front End GitHub Repository Module 1

    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.

    Front End AWS Console Find Amplify Module 1
  • 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).

    Front End Amplify Deploy Module 1

    b. Seleccione GitHub como el servicio de repositorio y, luego, Continue (Continuar).

    Front End Amplify GitHub Module 1.png

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

    Front End GitHub Add Repository Module 1.png

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

    Front End GitHub Add Repository2 Module 1.png

    e. Revise los detalles finales y seleccione Save and Deploy (Guardar e implementar).

    Front End GitHub Add Repository3 Module 1.png

    f. Ahora AWS Amplify creará el código fuente e implementará la aplicación en https://...amplifyapp.com.

    Front End Amplify Deploy Source Module 1

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

    Front End Initial App Module 1
  • 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.

    Front End HelloV2 App Module 1

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.

¿Este módulo le resultó útil?

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.

Inicializar aplicación local