![\"\"](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/11\/SPA.jpg\")
<\/p>\n<\/p>\n
En este art\u00edculo os cuento una estrategia eficiente para desplegar una SPA con Azure Static Web Apps. Utilizando servicios como App Configuration y Azure Function Apps, esta propuesta os permite compilar la aplicaci\u00f3n una vez y desplegarla en varios entornos sin necesidad de recompilaci\u00f3n \ud83d\ude09<\/p>\n
<\/p>\n
Dentro del ciclo de despliegue de una SPA, el escenario habitual para llevar nuestra aplicaci\u00f3n a los diferentes entornos suele ser este:<\/p>\n
![\"\"](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/11\/build-once-deploy-everywhere-many-buids.svg\")
<\/p>\n
Contamos con un n\u00famero N de entornos y una configuraci\u00f3n espec\u00edfica para cada entorno. En el proceso de despliegue de nuestra aplicaci\u00f3n, realizamos un proceso de compilaci\u00f3n o \u201cbuild\u201d, en el cual, adecuamos las configuraciones de la aplicaci\u00f3n al entorno en el que deseamos desplegar el c\u00f3digo.<\/p>\n
Este enfoque tiene unos cuantos contras, como, por ejemplo, \u00bfqu\u00e9 pasa si en mi proceso de despliegue he configurado mal alg\u00fan valor? estoy obligado a recompilar de nuevo toda mi aplicaci\u00f3n para poder arreglar el error, o \u00bfpor qu\u00e9 deber\u00eda estar compilando m\u00e1s de una vez la misma versi\u00f3n de la aplicaci\u00f3n? teniendo que compilar la aplicaci\u00f3n por cada entorno estoy a\u00f1adiendo tiempo de espera al proceso de entrega de valor y gastando tiempo de ejecuci\u00f3n en la m\u00e1quina que tiene que compilar mi c\u00f3digo.<\/p>\n
En este art\u00edculo veremos una manera de hacer que la configuraci\u00f3n de nuestra aplicaci\u00f3n sea prove\u00edda por el mismo entorno en el que estamos desplegando durante el arranque de la aplicaci\u00f3n, de tal manera que solamente vamos a necesitar compilar una vez para poder desplegar donde queramos. Build once, deploy everywhere<\/strong><\/p>\n Para alcanzar este escenario nos vamos a apoyar en unos cuantos servicios de Azure.<\/p>\n Es el servicio que nos va a servir como almac\u00e9n de configuraciones. Aqu\u00ed daremos de alta nuestras configuraciones, las etiquetaremos por entorno y ser\u00e1 el lugar desde donde las consumamos.<\/p>\n Es el servicio en el que nos apoyaremos para realizar gran parte de la magia que vamos a necesitar. Ideal para desplegar nuestras aplicaciones de javascript.<\/p>\n De entre muchas de sus features, destaca que pone a nuestra disposici\u00f3n un proyecto de Azure Functions para invocar desde nuestra aplicaci\u00f3n, como si fuese una especie de \u201cback-end\u201d al que podemos atacar a trav\u00e9s del extremo \u201c\/api\u201d desde el c\u00f3digo de js.<\/p>\n El servicio de Static Web Apps cuenta con tiers:<\/p>\n Es el servicio que nos va a permitir ejecutar peque\u00f1as l\u00f3gicas en base a eventos, como, por ejemplo, llamadas HTTP, la subida de un archivo a un storage o una expresi\u00f3n cron.<\/p>\n Con las azure functions haremos la puerta de enlace entre nuestro App Configuration y nuestra Static Web App, permitiendo acceder al c\u00f3digo de javascript a los valores de la configuraci\u00f3n del entorno.<\/p>\n Para conseguir el escenario deseado haremos uso de:<\/p>\n A fecha de la escritura de este art\u00edculo, la posibilidad de conectar nuestras functions con App Configuration no est\u00e1 soportada por las functions de tipo \u201cmanaged\u201d lo cual nos obliga a establecer todas nuestras Static Web Apps en el plan Standart, y de esa manera poder vincular una Function App externa.<\/p>\n Tambi\u00e9n, actualmente Static Web Apps solo permite enlazar un proyecto de functions a un \u00fanico environment de la Static Web App, a\u00fan que quiz\u00e1s esto cambie en un futuro nos limita:<\/p>\n Partimos del escenario en el que tenemos los recursos:<\/p>\n Un App Configuration<\/p>\n Un par de proyectos de functions<\/p>\n Para el ejemplo voy a partir de una aplicaci\u00f3n de React generada con vite, en la que consultaremos con una llamada al inicio de la aplicaci\u00f3n el valor de una configuraci\u00f3n y se pintar\u00e1 por pantalla. Esta app esta subida a un repositorio de Github.<\/p>\n Toca crear unas Static Web Apps. Nos dirigimos al portal de azure e iniciamos el proceso de crear el recurso. En este punto es importante fijarnos en dos detalles.<\/p>\n Yo voy a enlazar el recurso con el repositorio de mi cuenta de GitHub para aprovechar que autom\u00e1ticamente se genera una Github Action que maneja el proceso de CI\/CD de la aplicaci\u00f3n.<\/p>\n En la aplicaci\u00f3n de React vamos a crear una nueva carpeta bajo \u201csrc\u201d<\/em> llamada api<\/strong>, en esta ruta es donde voy a dejar el c\u00f3digo de mi function.<\/p>\n Al estar en el modelo de \u201cbring you own function\u201d, el c\u00f3digo de nuestra function podr\u00eda estar en cualquier lado, incluso en otro repositorio, nosotros nos encargamos de desarrollar, mantener y desplegar ese c\u00f3digo por nuestra cuenta. El motivo por el que lo dejamos aqu\u00ed es por comodidad.<\/p>\n Vamos a generar una function en NET 6 en modo Isolated. Para hacer esto nos podemos apoyar del scaffold que hace Visual Studio de un proyecto de functions.<\/p>\n Habiendo hecho todo esto nos quedar\u00e1 una estructura muy parecida a esta.<\/p>\n En el Program.cs del proyecto de functions vamos a configurar la conexi\u00f3n a nuestro App Configuration. Para ello vamos a necesitar los nugets:<\/p>\n Y configuraremos el c\u00f3digo de esta manera<\/p>\n En funci\u00f3n de la variable de entorno en el que se despliegue nuestro c\u00f3digo, consumiremos un conjunto de configuraciones u otro.<\/p>\n Si nos damos cuenta, estamos preparando la function para que sea sensible a reconocer los cambios en la configuraci\u00f3n en tiempo de ejecuci\u00f3n, escuchando el valor de \u201cSentinel\u201d. En este otro art\u00edculo<\/a> explico de forma detallada c\u00f3mo funciona este mecanismo, as\u00ed que te recomend\u00f3 echarle un vistazo.<\/p>\n Ahora solo nos falta crear una function que consulte la configuraci\u00f3n y la sirva como respuesta a una petici\u00f3n HTTP<\/p>\n Ahora, vamos a preparar nuestra app de React para llamar a nuestra function en el arranque y que obtenga la configuraci\u00f3n.<\/p>\n Vamos a crear un fichero environment.ts, que nos servir\u00e1 para almacenar la informaci\u00f3n de la configuraci\u00f3n.<\/p>\n En el main.ts, vamos a hacer una llamada fetch al endpoint \u201c\/api\/settings\u201d. La ventaja de este modelo es que al ser nuestra function el \u201cback-end\u201d en la Static Web App, con invocar la ruta \u201c\/api\u201d ya tenemos acceso a nuestras functions sin necesidad de conocer ninguna URL.<\/p>\n Y para hacer la prueba, voy a pintar un valor de la configuraci\u00f3n en el componente principal de la aplicaci\u00f3n que nos saluda con un amigable \u201cHello world!\u201d.<\/p>\n Para finalizar solo nos queda enlazar nuestra Static Web App con nuestra function, para que nos funcione como nuestro \u201cback-end\u201d.<\/p>\n Para hacer esto tenemos dos opciones, usar la interfaz del portal de azure o hacerlo mediante el Azure CLI. Yo personalmente recomiendo hacerlo mediante el CLI, ya que parece dar menos problemas. Se hace a trav\u00e9s del comando<\/p>\n Y con esto, ya deber\u00eda aparecer enlazado nuestro proyecto de functions a la Static Web App<\/p>\n Con todo el c\u00f3digo desarrollado, la app de React junto al proyecto de functions desplegado y nuestros recursos vinculados ya podemos ver si todo esto funciona<\/p>\n Tenemos estos valores registrados en nuestro App Configuration, los cuales consumiremos en nuestras dos SPAs<\/p>\n Nos dirigimos a nuestra Static Web App para el entorno de DEV y vemos que tenemos un fant\u00e1stico \u201cHello world from development!\u201d que coincide con los valores de DEV de nuestra configuraci\u00f3n.<\/p>\n Y ahora, si nos vamos a la Static Web App de PRO vemos que tenemos la misma p\u00e1gina, pero con los valores correspondientes de ese entorno.<\/p>\n \u00a1Lo hemos conseguido! \u00a1Nuestras SPAs est\u00e1n tomando la configuraci\u00f3n del entorno en el que est\u00e1n desplegadas sin necesidad de ser compiladas cada vez!<\/p>\n Por \u00faltimo, veamos que pros y contras tiene esta aproximaci\u00f3n<\/p>\n PROS<\/p>\n CONTRAS<\/p>\n Os dejo en este enlace el repositorio de GitHub<\/a> con el c\u00f3digo que he desarrollado para el art\u00edculo. Espero que lo hayas encontrado de utilidad.<\/p>\n<\/span>","protected":false},"excerpt":{"rendered":" En este art\u00edculo os cuento una estrategia eficiente para desplegar una SPA con Azure Static Web Apps. Utilizando servicios como App Configuration y Azure Function Apps, esta propuesta os permite compilar la aplicaci\u00f3n una vez y desplegarla en varios entornos … Continue reading ![\"\"](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/11\/build-once-deploy-everywhere-one-build.svg\")
<\/a><\/a><\/p>\nApp Configuration<\/h2>\n
Static Web Apps<\/h2>\n
\n
Functions Apps<\/h2>\n
\u00bfQu\u00e9 vamos a necesitar?<\/h2>\n
\n
Consideraciones de esta soluci\u00f3n<\/h2>\n
\n
Hora de hacer la magia<\/h2>\n
<\/a><\/p>\n<\/a><\/p>\n\n
<\/a><\/a><\/li>\n<\/ol>\nNuestra function<\/h2>\n
<\/a><\/p>\n\n
<\/a><\/p>\n<\/a><\/h2>\nNuestra React App<\/h2>\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/h2>\nEn el portal de Azure<\/h2>\n
<\/a><\/p>\n<\/a><\/p>\nA probar<\/h2>\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\nPros y contras<\/h2>\n
\n
\n