DEV Community

loading...

Publicación de Aplicaciones Estáticas con Azure Static Web Apps y Azure DevOps.

Glaucia Lemos
Cloud Advocate in JavaScript 🥑 @Microsoft | Contributor & Member NodeJs Foundation & React Community | Open Source | She/Her
・13 min read

¡Hola Desarrolladores(as)! Hoy vamos a hablar sobre el lanzamiento de un servicio de Azure (12/05/2021) que estaba en versión Preview y finalmente, ¡será un General Available, del servicio Azure Static Web Apps!

Si desea saber un poco más sobre el lanzamiento oficial de Azure Static Web Apps que está ocurriendo hoy (12/05/2021), hay un blog oficial que explica en qué se diferencia de la versión Preview para General Available AQUÍ

¡Y vamos a tener innumerables cambios significativos en este servicio, que estaba en su versión Preview!

Pero, primero vamos a recordar algunas caracteristicas de este servicio.

Tabla de Contenido

generated with Summaryze Forem 🌱

¿Qué es Azure Static Web Apps?

Azure Static Web Apps es un servicio que crea e implementa automáticamente aplicaciones web completas en Azure desde un repositorio de código, en cuyo caso se usa GitHub Actions.

swa-overview.png

Con este servicio, permite realizar despliegues automáticos, de forma rápida, sencilla y totalmente gratuita utilizando cualquiera de las librerías o frameworks más conocidos del mercado, como: Angular, React, Svelte, Vue o incluso utilizando Blazor.

En el lado del Back-End, puede integrar su aplicación estática usando Azure Functions, lo que le permitirá crear una API de una manera mucho más rápida, resistente y escalable.

Si lo desea, tenemos numerosas capacitaciones de Azure Static Web Apps totalmente gratuitas en la plataforma Microsoft Learn. Para enumerar algunos aquí ...

Captura-de-Tela-2021-05-09-a-s-18-55-00.png

Captura-de-Tela-2021-05-09-a-s-18-56-56.png

Captura-de-Tela-2021-05-09-a-s-18-59-03.png

Captura-de-Tela-2021-05-09-a-s-19-00-41.png

Captura-de-Tela-2021-05-09-a-s-19-02-12.png

Ahora que sabe qué es Azure Static Web Apps, ahora es el momento de centrarse en el tema principal de esta publicación: '¿Cómo podemos publicar un sitio web estático utilizando Azure Static Web Apps mediante la integración con la poderosa herramienta Azure DevOps?

Vamos a empezar a hacer una práctica de este servicio con un tutorial paso a paso? ¡Aquí vamos!

¿Qué vamos a hacer?

Bueno, en este tutorial vamos a aprender cómo publicar un sitio web estático en Vue.Js usando Azure Static Web e integrándolo con Azure DevOps. En la versión de vista previa esto no era posible (en cierto modo, no ... pero hay personas que lo hicieron). Pero, ahora con Service GA, esto es muy posible y eso es exactamente lo que les estaré enseñando a todo(a)s aquí.

¡Es hora del Demo!

Para esta demostración, necesitaremos los siguientes recursos:

Azure for Students ⭐️

Si es estudiante de un colegio o universidad, puede crear su cuenta con Azure para estudiantes. Esta cuenta te dará el beneficio de tener un crédito de USD 100.00 para utilizar los servicios de forma gratuita, sin necesidad de tener una tarjeta de crédito. Para activar esta cuenta, simplemente acceda al enlace al costado: AQUÍ

Para fines de demostración, usaremos la función de GitHub: Plantillas de GitHub. Si desea saber más sobre cómo crear plantilla y comprender qué es, simplemente vaya AQUÍ.

Haga clic en este enlace https://github.com/staticwebdev/vue-basic/generate y luego cree inmediatamente un nombre para este repositorio, como se muestra en la imagen a continuación: (puede elegir el nombre que desee. No necesariamente el mismo que mía.)

Captura-de-Tela-2021-05-07-a-s-23-51-03.png

Luego haga clic en el botón: Create Repository from Template(Crear repositorio a partir de plantilla). Después de eso, se creará una aplicación modelo en Vue.js para que podamos probar nuestra aplicación.

¡Usando Azure DevOps!

Ahora comenzaremos a integrar la aplicación recién creada en GitHub y usaremos Azure DevOps. Para hacer esto, vaya al enlace a continuación para comenzar a usar Azure DevOps de forma gratuita.

Elija las opciones gratuitas. En mi caso, elijo la opción: Plan Básico - Gratis. Después de incluir la información de sus datos, aparecerá la siguiente imagen a continuación:

Captura-de-Tela-2021-05-09-a-s-19-39-47.png

¡Vayamos paso a paso a partir de ahora!

Paso 01: Creación de un proyecto en Azure DevOps

Crea el proyecto y colócalo de acuerdo con la imagen a continuación:

Captura-de-Tela-2021-05-08-a-s-00-19-01.png

Una vez que haya completado toda la información de su proyecto, haga clic en el botón: Create a Project(Crear un proyecto). Después de hacer clic en este botón, la pantalla tendrá el siguiente formato:

Captura-de-Tela-2021-05-08-a-s-00-23-17.png

Paso 02: Importar el proyecto desde GitHub a Azure DevOps

Ahora implementaremos el código (plantilla estándar) de la aplicación Vue.js creada recientemente en GitHub y la integraremos con Azure DevOps. Entra a:

  1. Repos (Repositorios)
  2. Files (Archivos)
  3. Import a Repository (Importar un repositorio)
  4. Import (Importar)

Con eso, se abrirá una nueva ventana, allí pondremos, solo el GitClone de nuestra aplicación (.git) y luego damos clic en el botón: Import.

Aquí tenemos una imagen que también te ayuda en este paso a paso:

Captura-de-Tela-2021-05-08-a-s-00-25-25.png

Al final, su Azure DevOps se verá así:

Captura-de-Tela-2021-05-08-a-s-00-33-40.png.

Si es así, es porque ha integrado correctamente su aplicación Vue.js en Azure DevOps. ¡Ahora continuemos!

Paso 03: creación de la aplicación estática en Azure

En este paso, necesitaremos una Cuenta Azure, ¡que incluso puede crear de forma gratuita! ¡Solo necesita incluir los datos de su tarjeta de crédito para hacer uso de los 12 meses gratuitos de los numerosos servicios gratuitos disponibles!

Después de crear una cuenta en Azure, deberá acceder al Portal Azure.

Sigue estos pasos:

1 - Haga clic en: Create a Resource

Captura-de-Tela-2021-05-08-a-s-00-43-46.png

2 - Luego, en la parte de búsqueda, escriba: Static Web Apps. Y luego haga clic en el botón: Create

Captura-de-Tela-2021-05-08-a-s-00-45-45.png

3 - Complete todos los datos necesarios en esta pantalla, que son:

  • Resource Groups
  • Static Web Apps Details -> Name (aquí el nombre debe ser único y nunca el mismo)
  • Region: CENTRAL US (se puede elegir también otras regiones)
  • Deployments Details - Others (¡elige esa opción! ¡Usaremos Azure DevOps y no GitHub Actions!)
  • Y finalmente, haga clic en el botón: Review + Create -> Create

Captura-de-Tela-2021-05-08-a-s-00-48-17.png

Captura-de-Tela-2021-05-08-a-s-00-53-06.png

Si todo va bien, la siguiente imagen aparecerá. Si es así, simplemente haga clic en: Go to resource

Captura-de-Tela-2021-05-08-a-s-00-58-37.png

Ahora, hagamos algunos cambios importantes. Vaya a:

  1. Overview
  2. Manage Deployment token

Aparecerá una nueva ventana con un token gigante. Copie y pegue este token y copie en su bloc de notas. ¡Lo necesitaremos más tarde!

Captura-de-Tela-2021-05-08-a-s-01-00-17.png

Captura-de-Tela-2021-05-08-a-s-01-03-18.png

Paso 04: Creación de los Pipelines Task en Azure DevOps para nuestra aplicación estática.

¡Ahora usemos el poder que nos brinda el servicio Azure DevOps integrado con SWA! Regrese a su proyecto alojado en Azure DevOps y vaya al botón: Set up Build

Captura-de-Tela-2021-05-08-a-s-01-07-29.png

Después de eso, aparecerá una nueva ventana. Elige la opción: Starter Pipeline

Captura-de-Tela-2021-05-08-a-s-01-09-42.png

Copie y pegue el archivo YAML. Y ponlo en tu pipeline:

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      app_location: '/'
      api_location: 'api'
      output_location: 'dist'
    env:
      azure_static_web_apps_api_token: $(deployment_token)
Enter fullscreen mode Exit fullscreen mode

¡En la parte output_location tendremos que cambiarlo! En Vue.js, la carpeta de artefactos, que es la carpeta que genera archivos estáticos, es la carpeta dist. Para diferentes frameworks, hay diferentes nombres de carpetas. Si desea conocer la carpeta del framework que está utilizando, tenemos una lista de estas carpetas AQUÍ.

Ahora, incluyamos ese token creado allí en el Portal de Azure. Vamos a utilizar uno recurso muy interesante en Azure DevOps: Variables. Vaya a:

  • Variables
  • New Variable
  • Name (deployment_token)
  • Value (o valor do token)
  • Clicar no botão: Ok -> Save

Captura-de-Tela-2021-05-08-a-s-01-26-28.png

Captura-de-Tela-2021-05-08-a-s-01-28-10.png

Captura-de-Tela-2021-05-08-a-s-01-29-32.png

Ahora que hemos guardado nuestro deployment_token, llega el momento más esperado: ¡ejecute este disparador y vea cómo funciona! Haga clic en el botón: Save and Run

Captura-de-Tela-2021-05-08-a-s-01-32-19.png

Captura-de-Tela-2021-05-08-a-s-01-34-16.png

Hecho esto, veremos el Pipeline de nuestra aplicación estática ejecutándose (job):

Captura-de-Tela-2021-05-08-a-s-01-36-22.png

Si la aplicación (job) o la compilación dan todos los cheques en verde, ¡es porque la compilación se ejecutó con éxito!

Captura-de-Tela-2021-05-08-a-s-01-39-04.png

Paso 05 - Volviendo al Portal Azure

Ahora que la compilación se ha ejecutado correctamente en Azure DevOps, es el momento de averiguar si nuestra aplicación se ha publicado correctamente en Azure. Regrese al recurso creado a partir de la aplicación en Azure y haga clic en el enlace, como se muestra en la imagen:

Captura-de-Tela-2021-05-08-a-s-01-41-55.png

Captura-de-Tela-2021-05-08-a-s-01-42-19.png

Y, como puede ver, la implementación se implementó e integró con éxito con Azure DevOps.

Recursos y Enlaces Importantes

Siempre al final de mis tutoriales, dejo importantes recursos y enlaces, por si quieres saber más sobre el tema:

Conclusión

Espero que este tutorial de SWA + Azure DevOps sea de gran ayuda para todos los(as) desarrolladores(as).

¡Ah! ¡Me iba a olvidar de hablar aquí! ¡Asegúrate de suscribirte a mi canal de Youtube! ¡Estoy creando innumerables series increíbles para este año 2021!

A modo de spoiler, tendremos (a partir de junio):

  • 😃 Microsoft Learn Sessions
  • 😃 Open Mic con la comunidad durante las vidas!
  • 😃 Tutoriales semanales de Node.js, TypeScript y JavaScript
  • 😃 Y muchas codificaciones en vivo

Si es contenido que te gusta, asegúrate de suscribirte y activar la campana para saber cuándo tendremos un nuevo video.

Screen-Shot-12-31-20-at-01-06-AM.png

Y para conocer estas y más novedades no olvides seguirme en twitter!

Twitter

No vemos! Hasta muy pronto! 😍

Discussion (0)