Ejercicio: Publicar la API con Acciones de GitHub

  • 4 minutos

La aplicación web y la API se ejecutan localmente. Ha llegado el momento de publicarlas en Azure Static Web Apps.

Enviar los cambios a GitHub

Ha realizado cambios en la API en el ejercicio anterior. Confirme esos cambios en la rama de API e insértelos en GitHub siguiendo estos pasos:

  1. En Visual Studio Code, abra la paleta de comandos presionando F1.
  2. Escriba y seleccione Git: Confirmar todo. Si Visual Studio Code le pide que preconfigurará automáticamente todos los cambios y los confirme directamente, seleccione Sí.
  3. Escriba un mensaje de confirmación, como cambios de API.
  4. Abra la paleta de comandos presionando F1.
  5. Escriba y seleccione Git: Push
  6. Si se le solicita con el mensaje La rama "api" no tiene ninguna rama ascendente. ¿Desea publicar esta rama? Presione el botón Aceptar .

Crear una solicitud de incorporación de cambios

Ha insertado la rama api en GitHub. Ahora quiere que la acción de GitHub publique la aplicación web y la API en una dirección URL de vista previa. Por lo tanto, el siguiente paso consiste en crear una solicitud de incorporación de cambios en la rama principal.

  1. Abrir un explorador

  2. Vaya a su repositorio.

    https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

  3. Seleccione el vínculo Solicitudes de incorporación de cambios

  4. Seleccione el botón Nueva solicitud de incorporación de cambios .

  5. Seleccione la rama principal en la lista desplegable base .

  6. Seleccione la rama de API en la lista desplegable Comparar .

  7. Seleccione el botón Crear solicitud de cambios

  8. Vuelva a seleccionar el botón Crear solicitud de incorporación de cambios

La acción de GitHub ahora se desencadena.

Visualizar la compilación y la publicación de la acción de GitHub

Puede permanecer en el explorador en el repositorio y ver el progreso de la acción de GitHub. Para visualizar el progreso, siga estos pasos:

  1. Seleccione el menú Acciones .
  2. En el menú Flujos de trabajo, seleccione el elemento Flujo de trabajo de CI/CD de Azure Static Web Appscaptura de pantalla que muestra cómo encontrar el flujo de trabajo correcto.
  3. Seleccione el vínculo superior de la lista de ejecuciones de acciones.
  4. Seleccione el vínculo Build and Deploy Job (Compilar e implementar trabajo).

Captura de pantalla que muestra el botón compilar e implementar en la página de flujo de trabajo.

Puede ver el progreso de la acción de GitHub a medida que crea y publica la aplicación web y la API.

Ir a la dirección URL de vista previa

Una vez completada correctamente la acción de GitHub, puede ver la aplicación en ejecución en el explorador.

  1. Seleccione el menú Solicitudes de incorporación de cambios
  2. Selecciona tu solicitud de incorporación de cambios
  3. Seleccione el vínculo que sigue al mensaje Azure Static Web Apps: Su sitio de prueba está listo. Visítalo aquí

Observe que la dirección URL de vista previa contiene un guión seguido de un número. El número coincide con el número de la solicitud de incorporación de cambios que ha creado. Para cada solicitud de incorporación de cambios que cree, obtendrá una dirección URL de vista previa única y repetible. El área también se usa para formar la dirección URL de vista previa.

Captura de pantalla que muestra la aplicación web Angular.

Captura de pantalla que muestra la aplicación web react.

Captura de pantalla que muestra la aplicación web de svelte.

Captura de pantalla que muestra la aplicación web de vue.

Pasos siguientes

Enhorabuena, ha creado su primera instancia de Azure Static Web Apps con una aplicación web y una API.