Azure Static Web Apps (SWA) con Azure DevOps

Una vez más, gracias por unirse a nosotros hoy. Tendremos un masterclass sobre Azure Static Web Apps con Azure DevOps. Mi nombre es Juarez Barbosa Jr. Trabajo para Microsoft como líder de participación de desarrolladores.

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

Visítalo más tarde. Esta es la página de inicio de SWA en Azure. Pero si haces clic en la documentación aquí, encontrarás las guías rápidas para Angular, React, Vue.js y otros frameworks en caso de que quieras trabajar con JavaScript básico. Sí, ambos requisitos previos para el masterclass de hoy, necesitarás tener una cuenta activa de Azure. En caso de que no tengas una, puedes crear una de forma gratuita. De acuerdo, solo necesitas hacer clic en este enlace aquí y te dará la oportunidad de comenzar. Y por cierto, aquí tenemos servicios de por vida que son gratuitos. Dependiendo del servicio, por supuesto, pero para los que necesitas para este masterclass, no necesitas gastar nada. Lo mismo ocurre con Azure DevOps, necesitarás crear un proyecto de forma gratuita, en realidad una organización y un proyecto. Cuando visites esta página aquí, debes hacer clic en este botón de inicio gratuito aquí y luego puedes completar los pasos como te mostraré aquí ahora. De acuerdo, este es en realidad el primer paso. De acuerdo, visita Azure DevOps, selecciona iniciar de forma gratuita. De acuerdo, y luego debes crear tu organización de DevOps. De acuerdo, y después de eso, haz clic en el botón continuar. Proporcionarás la información para tu organización aquí. Como puedes ver, mi nombre aquí, Juarez Junior0833, selecciona una región, una región de la nube. De acuerdo, West Europe en mi caso aquí. Por supuesto, debes completar este desafío y luego hacer clic en continuar. Como se explica aquí. Después de eso, se creará tu organización de DevOps. Puedes ver el indicador de progreso aquí. Después de eso, verás una página para crear un proyecto. Puedes proporcionar tu nombre preferido aquí. El mío es DevOpsJSConfSWA, ¿de acuerdo? Y luego seleccionas privado o público, dependiendo de cómo quieras, diría yo, crearlo, por supuesto, y haces clic en el botón crear. Se creará tu proyecto. Puedes ver la página de inicio de Azure DevOps y el proyecto respectivo aquí. Y después de eso, debes hacer clic en los REPLs aquí, archivos. De acuerdo, y luego el tipo de REPL aquí será Git, como puedes ver aquí, y luego proporcionas la URL del proyecto de ejemplo, github.com static web dev vanilla-api.git. Luego haces clic en importar, de acuerdo, el botón importar aquí en la parte inferior, de acuerdo. Y luego veremos otra pantalla de indicador de progreso, de acuerdo. Y tan pronto como termine, verás que el proyecto se importó correctamente, por lo que puedes ver todo el REPL de GitHub replicado aquí y visible. Y luego podemos crear la Azure Static web app, de acuerdo. Entonces, navegas hasta el Portal de Azure, de acuerdo. Si nunca has accedido, es solo un portal.azure.com, de acuerdo. Lo escribes y te llevará al Portal de Azure. De hecho, lo tengo abierto aquí, sí, está aquí, esta es la página de inicio del Portal de Azure, pero volvamos al tutorial aquí. Creo que este, sí, de acuerdo. Entonces seleccionas crear un recurso, de acuerdo. Después de eso, buscas Static web app, de acuerdo. Puedes ver aquí que verás la opción de Static web app en la lista, de acuerdo. La seleccionas, de acuerdo. Y luego haces clic en Static web app, el botón crear, de acuerdo. Después de eso, la página de inicio de Static web apps.

. Debes proporcionar algunos argumentos para los parámetros, ya sabes, y los valores. Por lo general, tu suscripción, ya sabes, según la suscripción y la cuenta que creaste. Un grupo de recursos, puedes usar uno existente, en caso de que estés trabajando con Azure, de lo contrario, puedes crear uno nuevo. Yo creé uno nuevo, Mi aplicación de DevOps. El plan de alojamiento, seleccionas tres, como dije. Seleccionas una región, en mi caso es West Europe. Y luego haces clic en revisar y crear. Puedes ver lo mismo aquí de nuevo, ¿vale? La suscripción, Visual Studio Enterprise, en mi caso. El grupo de recursos, creé uno nuevo, Grupo de recursos de DevOps JS Conf RG, ¿vale? El nombre de la aplicación es Mi aplicación de DevOps, ¿vale? El tipo de plan seleccionado es tres. La región, West Europe, y luego los detalles de implementación, GitHub u otro, debes seleccionar otro, porque importamos el repositorio de GitHub a Azure, como mostré anteriormente aquí, ya sabes, si lo recuerdas. ¿Vale? Después de eso, haces clic en revisar y crear. Se mostrará otra pantalla, ¿vale? Y luego puedes hacer clic en el botón crear, y comenzará el proceso de implementación, ¿vale? Veremos este indicador de progreso de la implementación aquí, y después de eso, habrá un mensaje, ya sabes, con una confirmación sobre la implementación. Luego haces clic en el botón ir al recurso, ¿vale? Después de eso. Y ahora debes administrar el token de implementación, ¿vale? Entonces haces clic en administrar token de implementación, ¿vale? Después de eso, se mostrará un token. Haces clic para copiarlo aquí, ¿vale? Y debes guardarlo porque lo necesitarás en otra pantalla en un paso posterior.

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.

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?