Desplegar Static Website + CICD + AFD + Cert TLS

Esto es lo que queremos llegar a realizar:

1. Creamos un proyecto en Azure DevOps y subimos la docu

Para crearlo primero debemos tener una cuenta activa y una organización a la que asignarle el proyecto, para ello iremos a nuestra organización que está ya creada y dentro vamos a Setting.

Sigue las instrucciones de las imágenes:

Ahora subiremos a nuestro proyecto los archivos de documentación como aprendimos al principio de este camino.

git status
git add .
git commit -m "texto"

2. Crear el hosting del sitio estático en Azure Storage

2.1 Crear cuenta de almacenamiento (Storage Account)

Como anteriormente ya estuvimos viendo y explicando como se hacía ahora te pondré directamente las configuraciones realizadas para crearlo:

2.2 Habilitar la funcionalidad de Static Website

Dentro de la cuenta de almacenamiento (Storage Account), hay una funcionalidad para que actue como web estática directamente nuestra docu.

Seguimos los pasos

3. Crear una pipeline de CI/CD en Azure DevOps

Ahora que ya tenemos nuestro sitio donde se alojará la web, necesitamos la web en sí.

Para ello vamos automatizar la tarea de creación para que cada vez que modifiquemos el repo y lo subamos a Azure DevOps, esta actualización se realize automáticamente.

Primero creamos la pipeline en nuestro repo local para luego subirlo al repo de Azure DevOps (esto son buenas prácticas)

Este es nuestro archivo:

### Pipeline para Web Static de Documentación ###

# Trigger: cuándo se ejecuta la pipeline
# En este caso, cada vez que hay un push a la rama main
trigger:
- main

# Máquina virtual donde se ejecuta la pipeline (agente de Azure)
pool:
  vmImage: ubuntu-latest

steps:

# =========================
# 1. Instalar Python
# =========================
# MkDocs/Zensical es una herramienta basada en Python,
# por lo tanto necesitamos instalarlo en el agente.
- task: UsePythonVersion@0
  inputs:
    versionSpec: '3.x'
  displayName: 'Instalar Python'

# =========================
# 2. Instalar dependencias
# =========================
# Aquí instalamos Zensical y el tema visual Material
# que se usa para mejorar el diseño del sitio.
- script: |
    pip install zensical
  displayName: 'Instalar Zensical'

# =========================
# 3. Construir el sitio web
# =========================
# mkdocs build toma la carpeta /docs y mkdocs.yml
# y genera una web estática en la carpeta /site
- script: |
    zensical build
  displayName: 'Generar sitio estático'

# =========================
# 4. Desplegar en Azure Storage
# =========================
# Este paso sube el contenido generado (/site)
# al contenedor especial $web de Azure Storage
- task: AzureCLI@2
  inputs:
    # Conexión configurada en Azure DevOps (Service Connection)
    azureSubscription: 'conexion-azure'

    scriptType: bash
    scriptLocation: inlineScript

    # Subimos todos los archivos generados por Zensical
    # al contenedor $web (Static Website)
    inlineScript: |
        az storage blob upload-batch --account-name storagewebdocu --destination '$web' --source site --overwrite --auth-mode login

  displayName: 'Desplegar a Azure Storage ($web)'

3.1 Crear conexión con el CLI de Azure

El siguiente paso será que exista una conexión con el CLI de Azure porque sino no podrá ejecutar los comandos que hemos descrito en la pipeline.

3.2 Dar permisos a la conexión

Ahora le daremos permisos a la conexión entre azure DevOps y el storage para ello, justo donde acabamos de crear la conexión hacemos clic en el siguiente enlace

Nos llevará a la siguiente ventana, donde copiaremos el id para asignarle los permisos a ese id

Seguimos las imágenes para asignar el permiso

Pegamos el id que hemos copiado

Confirmamos y ya estaría

3.3 Crear la Pipeline dentro de Azure DevOps

Usaremos Pipelines, dentro de Azure DevOps, vamos al apartado de Pipelines y creamos una:

Creación

4. Crear un endpoint con Azure Front Door

Iremos al siguiente recurso del portal de Azure

Empezamos con los 'aspectos básicos':

Comprobamos que funciona

• Entender el uso de HTTPS y certificados TLS
• Configurar un dominio personalizado
• Añadir un certificado HTTPS en Azure Front Door
• Validar el acceso seguro al sitio web

5. Entender el uso de HTTPS y certificados TLS

¿Qué es HTTP vs HTTPS?

HTTP (HyperText Transfer Protocol)

• Transfiere datos en texto plano
• Cualquiera puede interceptar la información
• No hay seguridad

HTTPS (HTTP Secure)

• Usa cifrado TLS (Transport Layer Security)
• Protege los datos en tránsito
• Evita ataques como "man-in-the-middle"

Ventajas:

• Seguridad de datos
• Protección contra ataques
• Confianza del usuario (candado en la web)
• Mejora SEO
• Requisito en servicios modernos

¿Qué es TLS?

Es un protocolo que:

• Cifra la comunicación
• Autentica el servidor
• Garantizaz integridad (no manipulación)

¿Qué hace un certificado TLS?

• Verifica la identidad del sitio
• Asocia dominio <--> Servidor
• Permite cifrado HTTPS

6. Configurar un dominio personalizado

Prueba de purgar caché