¡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
- Tabla de Contenido
- generated with Summaryze Forem 🌱
- ¿Qué es Azure Static Web Apps?
- ¿Qué vamos a hacer?
- ¡Es hora del Demo!
- Azure for Students ⭐️
- ¡Usando Azure DevOps!
- Paso 01: Creación de un proyecto en Azure DevOps
- Paso 02: Importar el proyecto desde GitHub a Azure DevOps
- Paso 03: creación de la aplicación estática en Azure
- Paso 04: Creación de los Pipelines Task en Azure DevOps para nuestra aplicación estática.
- Paso 05 - Regreso al Portal Azure
- Recursos y Enlaces Importantes
- Ultimas Palabras
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.
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í ...
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.)
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:
¡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:
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:
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:
- Repos (Repositorios)
- Files (Archivos)
- Import a Repository (Importar un repositorio)
- 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:
Al final, su Azure DevOps se verá así:
.
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
2 - Luego, en la parte de búsqueda, escriba: Static Web Apps. Y luego haga clic en el botón: Create
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
Si todo va bien, la siguiente imagen aparecerá. Si es así, simplemente haga clic en: Go to resource
Ahora, hagamos algunos cambios importantes. Vaya a:
- Overview
- 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!
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
Después de eso, aparecerá una nueva ventana. Elige la opción: Starter Pipeline
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)
¡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
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
Hecho esto, veremos el Pipeline de nuestra aplicación estática ejecutándose (job):
Si la aplicación (job) o la compilación dan todos los cheques en verde, ¡es porque la compilación se ejecutó con éxito!
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:
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:
✅ Tutorial: Publicación de un sitio de Hugo en Azure Static Web Apps, versión preliminar
✅ Tutorial: Publicar um site do VuePress en el Azure Static Web Apps
✅ Implementación de sitios web de Nuxt.js representados por el servidor en Azure Static Web Apps
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.
Y para conocer estas y más novedades no olvides seguirme en twitter!
No vemos! Hasta muy pronto! 😍
Oldest comments (0)