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

En el ejercicio anterior, realizó cambios en la API. Confírmelos en la rama api y envíelos a GitHub mediante estos pasos:

  1. En Visual Studio Code, presione F1 para abrir la paleta de comandos.
  2. Escriba y seleccione Git: Confirmar todo. Si Visual Studio Code le pide que agregue automáticamente todos los cambios al "stage" y los confirme directamente, seleccione Sí.
  3. Escriba un mensaje de confirmación, como cambios en la API.
  4. Presione F1 para abrir la paleta de comandos.
  5. Escriba y seleccione Git: Insertar.
  6. Si se muestra el mensaje The branch 'api' has no upstream branch. Would you like to publish this branch? (La rama 'api' no tiene ninguna rama ascendente. ¿Quiere 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. Abra una ventana del explorador.

  2. Vaya al 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 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 de flujo de trabajo Azure Static Web Apps CI/CD (CI/CD de Azure Static Web Apps)Screenshot showing how to find the correct workflow..
  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).

Screenshot showing the build and deploy button on the workflow page.

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. Seleccione la solicitud de incorporación de cambios.
  3. Seleccione el vínculo que sigue al mensaje Azure Static Web Apps: Your stage site is ready! Visit it here (Azure Static Web Apps: El sitio de "stage" está listo. Consúltelo 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. La región también se usa para formar dicha URL.

Screenshot showing your angular web app.

Screenshot showing your react web app.

Screenshot showing your svelte web app.

Screenshot showing your vue web app.

Pasos siguientes

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