Implementación

• Seleccione 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 AWS Amplify, AWS CodeCommit, Amazon Cognito, AWS Lambda, Amazon API Gateway y Amazon DynamoDB.

  Puede consultar la lista de servicios regionales de AWS para ver qué regiones tienen los servicios compatibles. A continuación, se indican algunas de las regiones admitidas que puede elegir:

  • Este de EE. UU. (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 (Bombay)

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

  

• Cree un repositorio de Git

  Tiene dos opciones para administrar el código fuente para este módulo: AWS CodeCommit (incluido en el nivel gratuito de AWS) o GitHub. En este tutorial, usaremos CodeCommit para almacenar el código de la aplicación. Sin embargo, puede hacerlo mediante la creación de un repositorio en GitHub.

  1. Si nunca configuró AWS CLI en la máquina local, abra una ventana del terminal para instalar AWS CLI. Las instrucciones de instalación varían según el sistema operativo que utilice. Si ya tiene AWS CLI instalada y configurada, vaya al paso 2.
  2. Abra la consola de AWS CodeCommit.
  3. Seleccione Crear repositorio.
  4. Ingrese wildrydes-site como nombre del repositorio.
  5. Elija Crear.
  6. Una vez creado el repositorio, configure un usuario de IAM con credenciales de Git en la consola de IAM. Siga las instrucciones del paso 1 al paso 3 de la página Configuración para usuarios de HTTPS que utilizan credenciales de Git de la Guía del usuario de AWS CodeCommit. 
     Nota importante: Al configurar el usuario en la consola de IAM, tendrá que configurar y guardar dos conjuntos de credenciales para consultarlos.
     1. Debe crear claves de acceso en la pestaña IAM > Credenciales de seguridad. Descargue los ID de clave de acceso y clave de acceso secreta o cópielos y guárdelos en un lugar seguro.
     2. También debe generar credenciales Git HTTPS para AWS CodeCommit. Descargue o guarde también estas credenciales generadas.
  7. En la ventana del terminal que utilizó para instalar AWS CLI, ingrese el comando aws configure.
  8. Ingrese el ID de clave de acceso de AWS y la clave de acceso secreta que creó en el paso 6. 
  9. En Nombre de región predeterminado, ingrese la región que seleccionó inicialmente para crear el repositorio de CodeCommit.
  10. Deje en blanco el formato de salida predeterminado y pulse Intro. 

  El siguiente bloque de código es un ejemplo de lo que verá en la ventana del terminal.

  % aws configure
  AWS Access Key ID [****************]: #####################
  AWS Secret Access Key [****************]: ###################
  Default region name [us-east-1]: us-east-1
  Default output format [None]: 

  Code snippet copied

  Copiar

      11. Configure el ayudante de credenciales de configuración de Git en la ventana del terminal.

  • Si tiene una máquina Linux, macOS o UNIX, consulte las instrucciones del Paso 3: configurar el ayudante de credenciales para Linux, macOS o UNIX.
  • Si tiene una máquina Windows, consulte las instrucciones del Paso 3: configurar el ayudante de credenciales para Windows.

  git config --global credential.helper '!aws codecommit credential-helper $@'
  git config --global credential.UseHttpPath true

  Code snippet copied

  Copiar

      12. Vuelva a la consola de AWS CodeCommit y seleccione el repositorio wildrydes-site.

      13. Seleccione Clonar HTTPS en el menú desplegable Clonar URL para copiar la URL HTTPS. 

  

      14. Desde la ventana del terminal, ejecute git clone y pegue la URL HTTPS del repositorio. 

  El siguiente bloque de código es un ejemplo de lo que verá en la ventana del terminal:
  
  

  $ git clone https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
  Cloning into ‘wildrydes-site’...
  Username for ‘https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site’: Enter the HTTPS Git credentials for AWS CodeCommit username you generated in Step 6
  Password for ‘https://[email protected]/v1/repos/wildrydes-site’: Enter the HTTPS Git credentials for AWS CodeCommit password you generated in Step 6
  warning: You appear to have cloned an empty repository.

  Code snippet copied

  Copiar

  Aparecerá una advertencia para indicar que parece que ha clonado un repositorio vacío (este es el comportamiento esperado). 

  Para ver las soluciones habituales a los errores que se producen al clonar el repositorio, consulte Solución de problemas con el ayudante de credenciales y las conexiones HTTPS con AWS CodeCommit. 

• Rellene el repositorio de Git

  Luego de haber utilizado AWS CodeCommit o GitHub para crear el repositorio de Git y clonarlo localmente, deberá copiar el contenido del sitio web de un bucket de S3 con acceso público existente asociado con este tutorial y agregar el contenido al repositorio.
  

  1. Cambie el directorio al repositorio y copie los archivos estáticos de S3 mediante los siguientes comandos (asegúrese de cambiar la región en el siguiente comando para copiar los archivos del bucket de S3 a la región que seleccionó al principio de este tutorial):
     cd wildrydes-site
     aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive
  2. Agregue, confirme y envíe los archivos de Git. 

  El siguiente bloque de código es un ejemplo de lo que verá en la ventana del terminal:

  $ git add .
  $ git commit -m "new files"
  $ git push
  
  Counting objects: 95, done.
  Compressing objects: 100% (94/94), done.
  Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done.
  Total 95 (delta 2), reused 0 (delta 0)
  To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
  * [new branch] master -> master

  Code snippet copied

  Copiar
• Habilite el alojamiento web con la consola de AWS Amplify

  A continuación, utilizará la consola de AWS Amplify para implementar el sitio web que acaba de confirmar en Git. La consola de Amplify se encarga de configurar un lugar para almacenar el código de la aplicación web estática y proporciona varias capacidades útiles que simplifican el ciclo de vida de la aplicación y permiten las prácticas recomendadas.

  1. Lance la consola de AWS Amplify. 
  2. Elija Introducción. 
  3. En el encabezado Aloje su aplicación web de Amplify Host, elija Comenzar. 
  4. En la página Comenzar a usar Amplify Hosting, seleccione AWS CodeCommit y elija Continuar.
  5. En el paso Agregar ramificación de repositorio, seleccione wildrydes-site en el menú desplegable Seleccionar un repositorio.
  6. Si utilizó GitHub, deberá autorizar AWS Amplify en la cuenta de GitHub.
  7. En el menú desplegable Ramificación, seleccione master y seleccione Siguiente. 

  

      8. En la página Configuración de compilación, deje todos los valores predeterminados, seleccione Permitir que AWS Amplify implemente automáticamente todos los archivos alojados en el directorio raíz del proyecto y elija Siguiente.

      9. En la página Revisar seleccione Guardar e implementar.

      10. En el proceso, la consola de Amplify tarda algunos minutos en crear los recursos necesarios e implementar el código.
  

  Una vez completado, seleccione la imagen del sitio o el enlace que hay debajo de la miniatura para lanzar el sitio de Wild Rydes. Si selecciona el enlace de master, verá los detalles de creación e implementación relacionados con la ramificación. 
  

  

  

• Modifique el sitio

  La consola de AWS Amplify volverá a compilar e implementar la aplicación al detectar cambios en el repositorio conectado. Haga un cambio a la página principal para probar este proceso.

  1. En la máquina local, vaya a la carpeta wildrydes-site y abra el archivo index.html en el editor de texto que prefiera. 
  2. Modifique la línea del título con el siguiente texto: <title>Wild Rydes - Rydes of the Future!</title>.
  3. Guarde el archivo. 
  4. En la ventana del terminal, agregue, confirme el cambio y vuelva a colocarlo en el repositorio de Git. La consola de Amplify comenzará a compilar el sitio nuevamente poco tiempo después de notar la actualización del repositorio. Ocurrirá rápidamente. Regrese a la página de la consola de AWS Amplify para observar el proceso.

  El siguiente bloque de código es un ejemplo de lo que verá en la ventana del terminal: 

  $ git add index.html 
  $ git commit -m "updated title"
  [master dfec2e5] updated title
   1 file changed, 1 insertion(+), 1 deletion(-)
  
  $ git push
  Counting objects: 3, done.
  Compressing objects: 100% (3/3), done.
  Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done.
  Total 3 (delta 2), reused 0 (delta 0)
  remote: processing 
  To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
     2e9f540..dfec2e5  master -> master

  Code snippet copied

  Copiar

      5. Una vez que Amplify haya completado la nueva implementación, vuelva a abrir el sitio de Wild Rydes y observe el cambio en el título de la pestaña.

   

  

• Resumen

  En este módulo, ha creado un sitio web estático, que será la base para el negocio de Wild Rydes. La consola de AWS Amplify permite implementar sitios web estáticos bajo un modelo de integración y entrega continuas. Tiene capacidades para compilar aplicaciones basadas en el marco de JavaScript más complejas y tiene características como las implementaciones de ramificaciones de características, la fácil configuración de dominios personalizados, las implementaciones instantáneas y la protección de contraseñas.