No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Publicación de Aplicaciones REAP en Azure con Static Web Apps

17/20
Recursos

¿Cómo configurar un pipeline en Azure DevOps para despliegue continuo?

Implementar un pipeline para un despliegue continuo puede parecer complicado, pero con servicios como Azure DevOps y Azure Static Web Apps, este proceso se simplifica significativamente. Si ya tienes una cuenta y suscripción activa en Azure, estarás listo para comenzar a publicar aplicaciones de manera eficiente, aprovechando también los $200 de inicio que Azure ofrece para explorar sus servicios.

¿Cuáles son los requisitos previos necesarios?

  • Cuenta y suscripción de Azure: Necesitas una cuenta de Azure activa para acceder a servicios como Static Web Apps, que es gratuito.
  • Azure DevOps Portal: Utiliza esta herramienta para configurar tu pipeline de despliegue continuo.

¿Cómo crear un sitio en Azure Static Web Apps?

  1. Accede a Azure y dirígete a la sección de Static Web Apps.
  2. Crea un nuevo sitio: Llámalo, por ejemplo, reapp-plexi-app, dentro de un grupo como reapp-plexi-app-group.
  3. Elige la versión gratuita: Aunque existe la opción estándar, la gratuita es suficiente para demos y pruebas.

¿Cómo configuramos librerías y archivos para el despliegue?

  • Identifica el directorio de trabajo: Asegúrate de señalar la carpeta donde se extraen los archivos .zip, que contendrá un archivo llamado build.
  • Indica la ubicación de la aplicación: Configura la raíz donde estará el compilado del proyecto.
  • Omite ciertas compilaciones: Haz skip del app.build y del static export si ya tienes un pipeline que maneja esto.

¿Cómo conectar Azure DevOps con Azure?

Para conectar ambos servicios y permitir que Azure DevOps despliegue en Azure Static Web Apps, sigue estos pasos:

Configuración del token de acceso

  1. Obtener el deploy token: Este es crucial para que Azure DevOps sepa a qué recurso en Azure debe publicar.
  2. Configura el token en Azure DevOps:
    • No añadas el token directamente en el código por razones de seguridad.
    • Una práctica recomendada es guardar el token en un servicio como Azure Key Vault.
    • Alternativamente, crea una variable en Azure DevOps: Define una variable personalizada, p. ej., swaToken, con el valor del deploy token.

Ajustando las variables en el pipeline

  • Utiliza sintaxis de variables: En lugar de incluir el token directamente, utiliza $(swaToken) para referenciar la variable del token.
  • Configura correctamente el nombre de la variable: No es necesario incluir símbolos o paréntesis al definirla, solo al usarla.

¿Cómo supervisar y corregir errores en el pipeline?

El proceso de configuración puede presentar errores, como un deploy token inválido. Si esto sucede:

  • Revisa la configuración del token: Asegúrate de que el token esté correctamente definido y referenciado.
  • Edita el pipeline: Ajusta cualquier error directamente en la configuración de Azure DevOps.
  • Ejecuta nuevamente el release: Después de corregir, crea uno nuevo para verificar que la integración es exitosa.

Una vez completado, tu aplicación debería estar corriendo correctamente en la web. Este proceso de despliegue continuo es poderoso y refleja cómo herramientas modernas simplifican tareas tradicionalmente complejas en el desarrollo de software. ¡Sigue adelante con tu aprendizaje y aplica lo aprendido en futuros proyectos!

Aportes 34

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Si lograste realizar el despliegue de la app celebra y comparte un screenshot con los demás estudiantes!!!

Reto Logrado y lo hice con angular 😃

@Miguel Teharan, si pude lograr el reto pero he ido un poco mas alla, lo que sucede es que mi app de react lo he subido en el servicio de Azure App Service, en realidad si me está funcionando pero tengo un problema que llevo mucho tiempo tratando de solucionar y es con los entornos de variables que uso en la app.

Los he agregado a entorno de variable de la app

Pero al momento de ejecutar la aplicación no lo reconoce

Si me puedes apoyar en esta parte sería genial, por cierto, también he podido realizar de continius deploy sin utilizar el release, aquí te dejo una imagen y el código .yml

# Node.js with React
# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

name: $(Year:yyyy).$(Month).$(DayOfMonth).$(BuildID)

trigger:
  branches:
    include:
      - master

variables:
- group: env-stg-aluva-web

pr: none

stages:
- stage: Build
  jobs:
  - job: Build
    pool:
      vmImage: ubuntu-latest
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '14.x'
      displayName: Install Node.js
    
    - task: Npm@1
      displayName: Install dependencies
      inputs:
        command: custom
        workingDir: $(build.sourcesDirectory)
        customCommand: install
        verbose: true
    
    - task: Npm@1
      displayName: Build Application
      inputs:
        command: custom
        workingDir: $(build.sourcesDirectory)
        customCommand: run build
        verbose: true
    
    - task: CopyFiles@2
      displayName: Copy Build Application
      inputs:
        Contents: build/**
        # SourceFolder: $(build.sourcesDirectory)/build
        TargetFolder: $(Build.ArtifactStagingDirectory)
    
    # - task: ArchiveFiles@2
    #   inputs:
    #     rootFolderOrFile: $(Build.ArtifactStagingDirectory)
    #     includeRootFolder: true
    #     archiveType: zip
    #     archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    #     replaceExistingArchive: true
    
    - task: PublishBuildArtifacts@1
      displayName: Publish Artifact
      inputs:
        PathtoPublish: $(Build.ArtifactStagingDirectory)
        ArtifactName: drop

- stage: Staging
  dependsOn: Build
  jobs:
    - deployment: Staging
      pool:
        vmImage: ubuntu-latest
      environment: STG
      strategy:
        runOnce:
          deploy:
            steps:
            - task: AzureRmWebAppDeployment@4
              displayName: 'Azure App Service Deploy: stg-aluva-web'
              inputs:
                ConnectionType: 'AzureRM'
                azureSubscription: 'Azure for Students (35dbbe9a-c26f-4a77-a804-5cfd8252765b)'
                appType: 'webApp'
                WebAppName: 'stg-aluva-web'
                packageForLinux: '$(Pipeline.Workspace)/drop/build'

Excelente clase, tengo años de experiencia en desarrollo y en despliegue de aplicaciones de forma manual. Tomé este curso porque ya hace tiempo quería conoccer sobre Devops y la verdad ahorra mucho trabajo, errores de liberación y contar con las herramientas de integración es una maravilla.

Es importante recalcar que en los grupos de variables hay un candado que permite guardar su contenido como un “sectreto”. Esto quiere decir que al activarlo y guardar, el contenido de esta ya no podrá recuperarse pero si podrá usarse. Es muy útil para guardar contraseñas, keys, etc.

HELP.
Segui reiteradas ocasiones capitulos anteriores y no encontre solucion 😕

Reto Logrado despues de varios inconvenientes, revise varias veces videos anteriores y pude con el reto

la aplicacion del ejercicio no me funciono y sin saber de react quise hacer una nueva aplicacion de ejemplo como un “Hola mundo” para poder aprender algo de react en este proceso de despliegue. Con un resultado mas que bello:

Se me venció la suscripción y ya debo dos meses 😃

Despliegue exitoso en Ubuntu con un selft hosted agent de linux!!

Finos 😎

Logrado

Lo único que no entiendo es por qué me cargo esa plantilla si realice la clonación del proyecto. Sin embargo, el despliegue se realizó correctamente.

Reto completado ![]()![](https://static.platzi.com/media/user_upload/image-994c5b3d-f37d-4f96-87d4-25a5ce4f6ad7.jpg)
Lo logre, lo hice con angular. ![](https://static.platzi.com/media/user_upload/azure-angular-95b01ab4-fe54-472e-ad31-8b84223c0b79.jpg) En el caso de angular tomar en cuenta lo siguiente: -En el pipeline de instalación de dependencia y el build, la capeta de donde extraes debe ser 'dist/\<nombreProyecto>/\*\*' -En el pipeline release en Static Web App, el Working directory seria .../\<nombreCarpeta>/a/dist/\<nombreProyecto>/browser ![](https://static.platzi.com/media/user_upload/image-9d9fe46f-411d-4d96-8158-6e7ab5e0de7a.jpg)
Lo logre, lo hice con angular. ![](https://static.platzi.com/media/user_upload/azure-angular-95b01ab4-fe54-472e-ad31-8b84223c0b79.jpg) En el caso de angular tomar en cuenta lo siguiente: -En el pipeline de instalación de dependencia y el build, la capeta de donde extraes debe ser 'dist/\<nombreProyecto>/\*\*' -En el pipeline release en Static Web App, el Working directory seria .../\<nombreCarpeta>/a/dist/\<nombreProyecto>/browser ![](https://static.platzi.com/media/user_upload/image-9d9fe46f-411d-4d96-8158-6e7ab5e0de7a.jpg)
Hola, una pregunta que servicio se utiliza para aplicaciones web dinamicas o escalables, que contenga contenido en tiempo real basándose en la interacción del usuario, datos de entrada, o cualquier otra lógica del lado del servidor sea tanto para Frontend como Backend tambien.
Me sale el mismo error despues de seguir los pasos Luego cambie el Working directory a : $(System.DefaultWorkingDirectory)/\_curso-react-hooks/drop/build pero sale vacio: :/ ayudaaaaaaa ![](https://static.platzi.com/media/user_upload/image-1797bbc7-39c8-4246-97dc-aace39cc8265.jpg)
Completado ![](https://static.platzi.com/media/user_upload/image-e22fc612-2896-4596-8ab2-d66b7953fbca.jpg)
![](https://static.platzi.com/media/user_upload/image-5861b97b-a142-4c09-aa0e-2f75818ee9ac.jpg)![](https://static.platzi.com/media/user_upload/image-229d1f14-815e-4f87-af43-97c69a42a98d.jpg)
![](https://static.platzi.com/media/user_upload/image-ff15b0f5-583c-4da2-982c-ffce88fc9de8.jpg)![](https://static.platzi.com/media/user_upload/image-1423a761-9b42-4724-b535-c58b603eaf5a.jpg) ![](https://static.platzi.com/media/user_upload/image-b375642d-8dd5-4c4d-8255-146f6ca87aa8.jpg)
Completado! ![](https://static.platzi.com/media/user_upload/image-af5dc7f5-0724-4fc2-b1b4-d8f4707dad58.jpg)
Excelente clase! Muchas gracias, me ayudo mucho.
logrado ![](https://static.platzi.com/media/user_upload/image-04e347b1-b230-4df5-8d62-7b8a73e36467.jpg)
Solo queda decir Bravo a todos :D
Reto cumplido. Pablo Lara, pasó por aquí 😁 ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-11-01%20a%20la%28s%29%201.46.39%E2%80%AFp.%C2%A0m.-3556d44d-b990-4d08-bc02-ec184aec02ac.jpg)

Intente desplegar una api app de .net y no pude

Me gustaria intentarlo con la app en Blazor que hicimos en ese curso… deseenme suerte!

Reto Completado!!

Logre publicar la aplicación pero no como está en los videos ya que tengo el error que han manifestado.

Ruta donde se extrae el .zip
/home/vsts/work/r1/a/Proyecto React/ReactAPP/a/build/

Configuración publicar en static web
$(System.DefaultWorkingDirectory)/Proyecto React/ReactApp/a/build

Genera error:
##[error]Failed to find a default file in the app artifacts folder (/). Valid default files: index.html,Index.html.

No se que sucede 😦,

Si uso la carpeta
$(System.DefaultWorkingDirectory)/Proyecto React/drop/build

Si funciona

Deploy logrado![](

Done =)

![](

puede lograr mi primer pipeline en Azure devops