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

Serverless_Web_App_LP_assets-02

La arquitectura de este módulo es muy sencilla. Todo el contenido web estático como HTML, CSS, JavaScript, imágenes y otros archivos se almacenan en Amazon S3. A continuación, los usuarios finales acceden a su sitio web mediante la dirección URL del sitio web público expuesto por Amazon S3. No es necesario ejecutar los servidores web o utilizar otros servicios para hacer que su sitio esté disponible.

A los efectos de este módulo, utilizará la URL de punto de enlace de sitios web de Amazon S3 que ofrecemos. Tiene la forma http://{your-bucket-name}.s3-website.{region}.amazonaws.com. Para la mayoría de las aplicaciones reales, utilizará un dominio personalizado para alojar su sitio web. Si está interesado en utilizar un su propio dominio, siga las instrucciones sobre cómo 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

Los servicios utilizados: Amazon S3

Plantilla de CloudFormation: Si ya está cómodo trabajando con Amazon S3, o si desea pasar a trabajar 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 >
Serverless_Web_App_LP_assets-17

Instrucciones de lanzamiento de CloudFormation

  1. Haga clic en el enlace anterior Lanzar pila para la región de su elección.

  2. Haga clic en Siguiente en la página Seleccionar plantilla.

  3. Proporcione un nombre exclusivo para el Nombre del depósito del sitio web como, por ejemplo, wildrydes-sunombre y, a continuación, haga clic en Siguiente.

  4. En la página de Opciones, deje todos los valores predeterminados y haga clic en Siguiente.

  5. En la página Análisis, marque la casilla para confirmar que CloudFormation creará los recursos de IAM y, a continuación, haga clic en Crear.

    Esta plantilla utiliza un recurso personalizado para copiar los activos del sitio web estático de un bucket de S3 central en su propio bucket específico. Para que los recursos personalizados escriban al nuevo bucket en su cuenta, debe crear una función de IAM que pueda asumir con esos permisos.

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

  7. Con la pila wildrydes-webapp-1 seleccionada, haga clic en la pestaña Resultados y haga clic en el enlace de URL de sitio web.

  8. Verifique que la página de inicio de Wild Rydes se carga correctamente y pase al siguiente módulo, Administración de usuarios.


Siga las instrucciones paso a paso que se detallan a continuación para alojar un sitio web estático. Haga clic en cada número de paso para expandir la sección.

  • Paso 1. Selección de una región


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

    Puede consultar la tabla de región para ver qué regiones tienen los servicios compatibles. Entre las regiones compatibles que puede elegir están:

    • EE.UU. Este (Norte de Virginia)
    • EE.UU. Este (Ohio)
    • EE.UU. Oeste (Oregón)
    • UE (Frankfurt)
    • 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.

    region

    (Haga clic para agrandar)

    region
  • Paso 2. Crear un bucket de S3

    Amazon S3 puede utilizarse para alojar sitios web estáticos sin tener que configurar ni administrar servidores web. En este paso, creará un nuevo bucket de S3 que se utilizará para alojar todos los activos estáticos (por ejemplo, HTML, CSS JavaScript e imágenes) para su aplicación web. 

    En este paso, utilice la consola o la CLI de AWS para crear un bucket de Amazon S3. Tenga en cuenta que el nombre de su bucket debe ser único de forma global. Le recomendamos que utilice un nombre como wildrydes-nombre-apellido. Si aparece un error diciendo que el nombre del bucket ya existe, pruebe añadir más números o caracteres hasta encontrar un nombre que no haya sido utilizado.


    1. En la consola de administración de AWS, elija Servicios a continuación, seleccione S3 en Almacenamiento.
    2. Seleccione la opción Crear bucket
    3. Especifique un nombre exclusivo para su bucket como, por ejemplo wildrydes-nombre-apellido. Si aparece un error diciendo que el nombre del bucket ya existe, pruebe añadir más números o caracteres hasta encontrar un nombre que no haya sido utilizado.
    4. Seleccione la región que ha elegido utilizar para este taller en el menú desplegable.
    5. Elija Crear en la parte inferior izquierda del cuadro de diálogo sin seleccionar un bucket para copiar la configuración.
  • Paso 3. Añadir contenido

    En este paso, cargue los activos del sitio web para este módulo en su bucket de S3. Puede utilizar la consola de administración de AWS (requiere navegador Google Chrome), la CLI de AWS o la plantilla de CloudFormation provista para completar este paso. Si ya tiene la CLI de AWS instalada y configurada en su equipo local, le recomendamos que utilice este método. De lo contrario, utilice la consola si tiene la última versión de Google Chrome instalada.

    Instrucciones paso a paso de la consola

    Para cargar todos los archivos y subdirectorios en un directorio local a través de la consola de administración de AWS, debe utilizar la versión más reciente del navegador web de Chrome. Si no puede utilizar Chrome, siga las instrucciones para utilizar la CLI de AWS o la plantilla de CloudFormation.

    1. Descargue un archivo de este repositorio utilizando este enlace.

    2. Descomprima el archivo que ha descargado en su equipo local.

    3. Abra la consola de administración de AWS en Chrome. Elija Servicios y luego seleccione S3 en Almacenamiento.

    4. Seleccione el bucket que ha creado en el paso anterior y asegúrese que está viendo la pestaña Objetos.

    5. Abra Windows File Explorer o macOS Finder y acceda para expandir el contenido del archivo zip que ha descargado en el primer paso.

    6. Busque el sitio web WebApplication/1_StaticWebHosting/directorio de su equipo local.

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

    8. Arrastre los archivos seleccionados de su sistema de archivos local al contenido en la pestaña Objetos en la consola de S3.

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

    10. Espere a que la carga se complete y asegúrese de que ve el contenido del directorio del sitio web que se encuentran en la consola de S3. Si solo ve un único directorio de sitio web debe eliminarlo desde su bucket y seguir estas instrucciones de nuevo para garantizar que selecciona únicamente el contenido del directorio antes de arrastrar y soltar en la consola de S3.

    Instrucciones paso a paso de la CLI

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

    1. Ejecute el siguiente comando asegurándose de sustituir YOUR_BUCKET_NAME con el nombre que utilizó en la sección anterior y YOUR_BUCKET_REGION con el código de región (p. ej., usa-este-2) en el que creó su 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 ha realizado correctamente, debería ver una lista de los objetos que se copian en su bucket.

     

    Instrucciones paso a paso de CloudFormation

    Si no puede utilizar cualquiera de los métodos anteriores, puede lanzar la plantilla de CloudFormation proporcionada para copiar los recursos necesarios en su bucket de S3. Lance una plantilla de CloudFormation seleccionando una región y haciendo clic en el enlace Lanzar pila en la sección de la plantilla de CloudFormation de este módulo. 

  • Paso 4. Añadir una política de bucket para permitir lecturas públicas

    Puede definir quién puede acceder al contenido de los buckets de S3 utilizando una política de bucket. Las políticas de buckets son documentos JSON que especifican qué poderdantes pueden ejecutar distintas acciones con los objetos en su bucket.

    En este paso, añada una política de bucket al nuevo bucket de Amazon S3 para que los usuarios anónimos vean sus instalaciones. De forma predeterminada solo pueden acceder a su bucket los usuarios autenticados con el acceso a su cuenta de AWS.

    Consulte este ejemplo de una política que concederá acceso de solo lectura a los usuarios anónimos. Esta política de ejemplo permite a cualquier persona que se encuentra en Internet ver el contenido. La forma más sencilla de actualizar una directiva de bucket es utilizar la consola. Seleccione el bucket, elija la pestaña de permisos y, a continuación, seleccione política de depósito.


    1. En la consola de S3, seleccione el nombre del bucket que ha creado en el apartado 1.
    2. Elija la pestaña Permisos y, a continuación, elija Política de bucket.
    3. Introduzca la siguiente política de documento en la política del bucket, al reemplazar [YOUR_BUCKET_NAME] con el nombre del bucket que ha creado en el apartado 1:
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow", 
                "Principal": "*", 
                "Action": "s3:GetObject", 
                "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
            } 
        ] 
    }
    
    1. Elija Guardar para aplicar la nueva política.
  • Paso 5. Habilitar alojamiento de sitios web

    De forma predeterminada, los objetos en un bucket de S3 se encuentran disponibles a través de direcciones URL con la estructura http://.amazonaws.com//. Para ofrecer activos desde la URL de raíz (p. ej., /index.html), deberá activar el alojamiento de sitios web en el bucket. Esto hará que los objetos se encuentren 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 está alojado en S3. La configuración de un dominio personalizado no está cubierta en este taller, pero puede encontrar instrucciones detalladas en nuestra documentación.

    En este paso, utilice la consola para habilitar el alojamiento de sitios web estáticos. Puede hacerlo en la pestaña Propiedades después de haber seleccionado el bucket. Establezca index.html como el índice de documentos y deje el documento de error en blanco. Consulte la documentación sobre cómo configurar un bucket para el alojamiento de sitios web estáticos para obtener más información.


    1. Desde la página de detalles de bucket en la consola S3, elija la pestaña Propiedades.
    2. Elija la tarjeta de Alojamiento de sitios web estáticos.
    3. Seleccione Utilizar este bucket para alojar un sitio web y escriba index.html para el documento índice. Deje el resto de los campos en blanco.
    4. Anote la URL de Punto de enlace en la parte superior del cuadro de diálogo antes de elegir Guardar. Utilizará esta URL a lo largo del resto del taller para ver su aplicación web. En adelante, esta URL se denomina la URL base de su sitio web.
    5. Haga clic en Guardar para guardar sus cambios.
  • Paso 6. Valide su implementación

    Después de realizar estas instrucciones de implementación debe tener la posibilidad de acceder a su sitio web estático; para ello, visite la URL de sitio web de punto de enlace para su bucket de S3.

    Visite la URL de base de su sitio web (esta es la dirección URL que ha anotado en la sección anterior) en el navegador de su elección. Debería ver la página de inicio de Wild Rydes. Si necesita buscar la URL base, visite la consola de S3 y seleccione su bucket y, a continuación, haga clic en Alojamiento de sitios web estáticos en la pestaña Propiedades.

    Si la página funciona correctamente (a continuación encontrará una captura de pantalla de ejemplo), puede pasar al siguiente módulo Administración de usuarios.

    wildrydes-homepage