Las Azure Static Web Apps se lanzaron a principios de 2021 y, de forma predeterminada, pueden integrar su repositorio existente y implementar su aplicación web estática desde Azure DevOps. Este masterclass demuestra cómo publicar una Azure Static Web App con Azure DevOps.
Azure Static Web Apps (SWA) con Azure DevOps
Video Summary and Transcription
¡Gracias por unirse a nosotros hoy! Tendremos un masterclass sobre Azure Static Web Apps con Azure DevOps. Para comenzar, haga clic en el enlace de documentación para encontrar guías rápidas para varios frameworks. Necesitará una cuenta activa de Azure, que puede crear de forma gratuita. Cree un canal de implementación proporcionando los argumentos necesarios y creando una variable con el token de implementación. Finalmente, para limpiar después del masterclass, regrese al portal de Azure y elimine el grupo de recursos. Los recursos adicionales incluyen documentación completa y cursos gratuitos en Microsoft Learn para Azure Static Web Apps y varios frameworks.
1. Introducción a Azure Static Web Apps
¡Gracias por unirse a nosotros hoy! Tendremos un masterclass sobre Azure Static Web Apps con Azure DevOps. Presentaré lo fácil que es implementar una aplicación web utilizando Azure DevOps para crear un pipeline. Hemos preparado recursos para que los explores, incluyendo una introducción a Azure DevOps y la construcción de aplicaciones con Azure DevOps. Síguenos en Twitter para obtener más contenido e información sobre próximos eventos. También tenemos el programa Azure Heroes, donde puedes obtener insignias digitales. Para el masterclass, he preparado una publicación de blog con todos los pasos y cuentas necesarias. Siéntete libre de hacer preguntas en el canal de Discord. Las aplicaciones SWA te permiten implementar aplicaciones web en estáticas utilizando Azure. Visita la página de inicio de SWA para obtener más detalles.
Muy bien. Como dije, en el masterclass, quiero presentarte lo fácil que es implementar este tipo de aplicación web, ya sabes, swa1 y usar Azure DevOps para crear un pipeline. Además, hemos preparado varios contenidos y cosas relacionadas con la conferencia de hoy que puedo compartir contigo. Entonces, como puedes ver aquí, en realidad hemos preparado como parte de nuestros beneficios varios recursos diferentes para compartir contigo. Así que te invito primero a visitar esta página aquí, Microsoft Azure en DevOps.JS, donde tenemos varios recursos diferentes aquí proporcionados, gratuitos, por cierto, ya sabes. Hay una introducción a Azure DevOps como parte de Microsoft Learn, ya sabes. Así que hay un módulo completo aquí, para que puedas explorarlo más allá de lo que tenemos para presentarte aquí hoy. También cómo construir aplicaciones con Azure DevOps. Lo mismo aquí, ya sabes. Hay una ruta de aprendizaje completa aquí con varios cursos diferentes.
Y el último, también te invito a seguirnos en Twitter, ya sabes. Trabajo y soy responsable de las actividades de participación de desarrolladores en Irlanda, ya sabes. Y tenemos este nombre de usuario de Twitter donde publicamos varios recursos de contenido e toda la información sobre los próximos eventos en nuestro boletín de desarrolladores también. Además de eso, también tenemos un programa muy interesante llamado Azure Heroes. Así que en realidad, se trata de insignias digitales basadas en blockchain, ya sabes. Esto es lo que llamamos NFTs hoy en día, ya sabes. Así que te invito a escanear este código QR y luego puedes obtener tu insignia, la de aprendiz. En realidad, para el masterclass de hoy, decidí preparar una publicación de blog, ¿vale? Te guiaré a través de todos los pasos aquí y te explicaré lo que debes hacer y las diferentes cuentas y cosas que debes tener a mano para completar el masterclass de hoy. Y después de eso, estaré atento a tus preguntas en el respectivo canal de Discord. Porque los organizadores del evento, lo cambiaron un poco, así que no habrá una sesión de preguntas y respuestas. No voy a responder preguntas al final, pero estaré atento a tus preguntas en el respectivo canal de Discord. ¿De acuerdo? Como dije, estoy seguro de que has oído hablar de las aplicaciones SWA, ya sabes, aplicaciones web estáticas, la forma en que puedes implementar aplicaciones web en estáticas. Y puedes usar el entorno de Cloud y, por supuesto, Azure para orquestar e implementar esas aplicaciones. Tengo aquí un enlace específico a SWA con la documentación completa, ya sabes, para que puedas
2. Getting Started with Azure Static Web Apps
Para comenzar, haz clic en el enlace de documentación para encontrar guías rápidas para varios frameworks. Necesitarás una cuenta activa de Azure, que puedes crear de forma gratuita. De manera similar, para Azure DevOps, crea una organización y un proyecto gratuitos. Proporciona la información necesaria, selecciona una región y completa el desafío. Luego, crea un proyecto con un nombre preferido y selecciona la visibilidad. Haz clic en REPLs, elige el tipo de REPL de Git e importa el proyecto de ejemplo. Finalmente, ve al Portal de Azure, selecciona crear un recurso, busca Static web app y haz clic en crear.
3. Creando el Pipeline de Implementación
Debes proporcionar argumentos para los parámetros, como tu suscripción, cuenta, grupo de recursos, plan de alojamiento, región y detalles de implementación. Luego, revisa y crea la implementación. Administra el token de implementación y guárdalo para usarlo más tarde. Crea el pipeline de implementación seleccionando un pipeline de inicio, reemplazando el archivo YM predeterminado y creando una variable con el token de implementación. Guarda y ejecuta el pipeline, y una vez que la implementación sea exitosa, puedes visitar tu Azure Static Web App.
Y ahora podemos comenzar a crear el pipeline de implementación real, ¿vale? Entonces vuelves a Azure DevOps. En REPLs archivos, verás el botón configurar compilación, ¿vale? Haces clic en él, ¿vale? Luego seleccionas como opción un pipeline de inicio, como puedes ver aquí. Después de eso, se mostrará un archivo YM predeterminado, pero debes reemplazarlo con el que te estoy proporcionando aquí. Entonces simplemente lo copias. Y lo proporcionas en el campo correspondiente, ¿vale? Como puedes ver aquí. Y ahora debes crear una variable, ¿vale? Entonces seleccionas variables aquí, ¿vale, a la derecha mano. Luego haces clic en nuevas variables. Perdón. Y luego proporcionas una variable con el nombre de deployment underscore token, ¿vale? Y luego copias el valor del token que copiaste anteriormente, ¿vale? No olvides seleccionar esta casilla aquí, mantener estos valores en secreto, ¿vale? Hay una explicación aquí sobre los diferentes parámetros, ¿vale? Pero voy a omitir eso ahora. Haces clic en OK entonces, ¿vale? Y luego haces clic en guardar, y la variable, el botón guardar aquí en la parte inferior, y se creará la variable, ¿vale? Después de eso, verás la pantalla con el archivo YM nuevamente. Luego haces clic en guardar y ejecutar, ¿vale? Este botón aquí. Y luego habrá un mensaje de confirmación aquí para el inicial. Directamente a la rama principal, por supuesto, pero tal vez puedas jugar con eso más tarde después de este flujo de trabajo y ruta inicial, diría yo, básicos, como variaciones. Luego haces clic en guardar y ejecutar nuevamente en la parte inferior, ¿vale? Y luego se mostrará un mensaje de creación del pipeline, ¿vale? Puedes ver aquí de nuevo un indicador de progreso. Después de eso, tan pronto como la implementación sea exitosa, ¿vale? Estás listo para visitar tu Azure Static Web App.
4. Limpieza de Recursos y Recursos Adicionales
Para limpiar tus recursos después de la masterclass, regresa al portal de Azure, selecciona el grupo de recursos correspondiente, elige la opción de eliminar grupo de recursos, proporciona y confirma el nombre del grupo de recursos, y haz clic en el botón de eliminar. Además, he proporcionado documentación completa y cursos gratuitos en Microsoft Learn para Azure Static Web Apps y varios frameworks como React, Svelte, Vue.js y Blazor con WebAssembly.
Entonces regresas nuevamente a tu portal de Azure, como puedo mostrarte aquí. Seleccionas el grupo de recursos y luego puedes seleccionar la aplicación aquí, y luego haces clic en este enlace aquí, ¿vale? Sí, y luego puedes visitar la SWA, la implementada. Y por supuesto, recuerda limpiar tus recursos, ¿vale? Entonces, para hacer eso, después de la masterclass, simplemente vuelves al portal de Azure, haces clic en grupos de recursos nuevamente. Ya sabes, seleccionas el grupo de recursos correspondiente. Aquí puedes ver el que creé para esta masterclass. Luego seleccionas la opción de eliminar grupo de recursos, ¿vale? Y luego debes proporcionar y confirmar el nombre del grupo de recursos. Debes escribir el nombre del grupo de recursos correspondiente aquí nuevamente y hacer clic en el botón de eliminar. Sí, eso es todo. Además de eso, también proporcioné, como dije aquí, la documentación completa. También hay muchos cursos relacionados con Azure Static Web Apps en Microsoft Learn. Por cierto, todos los cursos que proporcioné de Microsoft Learn son gratuitos. Puedes ver aquí sobre diferentes aplicaciones relacionadas con Azure Static Web Apps, React, Svelte, Vue.js, Blazor con WebAssembly. Hay muchas opciones diferentes aquí que puedes explorar más tarde. Sí, pero eso es todo, ¿no?
Comments