Despliega tu web fácil con Azure Static Web Apps
Tags: desarrollo, azure, spanish, staticwebapps
Published: 2023-12-26 07:16:53

---
title: Despliega tu web fácil con Azure Static Web Apps
published: true
date: 2023-12-25 20:00:56 UTC
tags: Desarrollo, Azure, Spanish, StaticWebApps
canonical_url: https://danieljsaldana.dev/despliega-tu-web-facil-con-azure-static-web-apps/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q29tu06pk0c9agtcdge5.png
---

En este tutorial, aprenderemos a desplegar nuestro portfolio de forma gratuita utilizando el servicio Azure Static Web Apps, ¡y lo haremos con estilo! Desarrollaremos una pequeña automatización en Azure DevOps aprovechando las Releases.

#### Aspectos emocionantes que cubriremos:

- 🛠️ Desarrollo de un pipeline de despliegue.
- 🧪 Pruebas de cobertura.
- 🚀 Pruebas E2E con Cypress.

Para este ejemplo, usaremos el repositorio de código del portfolio en VueJS, que puedes clonar desde [Portfolio-vitest](https://dev.azure.com/danieljsaldana/labs-danieljsaldana/_git/Portfolio-vitest).

##### **Paso 1: Crear la aplicación estática en Azure**

Comencemos creando nuestra aplicación estática en Azure. Accede al portal de [Azure](https://portal.azure.com), busca "Aplicaciones web estáticas" y sigue estos pasos:

- **Detalles del proyecto:**

- **Detalles de la aplicación web estática:**

- **Plan de hospedaje:**

- **Detalles de Azure Functions y ubicación provisional:**

- **Detalles de la implementación:**

¡Ahora crea tu recurso!

Este paso es opcional y se aplica si ya tienes un dominio. En la sección "Dominios personalizados" dentro del recurso, haz clic en "Agregar". Si tu dominio no utiliza la zona DNS de Azure, selecciona 'Dominio personalizado en otro DNS' y agrega tu dominio.

Si nuestro dominio no usa la zona DNS de Azure, pulsaremos en "Dominio personalizado en otro DNS", agregamos el dominio que queremos asignar y posteriormente, solo tendremos que crear un registro CNAME en nuestra zona DNS con el valor que nos aporta.

Ahora, obtén el token de implementación desde la pestaña de información general. Busca "Administrar token de implementación", haz clic y guarda el token.

* * *

##### **Paso 2: Configuración en Azure DevOps**

Ahora, dirigámonos a Azure DevOps. Realiza un pequeño cambio en el código de tu portfolio para ajustar la URL de las pruebas de Cypress. Busca la ruta `cypress/integration` y cambia la URL en `cy.visit('')` por la de tu portfolio.

Listos para la automatización en Releases, ¡accedamos a Azure DevOps! Busca "Pipelines", luego "Release", y crea un nuevo Release Pipeline.

###### **Configuración del artifacts:**

- Haz clic en Artifacts y selecciona 'Azure Repos Git'. Define el repositorio de tu web y guarda el valor de "Source alias", ¡lo necesitarás más adelante!

###### **Configuración de la pipeline:**

Asegúrate de que el agente en todos los stages sea "Ubuntu-Latest". ¡Vamos a crear tres stages emocionantes!

###### **Stage 1: Cobertura**

En este stage, busca "Command line" y añade:

```
echo "Instalando NPM"

npm install

echo "Ejecutando cobertura"

npm run coverage

```

¡Listo para guardar! Ahora, añade el siguiente stage.

###### **Stage 2: Despliegue**

Busca "Deploy Azure Static Web App (Preview)" y completa los campos:

- **Display name:** El nombre del job en mi caso sera Deploy.
- **App location:** Nombre definido en "Source alias" de Artifacts.
- **App build command:** Sera el comando que necesitamos para buildear nuestra aplicación, en nuestro caso: `npm run build` y en el "Working Directory" definiremos `_Portfolio-vitest`
- **Output location:** Ubicación del directorio del código de la aplicación compilada después de la compilación, en nuestro caso "disk".
- **Azure Static Web Apps api token:** Token de implementación obtenido anteriormente.
- **Production Branch:** Aqui deberemos de usar nuestra rana de producción, la cual en nuestro caso es "main".

¡Con este stage, el despliegue estará automatizado!

###### **Stage 3: Pruebas E2E con Cypress**

Define el job con el siguiente script en "Command line":

```
echo "Instalando NPM"

npm install

echo "Cypress"

npm run cypress:run

```

En "Working Directory", define `_Portfolio-vitest`.

Luego, añade otro job buscando "Publish Test Results":

En el siguiente job completaremos con siguientes inputs:

###### **Publish test results:**

- **Test results files:** `*.xml`
- **Search folder:** Ruta de los resultados de test `_Portfolio-vitest/cypress/report/`
- **Merge test results:** Marcaremos esta opción para unificar los resultados de los tests.

¡Guarda y tendrás tu pipeline lista para el despliegue!

¡Espero que este tutorial te ayude a desplegar tu portfolio de manera efectiva! 🚀✨