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

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.

Intente desplegar una api app de .net y no pude

Listo.

https://purple-beach-07a873410.3.azurestaticapps.net/

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