Tutorial: Creación de un proyecto con el modelo de aplicación web moderna de tres niveles

Abra la CodeCatalyst consola en https://codecatalyst.aws/.

En la CodeCatalyst consola, navegue hasta el espacio en el que desee crear un proyecto.

Elija Crear proyecto.

Selecciona Empezar con un plano.

En la barra de búsqueda, ingrese modern.

Seleccione el esquema de aplicación web moderna de tres niveles y, a continuación, elija Siguiente.

En Asigne un nombre a su proyecto, introduzca un nombre de proyecto. Por ejemplo:

MyExampleProject.

En Cuenta, selecciona el Cuenta de AWS que añadiste al registrarte. El plano instalará los recursos en esta cuenta.

En Función de implementación, elija la función que agregó durante el registro. En este ejemplo, elija CodeCatalystWorkflowDevelopmentRole-spaceName.

Si no hay ningún rol en la lista, añada uno. Para añadir un rol, elija Añadir rol de IAM y añada el rol al suyo Cuenta de AWS. Para obtener más información, consulte Permitir el acceso a AWS los recursos con conexión Cuentas de AWS.

En la plataforma de cómputo, elija Lambda.

En la opción de alojamiento frontend, elija Amplify Hosting. Para obtener información al respecto AWS Amplify, consulte ¿Qué es AWS Amplify el alojamiento? en la Guía AWS Amplify del usuario.

En la región de despliegue, introduzca el código de la región en la Región de AWS que desea que el plano despliegue la aplicación Mysfits y los recursos de apoyo. Para obtener una lista de los códigos de región, consulte los puntos finales regionales en. Referencia general de AWS

En Nombre de la aplicación, deje el valor predeterminado demysfitsstring.

(Opcional) En Generar vista previa del proyecto, seleccione Ver código para obtener una vista previa de los archivos fuente que se instalarán en el blueprint. Seleccione Ver flujo de trabajo para obtener una vista previa de los archivos de definición del flujo de trabajo de CI/CD que se instalarán en el blueprint. La vista previa se actualiza de forma dinámica en función de sus selecciones.

Elija Crear proyecto.

Navega hasta el proyecto al que quieres invitar a los usuarios.

En el panel de navegación, selecciona Configuración del proyecto.

En la pestaña Miembros, elija Invitar.

Escribe las direcciones de correo electrónico de las personas a las que quieres invitar como usuarios de tu proyecto. Puedes escribir varias direcciones de correo electrónico separadas por un espacio o una coma. También puedes elegir entre los miembros de tu espacio que no sean miembros del proyecto.

Elige el rol del usuario.

Cuando haya terminado de añadir usuarios, elija Invitar.

En el panel de navegación, elija Problemas.

Selecciona Crear problema.

En Título del problema, proporciona un nombre para el problema. Si lo desea, proporcione una descripción del problema. En este ejemplo, utilice make a change in the src/mysfit_data.json file.

Elija la prioridad, la estimación, el estado y las etiquetas. En Asignatario, selecciona +Añadirme para asignarte el problema a ti mismo.

Selecciona Crear incidencia. El problema ahora está visible en la pizarra. Elige la carta para mover la emisión a la columna En curso.

Navegue hasta su proyecto y realice una de las siguientes acciones:

• En la página de resumen de su proyecto, elija el repositorio que desee de la lista y, a continuación, elija Ver repositorio.

• En el panel de navegación, elija Código y, a continuación, elija Repositorios de origen. En Repositorios de origen, elige el nombre del repositorio de la lista. Puede filtrar la lista de repositorios escribiendo parte del nombre del repositorio en la barra de filtros.

En la página de inicio del repositorio, consulta el contenido del repositorio y la información sobre los recursos asociados, como el número de solicitudes de incorporación de datos y los flujos de trabajo. De forma predeterminada, se muestra el contenido de la rama predeterminada. Puede cambiar la vista seleccionando una rama diferente de la lista desplegable.

Abra la CodeCatalyst consola en https://codecatalyst.aws/.

Vaya al proyecto donde desea crear un entorno de desarrollo.

Elija el nombre del repositorio de la lista de repositorios de origen del proyecto. Como alternativa, en el panel de navegación, selecciona Código, elige Repositorios de código fuente y elige el repositorio para el que quieres crear un entorno de desarrollo.

En la página de inicio del repositorio, selecciona Crear entorno de desarrollo.

Elige un IDE compatible en el menú desplegable. Para obtener más información, consulte Entornos de desarrollo integrados compatibles para entornos de desarrollo.

Elija el repositorio que desea clonar, elija Trabajar en una nueva ramificación, introduzca el nombre de la ramificación en el campo Nombre de ramificación, y elija una ramificación a partir de la cual crear la ramificación nueva en el menú desplegable Crear ramificación desde.

Si lo desea, añada un alias para el entorno de desarrollo.

Si lo desea, elija el botón de editar Configuración del entorno de desarrollo para editar la configuración informática, de almacenamiento o el tiempo de espera del entorno de desarrollo.

Seleccione Crear. Mientras se crea el entorno de desarrollo, la columna de estado del entorno de desarrollo mostrará Iniciando y la columna de estado mostrará Ejecutando una vez se haya creado el entorno de desarrollo. Se abrirá una nueva pestaña con su entorno de desarrollo en el IDE que elija. Puedes editar el código y confirmar y enviar los cambios.

Navegue hasta el entorno de desarrollo de su proyecto. En AWS Cloud9, expande el menú de navegación lateral para buscar los archivos. mysfitssrcExpande y abresrc/mysfit_data.json.

En el archivo, cambie el valor del "Age": campo de 6 a 12. La línea debería tener el siguiente aspecto:

    {
        "Age": 12,
        "Description": "Twilight's personality sparkles like the night sky and is looking for a forever home with a Greek hero or God. While on the smaller side at 14 hands, he is quite adept at accepting riders and can fly to 15,000 feet. Twilight needs a large area to run around in and will need to be registered with the FAA if you plan to fly him above 500 feet. His favorite activities include playing with chimeras, going on epic adventures into battle, and playing with a large inflatable ball around the paddock. If you bring him home, he'll quickly become your favorite little Pegasus.",
        "GoodEvil": "Good",
        "LawChaos": "Lawful",
        "Name": "Twilight Glitter",
        "ProfileImageUri": "https://www.mythicalmysfits.com/images/pegasus_hover.png",
        "Species": "Pegasus",
        "ThumbImageUri": "https://www.mythicalmysfits.com/images/pegasus_thumb.png"
    },

Guarde el archivo.

Cambie al repositorio mysfits con el cd /projects/mysfits comando.

Agrega, confirma y envía tus cambios con los comandos git add, git commit y git push.

git add .
git commit -m "make an example change"
git push

En la CodeCatalyst consola, en el panel de navegación, elija CI/CD y, a continuación, elija Flujos de trabajo.

Aparece una lista de flujos de trabajo. Estos son los flujos de trabajo que el CodeCatalyst plano generó e inició al crear el proyecto.

Observe la lista de flujos de trabajo. Deberías ver cuatro:

Selecciona el ApplicationDeploymentPipelineflujo de trabajo asociado a la main sucursal, en la parte inferior. Este flujo de trabajo se ejecutó utilizando el código fuente de la main sucursal.

Aparece un diagrama de flujo de trabajo. El diagrama muestra varios bloques, cada uno de los cuales representa una tarea o acción. La mayoría de las acciones se organizan verticalmente, con las acciones de la parte superior ejecutándose antes que las de abajo. Las acciones que se organizan una al lado de la otra se ejecutan en paralelo. Todas las acciones agrupadas deben ejecutarse correctamente antes de que pueda iniciarse la acción que se encuentra debajo de ellas.

Los bloques principales son:

Seleccione la pestaña Definición (cerca de la parte superior). El archivo de definición del flujo de trabajo aparece a la derecha. El archivo tiene las siguientes secciones destacables:

Seleccione la pestaña Estado más reciente (cerca de la parte superior) y elija cualquier acción del diagrama de flujo de trabajo.

A la derecha, seleccione la pestaña Configuración para ver los ajustes de configuración utilizados por la acción durante la última ejecución. Cada parámetro de configuración tiene una propiedad coincidente en el archivo de definición del flujo de trabajo.

Deje la consola abierta y continúe con el siguiente procedimiento.

Selecciona la pestaña Estado más reciente.

En el diagrama de flujo de trabajo, elija la DeployFrontendacción.

Espere a que finalice la acción. Esté atento a que el icono «en curso» ( ) cambie a un icono de «éxito» ( ).

Elige la acción build_backend.

Selecciona la pestaña Registros y expande un par de secciones para ver los mensajes de registro de estos pasos. Puedes ver los mensajes relacionados con la configuración del backend.

Selecciona la pestaña Informes y, a continuación, selecciona el backend-coverage.xml informe. CodeCatalyst muestra el informe asociado. El informe muestra las pruebas de cobertura de código que se realizaron e indica la proporción de líneas de código que se validaron correctamente mediante las pruebas, como el 80%.

Para obtener más información sobre los informes de las pruebas, consultePruebas con flujos de trabajo.

Deje la CodeCatalyst consola abierta y continúe con el siguiente procedimiento.

Vuelva al ApplicationDeploymentPipelineflujo de trabajo y elija el enlace Ejecutar cadena de la última ejecución.

En el diagrama de flujo de trabajo, busca la DeployFrontendacción y selecciona el enlace Ver aplicación. Aparece el sitio web de Mysfit.

Busca el Pegaso Mysfit llamado Twilight Glitter. Anote el valor de la edad. Lo es6. Harás un cambio de código para actualizar la edad.

Vaya a su proyecto.

Realice una de las siguientes acciones siguientes:

• En el panel de navegación, selecciona Código, selecciona Solicitudes de extracción y, a continuación, selecciona Crear solicitud de extracción.

• En la página de inicio del repositorio, selecciona Más y, a continuación, selecciona Crear solicitud de extracción.

• En la página del proyecto, selecciona Crear solicitud de extracción.

En el repositorio de fuentes, asegúrate de que el repositorio de fuentes especificado es el que contiene el código confirmado. Esta opción solo aparece si no creaste la solicitud de extracción desde la página principal del repositorio.

En la rama de destino, elige la rama en la que deseas combinar el código después de revisarlo.

En la rama Fuente, elige la rama que contiene el código confirmado.

En el título de la solicitud de extracción, introduce un título que ayude a otros usuarios a entender qué es lo que hay que revisar y por qué.

(Opcional) En la descripción de la solicitud de retirada, proporciona información como un enlace a los problemas o una descripción de tus cambios.

(Opcional) En Problemas, selecciona Vincular problemas y, a continuación, elige un problema de la lista o introduce su ID. Para desvincular una incidencia, selecciona el icono de desvinculación.

(Opcional) En Revisores obligatorios, selecciona Agregar revisores obligatorios. Elija de la lista de miembros del proyecto para añadirlos. Los revisores necesarios deben aprobar los cambios antes de poder fusionar la solicitud de extracción en la sucursal de destino.

(Opcional) En Revisores opcionales, selecciona Añadir revisores opcionales. Elija de la lista de miembros del proyecto para añadirlos. Los revisores opcionales no tienen que aprobar los cambios como requisito para poder fusionar la solicitud de extracción en la sucursal de destino.

Revisa las diferencias entre las sucursales. La diferencia que se muestra en una solicitud de extracción son los cambios entre la revisión en la rama de origen y la base de fusión, que es la confirmación principal de la rama de destino en el momento en que se creó la solicitud de extracción. Si no se muestra ningún cambio, es posible que las ramas sean idénticas o que hayas elegido la misma rama tanto para el origen como para el destino.

Cuando estés seguro de que la solicitud de extracción contiene el código y los cambios que deseas revisar, selecciona Crear.

Navega hasta tu proyecto de aplicación moderno.

En la página del proyecto, en Abrir solicitudes de extracción, elige la solicitud de extracción que deseas fusionar. Si no ves la solicitud de extracción, selecciona Ver todas y, a continuación, selecciónala de la lista. Elija Merge (Combinar).

Elige entre las estrategias de fusión disponibles para la solicitud de extracción. Si lo deseas, selecciona o deselecciona la opción para eliminar la rama de origen después de fusionar la solicitud de extracción y, a continuación, selecciona Fusionar.

En el panel de navegación, elija CI/CD y, a continuación, elija Flujos de trabajo.

En Flujos de trabajo, en ApplicationDeploymentPipeline, expanda Ejecuciones recientes. Puede ver la ejecución del flujo de trabajo iniciada por la confirmación de fusión. Si lo desea, selecciónelo para ver el progreso de la ejecución.

Cuando se complete la ejecución, vuelve a cargar la URL que visitaste anteriormente. Observa el pegaso para comprobar que la edad ha cambiado.

Vaya a su proyecto.

En el panel de navegación, elija Problemas.

rag-and-drop Dirija el problema a la columna Listo.

Navega hasta tu proyecto y, a continuación, selecciona la configuración del proyecto.

Elija la pestaña General.

En el nombre del proyecto, selecciona Eliminar proyecto.

Inicia sesión en el AWS Management Console con la misma cuenta que añadiste a tu CodeCatalyst espacio.

Ve al AWS CloudFormationservicio.

Elimine la pila de cadenas mysfits.

Elimine la pila de cadenas de development-mysfits.

Elija (pero no elimine) la pila de CDKToolkit. Elija la pestaña Recursos. Elija el StagingBucketenlace y elimine el depósito y su contenido en Amazon S3.

(Opcional) Elimine la pila de CDKToolkit.