Publicar la API con Acciones de GitHub
Ha agregado la API a la aplicación web y ambas se ejecutan localmente. Es momento de publicar su API y su aplicación en Azure Static Web Apps.
Cuando ha creado la instancia de Azure Static Web Apps y le ha indicado que inspeccionara la rama principal, se ha generado una acción de GitHub automáticamente. 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 main, compila y publica la aplicación.
Puede que recuerde que al crear el recurso de Azure Static Web Apps, proporcionó la ubicación de la carpeta para su API. Usted proporcionó el valor predeterminado de api. Sin embargo, dado que no tenía una API en la api carpeta en ese momento, Azure Static Web Apps no intentó publicar una API.
Ahora todo cambia.
Configuración de acciones de GitHub
La carpeta .github/workflows contiene el archivo de acción de GitHub. El archivo contiene 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 ahora se encuentran 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
Su api_location está configurado en el valor correcto para apuntar a su API en 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 cambios en la rama principal. Los cambios detectados 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
A veces quieres ver tus cambios en un sitio de prueba antes de publicarlos en el sitio web en vivo. Azure Static Web Apps le permite ver una vista previa de los cambios a través de direcciones URL de versión preliminar. Para generar una dirección URL de vista previa, cree una solicitud de cambios en la rama que inspecciona la acción de GitHub. Tu sitio web en vivo no se ve afectado. En su lugar, se crea una nueva versión de ensayo de la aplicación. Si vuelve y comprueba la solicitud de incorporación 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. Tu aplicación se publica en una URL, mientras que un pull request a la misma rama se publica en otra URL.
| Fuente | Descripción | URL |
|---|---|---|
| Rama principal | Dirección URL del sitio web activo | https://purple-rain-062d03304.azurestaticapps.net/ |
| Solicitud de cambios n.º 5 | Dirección URL de vista previa | https://purple-rain-062d03304-5.azurestaticapps.net/ |
Actualmente, Ud. está trabajando en la rama api. Haga un pull request desde su rama api a la rama main. Al crear el pull request en la rama principal, la acción de GitHub publica la aplicación en una dirección URL de vista previa.
Una vez que el flujo de trabajo finaliza la compilación e implementación de la aplicación, el bot de GitHub agrega un comentario a la solicitud de incorporación de cambios que contiene la dirección URL del entorno de preproducción. Puede seleccionar este enlace para ver los cambios provisionales.
A continuación, crea una solicitud de incorporación de cambios y visita la versión en fase de prueba de tu aplicación.