Proyectos en AWS:

Desarrollar una aplicación web sin servidor

con AWS Lambda, Amazon API Gateway, Amazon S3, Amazon DynamoDB y Amazon Cognito

Introducción

Alojar un sitio web estático

Administrar usuarios

Crear un backend sin servidor

Implementar una API RESTful

Finalizar los recursos

Módulo 1. Alojamiento web estático

En este módulo configurará Amazon Simple Storage Service (S3) para alojar los recursos estáticos de su aplicación web. En los módulos siguientes, añadirá funcionalidad dinámica a estas páginas mediante JavaScript para llamar a las API RESTful remotas creadas con AWS Lambda y Amazon API Gateway.

Información general de la arquitectura

La arquitectura de este módulo es muy sencilla. Todo el contenido web estático se almacenará en Amazon S3, incluidos los archivos HTML, CSS, JavaScript y de imagen, entre otros. Después, los usuarios finales obtendrán acceso al sitio mediante la URL de sitio web público que se expone en Amazon S3. No es necesario ejecutar ningún servidor web ni utilizar otros servicios para hacer que su sitio esté disponible.

Para este módulo, utilizará la URL del punto de enlace del sitio web de Amazon S3 que proporcionamos, Con el formato http://{your-bucket-name}.s3-website.{region}.amazonaws.com. Para la mayoría de las aplicaciones reales, deberá utilizar un dominio personalizado para alojar el sitio. Si desea utilizar su propio dominio, siga las instrucciones del artículo para configurar un sitio web estático con un dominio personalizado en la documentación de Amazon S3.

Tiempo para completar el módulo: 30 minutos

Servicios utilizados: Amazon S3

Plantilla de CloudFormation: si ya está acostumbrado a trabajar con Amazon S3 o simplemente desea pasar a trabajar directamente con Lambda y API Gateway, puede lanzar una de estas plantillas de AWS CloudFormation en la región de su elección para crear los recursos necesarios de forma automática.

Región Plantilla de CloudFormation
EE.UU. Este (Norte de Virginia) Lanzar pila >
EE.UU. Este (Ohio) Lanzar pila >
EE.UU. Oeste (Oregón) Lanzar pila >
UE (Fráncfort) Lanzar pila >
UE (Irlanda) Lanzar pila >
UE (Londres) Lanzar pila >
Asia Pacífico (Tokio) Lanzar pila >
Asia Pacífico (Seúl) Lanzar pila >
Asia Pacífico (Sídney) Lanzar pila >
Asia Pacífico (Mumbai) Lanzar pila >

Instrucciones de lanzamiento de CloudFormation

  1. Haga clic en el enlace Lanzar pila anterior de la región que elija.

  2. Haga clic en Next (Siguiente) en la página Select Template (Seleccionar plantilla).

  3. Proporcione un nombre exclusivo para Website Bucket Name (Nombre del bucket del sitio web), como wildrydes-yourname, y haga clic en Next (Siguiente).

  4. En la página Options (Opciones), deje los valores predeterminados y haga clic en Next (Siguiente).

  5. En la página Review (Revisar), seleccione la casilla para confirmar que CloudFormation debe crear los recursos de IAM y, a continuación, haga clic en Create (Crear).

    Esta plantilla utiliza un recurso personalizado para copiar los recursos del sitio web estático desde un bucket de S3 central a su propio bucket dedicado. Para que el recurso personalizado escriba en el nuevo bucket de su cuenta, este debe crear un rol de IAM que pueda asumir con dichos permisos.

  6. Espere hasta que la pila wildrydes-webapp-1 alcance el estado CREATE_COMPLETE.

  7. Con la pila wildrydes-webapp-1 seleccionada, haga clic en la pestaña Outputs (Salidas) y, después, en el enlace WebsiteURL.

  8. Verifique que la página de inicio de Wild Rydes se está cargando correctamente y pase al módulo siguiente, Administrar usuarios.

Instrucciones de implementación

Siga las instrucciones paso a paso a continuación para alojar un sitio web estático. Haga clic en cada uno de los números de paso para ampliar la sección correspondiente.

  • Paso 1. Seleccionar una región

    Seleccionar una región

    Esta aplicación web se puede implementar en cualquier región de AWS que admita todos los servicios utilizados en la aplicación, entre los que se incluyen Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon S3 y Amazon DynamoDB.

    Consulte la tabla de regiones para ver qué regiones cuentan con los servicios admitidos. A continuación, se indican algunas de las regiones admitidas que puede elegir:

    • EE. UU. Este (Norte de Virginia)
    • EE.UU. Este (Ohio)
    • EE.UU. Oeste (Oregón)
    • UE (Fráncfort)
    • UE (Irlanda)
    • UE (Londres)
    • Asia Pacífico (Tokio)
    • Asia Pacífico (Seúl)
    • Asia Pacífico (Sídney)
    • Asia Pacífico (Mumbai)

     

    Seleccione la región en el menú desplegable de la esquina superior derecha de la consola de administración de AWS.

    (Haga clic para ampliar)

  • Paso 2. Crear un bucket de S3

    Crear un bucket de S3

    Amazon S3 se puede utilizar para alojar sitios web estáticos sin necesidad de configurar ni administrar ningún servidor web. En este paso, vamos a crear un nuevo bucket de S3 que se utilizará para alojar todos los recursos estáticos (por ejemplo, archivos HTML, CSS, JavaScript y de imagen) para su aplicación web. 

    En el paso, se utilizará la consola o la CLI de AWS para crear un bucket de Amazon S3. Tenga en cuenta que el nombre del bucket debe ser único de forma global. Se recomienda utilizar un nombre como wildrydes-firstname-lastname. Si obtiene un error que indica que el nombre del bucket ya existe, pruebe a añadir números o caracteres adicionales hasta encontrar un nombre que no se utilice.

    1. En la consola de administración de AWS, elija Services (Servicios) y, a continuación, seleccione S3 en Storage (Almacenamiento).
    2. Seleccione la opción +Create Bucket (+Crear bucket).
    3. Proporcione un nombre exclusivo de forma global para su bucket, como wildrydes-firstname-lastname. Si obtiene un error que indica que el nombre del bucket ya existe, pruebe a añadir números o caracteres adicionales hasta encontrar un nombre que no se utilice.
    4. Seleccione la región que ha decidido utilizar para este taller en el menú desplegable.
    5. Elija Create (Crear) en la esquina inferior izquierda del cuadro de diálogo, sin seleccionar ningún bucket del que copiar la configuración.

  • Paso 3. Cargar contenido

    Cargar contenido

    En este paso, cargará los recursos del sitio web para este módulo en su bucket de S3. Para completar el paso, puede utilizar la consola de administración de AWS (requiere el navegador Google Chrome), la CLI de AWS o la plantilla de CloudFormation proporcionada. Si ya tiene la CLI de AWS instalada y configurada en su máquina local, se recomienda utilizar ese método. De lo contrario, utilice la consola, si tiene instalada la última versión de Google Chrome. 

    Instrucciones paso a paso para la consola

    Para cargar todos los archivos y subdirectorios en un directorio local mediante la consola de administración de AWS, debe utilizar la última versión del navegador web Chrome. Si no puede utilizar Chrome, siga las instrucciones para utilizar la CLI de AWS o la plantilla de CloudFormation proporcionada.

    1. Utilice este enlace para descargar un archivo del repositorio.

    2. Descomprima el archivo que ha descargado en su máquina local.

    3. Abra la consola de administración de AWS en Chrome. Elija Servicios y, a continuación, seleccione S3 bajo almacenamiento.

    4. Seleccione el bucket que creó en el paso anterior y asegúrese de que aparece la pestaña Información general.

    5. Abra el explorador de archivos de Windows o Finder en macOS y vaya al contenido expandido del archivo .zip que descargó en el primer paso.

    6. Vaya al directorio WebApplication/1_StaticWebHosting/website de su máquina local.

    7. Seleccione todos los archivos y subdirectorios bajo el directorio del sitio web. Asegúrese de que el directorio en sí no está seleccionado.

    8. Arrastre y suelte los archivos seleccionados desde el sistema de archivos local hasta el contenido ubicado en la pestaña Información general en la consola de S3.

    9. Elija Cargar en la esquina inferior izquierda del cuadro de diálogo que aparece.

    10. Espere a que se complete la carga y asegúrese de que el contenido del directorio del sitio web aparece en la consola de S3. Si solo aparece un directorio website, debe eliminarlo del bucket y seguir estas instrucciones de nuevo, asegurándose de seleccionar solamente el contenido del directorio antes de arrastrar y soltar en la consola de S3.

    Instrucciones paso a paso para la CLI

    Si ya tiene la CLI instalada y configurada, puede utilizarla para copiar los recursos web necesarios de s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website en su bucket.

    1. Ejecute el comando siguiente, asegurándose de reemplazar YOUR_BUCKET_NAME por el nombre que ha utilizado en la sección anterior y YOUR_BUCKET_REGION por el código de la región (por ejemplo, us-east-2) en la que ha creado el bucket.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region YOUR_BUCKET_REGION

    2. Si el comando se ejecuta correctamente, aparecerá una lista de los objetos que se han copiado en el bucket.

     

    Instrucciones paso a paso para CloudFormation

    Si no puede utilizar ninguno de los métodos anteriores, inicie la plantilla de CloudFormation proporcionada para copiar los recursos necesarios en su bucket de S3. Para iniciar una plantilla de CloudFormation, seleccione una región y haga clic en el enlace Lanzar pila de la sección de plantillas de CloudFormation de este módulo.

  • Paso 4. Añadir una política de bucket para permitir la lectura pública

    Añadir una política de bucket para permitir la lectura pública

    Defina quién puede obtener acceso al contenido de sus buckets de S3 mediante una política de bucket. Los políticas de bucket son documentos JSON que especifican las entidades principales a las que se les permite ejecutar diversas acciones en relación con los objetos de su bucket.

    En este paso, añadirá una política de bucket a su nuevo bucket de Amazon S3 para permitir que los usuarios anónimos puedan ver su sitio. De forma predeterminada, solo los usuarios autenticados con acceso a su cuenta de AWS pueden obtener acceso al bucket.

    Consulte este ejemplo de una política que concede acceso de solo lectura a los usuarios anónimos. Esta política de ejemplo permite que cualquier persona que esté conectada a Internet pueda ver su contenido. La forma más sencilla de actualizar una política de bucket consiste en utilizar la consola. Seleccione el bucket, elija la pestaña de permisos y, a continuación, seleccione Bucket Policy (Política de bucket).

    1. En la consola de S3, seleccione el nombre del bucket que creó en la sección 1.
    2. Elija la pestaña Permisos y, a continuación, elija Política de bucket.
      1. En la consola de S3, seleccione el nombre del bucket que creó en la sección 1.
      2. Elija la pestaña Permisos y, a continuación, asegúrese de que la configuración de acceso público esté seleccionada.
      3. Haga clic en Editar y desmarque:
        • “Bloquear nuevas políticas de bucket”
        • “Bloquear el acceso público y entre cuentas si el bucket tiene políticas públicas”
      4. Haga clic en Guardar.
      5. Escriba “confirmar” y, a continuación, haga clic en Confirmar en la ventana modal de confirmación que aparece. 
      6. Mientras está en la pestaña de Permisos, elija Política de bucket.  
    3. Introduzca el documento de políticas siguiente en el editor de políticas de bucket y reemplace [YOUR_BUCKET_NAME] por el nombre del bucket que creó en la sección 1:
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
    1. Elija Save (Guardar) para aplicar la nueva política.

  • Paso 5. Habilitar el alojamiento de sitios web

    Habilitar el alojamiento de sitios web

    De forma predeterminada, los objetos de un bucket de S3 están disponibles a través de direcciones URL con la estructura http://.amazonaws.com//. Para ofrecer recursos de la URL raíz (por ejemplo, /index.html), tendrá que habilitar el alojamiento de sitios web en el bucket. Al hacerlo, sus objetos estarán disponibles en el punto de enlace del sitio web específico de la región de AWS del bucket: .s3-website-.amazonaws.com.

    También puede utilizar un dominio personalizado para su sitio web. Por ejemplo, http://www.wildrydes.com se aloja en S3. En este taller no se indica cómo configurar un dominio personalizado, pero puede encontrar instrucciones detalladas en nuestra documentación.

    En este paso, utilizará la consola para habilitar el alojamiento de sitios web estáticos. Puede realizar esta acción en la pestaña Properties (Propiedades), después de haber seleccionado el bucket. Establezca index.html como documento de índice y deje el documento de errores en blanco. Consulte la documentación acerca de cómo configurar un bucket para el alojamiento de sitios web estáticos a fin de obtener más información.

    1. En la página de detalles del bucket de la consola de S3, elija la pestaña Properties (Propiedades).
    2. Elija Static website hosting (Alojamiento de sitios web estáticos).
    3. Seleccione Use this bucket to host a website (Usar este bucket para alojar un sitio web) y especifique index.html como documento de índice. Deje el resto de los campos en blanco.
    4. Anote la URL de Endpoint (Punto de enlace), en la parte superior del cuadro de diálogo, antes de elegir Save (Guardar). Esta URL se utilizará en el resto de este taller para ver su aplicación web y a partir de ahora nos referiremos a ella como URL base del sitio web.
    5. Haga clic en Save (Guardar) para guardar sus cambios.

  • Paso 6. Validar su implementación

    Validar su implementación

    Una vez completados estos pasos de implementación, debería poder obtener acceso a su sitio web estático a través de la URL del punto de enlace del sitio web para su bucket de S3.

    Visite la URL base del sitio web (la URL que anotó en la sección anterior) en el navegador que prefiera. Debería aparecer la página de inicio de Wild Rydes. Si necesita buscar la URL base, visite la consola de S3, seleccione su bucket y, a continuación, haga clic en Static Web Hosting (Alojamiento web estático) en la pestaña Properties (Propiedades).

    Si la página se representa correctamente (vea una captura de pantalla de ejemplo a continuación), puede pasar al módulo siguiente, Administrar usuarios.

Siguiente: Administrar usuarios