Proyectos en AWS

Crear una aplicación web moderna

Implemente una aplicación web, conéctese a una base de datos y analice el comportamiento del usuario

Módulo 1: Crear un sitio web estático

En este módulo, alojará su sitio web estático en Amazon S3 y configurará su IDE basado en la nube, AWS Cloud9.  

Información general

En este módulo, alojaremos el contenido estático (html, js, css, contenido multimedia, etc.) de nuestro sitio web Mythical Mysfit en Amazon S3 (Simple Storage Service). S3 es un servicio de almacenamiento de objetos económico altamente duradero y altamente disponible que puede brindar objetos almacenados directamente a través de HTTP. Esto hace que sea maravillosamente útil para ofrecer contenido web estático directamente a los exploradores web para sitios de internet.

Antes de comenzar a almacenar nuestros mysfits en S3, configuremos AWS Cloud9 para usted. Cloud9 es un entorno de desarrollo integrado (IDE) basado en la nube que le permite escribir, ejecutar y depurar su código solo con un navegador.  

Diagrama de la arquitectura

crear un sitio web estático

 Tiempo de realización

20 minutos

Instrucciones de implementación

  • A: Iniciar sesión en la consola de AWS

    Para comenzar, inicie sesión en la consola de AWS para la cuenta de AWS que estará usando en este taller.

    B: 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. Consulte la tabla de regiones para ver qué regiones cuentan con los servicios admitidos. Las regiones admitidas son:

    • us-east-1 (Norte de Virginia)
    • us-east-2 (Ohio)
    • us-west-2 (Oregón)
    • eu-west-1 (Irlanda)

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

  • A: Cree un nuevo entorno de AWS Cloud9

    En la página de inicio de la consola de AWS, escriba Cloud9 en la barra de búsqueda de servicio y selecciónela:

    crear un bot de lex

    (Haga clic para ampliar)

    Haga clic en Crear entorno en la página de inicio de Cloud9:

    crear un bot de lex

    (Haga clic para ampliar)

    crear un bot de lex

    Nombre su entorno MythicalMysfitsIDE con cualquier descripción que le guste, y haga clic en Siguiente paso:

    crear un bot de lex

    (Haga clic para ampliar)

    crear un bot de lex

    Deje el ajuste de Entorno predeterminado y haga clic en Siguiente paso:

    crear un bot de lex

    (Haga clic para ampliar)

    crear un bot de lex

    Haga clic en Crear entorno:

    crear un bot de lex

    (Haga clic para ampliar)

    crear un bot de lex

    Cuando el IDE haya terminado de crearse, se le presentará una pantalla de bienvenida que se ve así:

    crear un bot de lex

    (Haga clic para ampliar)

    crear un bot de lex
    B: Clonar el repositorio de taller de Mythical Mysfits

    En el panel inferior, verá una línea de comando terminal abierta y lista para usar. Ejecute el siguiente comando git en la terminal para clonar el código necesario para completar este tutorial:

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    Después de clonar el repositorio, verá que su explorador de proyecto ahora incluye los archivos clonados:

    archivos clonados

    (Haga clic para ampliar)

    archivos clonados

    En la terminal, cambiar directorio al directorio de repositorio recientemente clonado:

    cd aws-modern-application-workshop
  • A: Cree un bucket S3 y configúrela para el alojamiento de sitio web

    Luego, crearemos los componentes de infraestructura necesarios para alojar un sitio web estático en Amazon S3 a través de AWS CLI.

    Primero, creará un bucket S3 y sustituya el nombre a continuación (mythical-mysfits-bucket-name) con su propio nombre de bucket único. Nota: consulte los requisitos para nombres de bucket. Copie el nombre que elija y guárdelo para después, ya que lo usará en otros lugares durante este taller:

    aws s3 mb s3://REPLACE_ME_BUCKET_NAME

    Ahora que hemos creado un bucket, debemos establecer ciertas opciones de configuración que permiten usar el bucket para el alojamiento del sitio web estático. Esta configuración permite que se soliciten los objetos del bucket mediante un nombre de DNS público registrado para el bucket, así como solicitudes de sitio directos a la ruta base del nombre DNS para una página de inicio de sitio web seleccionada (index.html en la mayoría de los casos):

    aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
    B: Actualizar la política de bucket S3

    Todos los buckets creados en Amazon S3 son completamente privados de manera predeterminada. A fin de utilizarla como sitio web público, debemos crear una Política de bucket S3 que indique que cualquiera puede acceder públicamente a los objetos almacenados dentro de este nuevo bucket. Las políticas de bucket se representan como documentos JSON que definen las acciones S3 (llamadas de API S3) que se pueden (o no) realizar mediante diferentes agentes principales (en nuestro caso el público, o nadie).

    El documento JSON para la política de bucket necesaria se encuentra en: ~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json. Este archivo contiene una cadena que se debe sustituir con el nombre de bucket que ha elegido (indicado con REPLACE_ME_BUCKET_NAME).

    Nota: Durante este taller estará de manera similar abriendo archivos con contenidos que se deben sustituir (todos tendrán el prefijo REPLACE_ME_, para que sean más fáciles de encontrar utilizando CTRL-F en Windows o ⌘-F en Mac.) 

    Para abrir un archivo en Cloud9, use el Explorador de archivos en el panel izquierdo y haga doble clic en website-bucket-policy.json:

    abra el archivo en Cloud9

    (Haga clic para ampliar)

    abra un archivo en Cloud9

    Esto abrirá bucket-policy.json en el panel de Editor de archivos. Sustituya la cadena que se muestra con el nombre de bucket utilizado en los comandos anteriores:

    sustituya el nombre del bucket

    (Haga clic para ampliar)

    sustituya el nombre del bucket

    Ejecutar el siguiente comando CLI para agregar una política de bucket pública en su sitio web:

    aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
    C: Publicar el contenido del sitio web en S3

    Ahora que nuestra nuevo bucket de sitio web se configuró de manera adecuada, agreguemos la primera iteración de la página de inicio Mythical Mysfits al bucket. Use el siguiente comando S3 CLI que simula el comando linux para copiar archivos (cp) a copiar la página index.html proporcionada de manera local de su IDE hasta el nuevo bucket S3 (sustituyendo el nombre del bucket de manera adecuada).

     aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html 

    Ahora, abra su navegador web preferido e ingrese uno de los siguientes URI en la barra de direcciones. Uno de los siguientes URI contiene un '.' antes del nombre de región, y los demás un '-'. El que daba usar depende de la región que está usando.

    La cadena para sustituir REPLACE_ME_YOUR_REGION debería coincidir con la región en la que creó el bucket S3 (por ejemplo: us-east-1):

    Para us-east-1 (Norte de Virginia), us-west-2 (Oregón), eu-west-1 (Irlanda) use:

    http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com

    Para us-east-2 (Ohio) use:

    http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
    mysfits-welcome

    ¡Felicitaciones, ha creado el sitio web básico y estático de Mythical Mysfits!

    Con esto concluye el Módulo 1.

A continuación, aloje su aplicación en un servidor web.