Publicar la API con Acciones de GitHub
Ha agregado la API a la aplicación web y ambas se ejecutan localmente. Ha llegado el momento de publicarlas en Azure Static Web Apps.
Cuando creó la instancia de Azure Static Web Apps y le indicó que inspeccionara la rama principal, se generó una acción de GitHub. La acción de GitHub escucha los cambios en la rama principal del repositorio y, cuando detecta una confirmación o una solicitud de incorporación de cambios en la principal, compila y publica la aplicación.
Recordará que, cuando creó el recurso de Azure Static Web Apps, proporcionó la ubicación de la carpeta para la API. Indicó el valor predeterminado de api, pero, como en ese momento en la carpeta api no había ninguna API, Azure Static Web Apps no intentó publicarla.
Ahora, todo cambia.
Configuración de las acción de GitHub
La carpeta .github/workflows contiene el archivo de acción de GitHub. Este archivo incluye la configuración de las ubicaciones de la aplicación web, la API y los artefactos de compilación. Las ubicaciones que eligió al crear el recurso de Azure Static Web Apps se encuentran ahora en este archivo, como se muestra aquí:
app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional
app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional
app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional
app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional
api_location se establece en el valor correcto para que apunte a la API de la carpeta api.
Desencadenar la acción de GitHub
La acción de GitHub está lista para compilar y publicar la aplicación web y la API una vez que detecta un cambio en la rama principal. Para desencadenar la acción de GitHub, puede confirmar directamente o crear una solicitud de incorporación de cambios en la rama principal. Los cambios que se detectan en la rama principal desencadenan la acción de GitHub para publicar la aplicación en la misma dirección URL del sitio web activo.
Direcciones URL de vista previa
En ocasiones, le interesará ver los cambios en un sitio de ensayo antes de realizar la publicación en el sitio web activo. Azure Static Web Apps permite obtener una vista previa de los cambios a través de direcciones URL de vista previa. Para generar una dirección URL de vista previa, cree una solicitud de incorporación de cambios en la rama que está inspeccionando la acción de GitHub. El sitio web activo no se ve afectado. En su lugar, se creará una versión de ensayo de la aplicación. Si vuelve y comprueba la solicitud de cambios en GitHub, debería ver un vínculo a la versión de ensayo publicada en la pestaña Conversación.
En la tabla siguiente se muestra la forma en que Azure Static Web Apps publica la aplicación en distintas direcciones URL. La aplicación se publica en una dirección URL, mientras que una solicitud de incorporación de cambios en la misma rama se publica en otra dirección URL.
| Origen | Descripción | URL |
|---|---|---|
| Rama principal | Dirección URL del sitio web activo | https://purple-rain-062d03304.azurestaticapps.net/ |
| Solicitud de incorporación de cambios n.º 5 | Dirección URL de vista previa | https://purple-rain-062d03304-5.azurestaticapps.net/ |
Actualmente, está trabajando en la rama api. Realice una solicitud de incorporación de cambios de la rama api a la rama principal. Cuando cree la solicitud de incorporación de cambios en la rama principal, la acción de GitHub publicará la aplicación en una dirección URL de la versión preliminar.
Una vez que el flujo de trabajo termina de compilar e implementar la aplicación, el bot de GitHub agregará un comentario a la solicitud de incorporación de cambios, que contiene la dirección URL del entorno de preproducción. Puede seleccionar este vínculo para ver los cambios "staged".
Después, creará una solicitud de incorporación de cambios y visitará la versión almacenada provisionalmente de la aplicación.