Introducción a AWS

Cree una aplicación Web básica

Implemente una aplicación Web y agregue interactividad con una API y una base de datos

Módulo 1: Crear una aplicación Web

En este módulo, implementará recursos estáticos para su aplicación Web utilizando la consola AWS Amplify.

Introducción

En este módulo, usará la Consola de AWS Amplify para implementar los recursos estáticos para su aplicación web. En los módulos siguientes, agregará funcionalidad dinámica a estas páginas mediante AWS Lambda y Amazon API Gateway para llamar a las API RESTful remotas. (REST significa “Transferencia de estado representacional” y se trata de un patrón arquitectónico para crear servicios Web. API significa interfaz de programa de aplicación. Por lo tanto, la RESTful API implementa ese patrón arquitectónico).

Todo el contenido web estático, incluidos los archivos HTML, CSS, JavaScript y de imagen, entre otros, serán alojados por AWS Amplify. Seleccionamos el servicio Amplify dado que simplifica el alojamiento y la implementación de sitios web estáticos. Los usuarios finales obtendrán acceso al sitio mediante la URL que se expone en Amplify.

Si está nervioso por trabajar con tantas cosas nuevas, ¡no se preocupe! No deberá usar otros servicios de AWS por el momento y tampoco deberá ejecutar ningún servidor de web. (Un "servidor" es un dispositivo de software o hardware que acepta y responde las solicitudes realizadas por una red) a fin de que el sitio web esté disponible.

El sitio Web será una página extremadamente simple “Hola mundo” y agregaremos más funcionalidades en los siguientes módulos.

Para la mayoría de las aplicaciones reales, es conveniente utilizar un dominio personalizado para alojar el sitio. Un “dominio personalizado” es un nombre de marca único que identifica un sitio Web, tal como www.amazon.com. Si le interesa esto, Amplify también proporciona ayuda para los dominios de los clientes.

Lo que aprenderá

  • Cómo crear una aplicación Amplify
  • Cómo cargar archivos para un sitio web directamente en Amplify
  • Cómo implementar nuevas versiones de una página web con Amplify

Conceptos clave

Sitio Web estático: un sitio Web estático tiene contenido fijo, a diferencia de los sitios Web dinámicos. Los sitios Web estáticos son el tipo más básico de sitio Web y son los más fáciles de crear. Todo lo que se necesita es crear algunas páginas HTML y publicarlas en un servidor Web.

El alojamiento Web proporciona las tecnologías o servicios necesarios para que su sitio Web se vea en Internet.

Regiones de AWS: áreas geográficas separadas que AWS utiliza para albergar su infraestructura. Se encuentran distribuidas en todo el mundo para que los clientes puedan elegir la región más cercana a ellos para que alojen allí su infraestructura en la nube.

 Tiempo de realización

5 minutos

 Servicios utilizados

 Requisitos previos del módulo

Implementación

  • Cree una aplicación Web con la consola Amplify
    1. Abra el editor de texto favorito en su equipo. Cree un nuevo archivo y pegue el siguiente HTML en él:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    
    <body>
        Hello World
    </body>
    </html>

    2. Guarde el archivo como index.html.

    3. ZIP (comprima) únicamente el archivo HTML.

    4. En una nueva ventana del navegador, regístrese en la Consola de Amplify. NOTA: Usaremos la región de Oregón (us-west-2) para este tutorial.

    5. En Deploy (Implementar) haga clic en el botón naranja Get Started (Comenzar).

    6. Seleccione Deploy without Git provider (Implementar sin proveedor Git). Esto es lo que verá en la pantalla:

    full-stack amplify console module one AmplifyAppSetup

    7. Haga clic en el botón naranja Continue (Continuar).

    8. En el campo App Name (Agregar nombre) escriba GettingStarted.

    9. Como nombre para el Environment (Entorno) escriba dev.

    10. Seleccione el método Drag and drop (Arrastrar y soltar). Esto es lo que debería ver en la pantalla:

    full-stack amplify console module one AmplifyManualDeploy

    11. Haga clic en el botón Choose files (Elegir archivos).

    12. Seleccione el archivo ZIP que creó en el módulo 3.

    13. Haga clic en el botón naranja Save and deploy (Guardar e implementar).

    14. Después de algunos segundos, debería ver el mensaje Deployment successfully completed (La implementación se completó en forma satisfactoria).

  • Pruebe su aplicación Web
    1. Haga clic en el enlace de Domain (Dominio).
    2. Su aplicación Web se cargará en una nueva pestaña del navegador y dirá “Hola, Mundo”. ¡Felicitaciones!

Arquitectura de aplicaciones

Así es como se ve nuestra arquitectura en este momento:

full-stack amplify console arch diagram module 1

Por ahora es bastante reducida ya que solo usamos la consola de AWS Amplify. Ahora tenemos usuarios de aplicaciones Web en vivo con los que puede interactuar. A continuación, crearemos una función de Lambda.

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

Crear una función sin servidor