Tutorial: Publicación de aplicaciones web estáticas de Azure con Azure DevOps

En este artículo se muestra cómo implementar aplicaciones web estáticas de Azure mediante Azure DevOps.

En este tutorial, aprenderá a:

• Configurar un sitio de Azure Static Web Apps
• Crear una canalización de Azure Pipeline para compilar y publicar una aplicación web estática

Prerrequisitos

• Una cuenta activa de Azure: en caso de no tener una, puede crear una cuenta gratuita.
• Un proyecto de Azure DevOps: si no tiene ninguno, puede crear un proyecto de forma gratuita.
  • Azure DevOps incluye Azure Pipelines. Si necesita ayuda para comenzar a usar Azure Pipelines, consulte Creación de la primera canalización.
  • Actualmente, la tarea de canalización de aplicaciones web estáticas solo funciona en máquinas Linux. Al ejecutar la canalización mencionada a continuación, asegúrese de que se ejecuta en una máquina virtual Linux.

Creación de una aplicación web estática en Azure DevOps

1. Vaya al repositorio en Azure Repos.

2. Seleccione Importar para iniciar la importación de una aplicación de ejemplo.

   

3. En Dirección URL de clonación, escriba https://github.com/staticwebdev/vanilla-api.git.

4. Seleccione Import (Importar).

Creación de una aplicación web estática

1. Acceda a Azure Portal.

2. Seleccione Crear un recurso.

3. Busque Static Web Apps.

4. Seleccione Static Web Apps.

5. Seleccione Crear.

6. Cree una nueva aplicación web estática con los valores siguientes.

   

   Parámetro	Valor
   Suscripción	El nombre de la suscripción de Azure.
   Grupo de recursos	Seleccione un nombre de grupo existente o cree uno nuevo.
   Nombre	Escriba myDevOpsApp.
   Tipo de plan de hospedaje	Seleccione Gratis.
   Region	Seleccione la región más cercana a la suya.
   Source	Seleccione Otros.

7. Seleccionar Revisar y crear.

8. Seleccione Crear.

9. Una vez que la implementación sea correcta, seleccione Ir al grupo de recursos.

10. Seleccione Manage deployment token (Administrar token de implementación).

11. Copie el token de implementación y pegue el valor del token de implementación en un editor de texto para usarlo en otra pantalla.

    Nota

    Este valor se reserva ahora porque copiará y pegará más valores en los pasos siguientes.

    

Creación de la tarea de canalización de Azure DevOps

1. Vaya al repositorio de Azure Repos que se creó anteriormente.

2. Seleccione Configurar la compilación.

   

3. En la pantalla Configurar la canalización, seleccione Canalización inicial.

   

4. Copie el siguiente código YAML y reemplace la configuración generada en la canalización por este código.

   trigger:
     - main
   
   pool:
     vmImage: ubuntu-latest
   
   steps:
     - checkout: self
       submodules: true
     - task: AzureStaticWebApp@0
       inputs:
         app_location: '/src'
         api_location: 'api'
         output_location: '/src'
         azure_static_web_apps_api_token: $(deployment_token)
   

   Nota

   Si no va a usar la aplicación de ejemplo, los valores de app_location, api_location y output_location deben cambiar para que coincidan con los valores de la aplicación.

   Propiedad	Descripción	Ejemplo	Obligatorio
   app_location	Ubicación del código de la aplicación.	Escriba / si el código fuente de la aplicación se encuentra en la raíz del repositorio, o /app si el código de la aplicación se encuentra en un directorio denominado app.	Sí
   api_location	Ubicación del código de Azure Functions.	Escriba /api si el código de la aplicación se encuentra en una carpeta denominada api. Si no se detecta ninguna aplicación de Azure Functions en la carpeta, no se produce un error en la compilación, sino que el flujo de trabajo supone que no quiere una API.	No
   output_location	Ubicación del directorio de salida de la compilación en relación con app_location.	Si el código fuente de la aplicación se encuentra en /app y el script de compilación genera archivos de salida en la carpeta /app/build, establezca build como valor de output_location.	No

   El valor azure_static_web_apps_api_token es autoadministrado y se configura manualmente.

5. Seleccione Variables.

6. Seleccione Nueva variable.

7. Asigne a la variable el nombre deployment_token (que coincide con el nombre del flujo de trabajo).

8. Copie el token de implementación que pegó anteriormente en un editor de texto.

9. Pegue el token de implementación en el cuadro Valor.

   

10. Seleccione Mantener este valor como secreto.

11. Seleccione Aceptar.

12. Seleccione Guardar para volver al archivo YAML de la canalización.

13. Seleccione Guardar y ejecutar para que se abra el cuadro de diálogo del mismo nombre.

    

14. Seleccione Guardar y ejecutar para ejecutar la canalización.

15. Una vez que la implementación se haya realizado correctamente, vaya a la página de información general de Azure Static Web Apps, que incluye vínculos a la configuración de implementación. Observe cómo el vínculo de origen apunta ahora a la rama y ubicación del repositorio de Azure DevOps.

16. Seleccione la dirección URL para ver el sitio web recién implementado.

    

Limpieza de recursos

Limpie los recursos que implementó eliminando el grupo de recursos.

1. En Azure Portal, seleccione Grupos de recursos en el menú de la izquierda.
2. Escriba el nombre del grupo de recursos en el campo Filtrar por nombre.
3. Seleccione el nombre del grupo de recursos que ha utilizado en este tutorial.
4. Seleccione Eliminar grupo de recursos del menú superior.

Pasos siguientes