React.js Applications Hosted on AWS S3 with Automated Continuous Delivery (CD)

Cuando desarrollamos aplicaciones modernas de página única (SPA - Single Page Application) con React.js, el resultado final tras compilar con herramientas como Webpack, Vite o Create React App es simplemente un conjunto de archivos estáticos (index.html, archivos JavaScript compilados y hojas de estilo CSS).

No es necesario mantener un servidor Amazon EC2 o una instancia VPS encendida 24/7 para servir estos archivos. Utilizando Amazon S3 (Simple Storage Service) configurado como sitio web estático, podemos lograr una disponibilidad del 99.99% con un costo insignificante.

---

¿Por qué elegir Amazon S3 + CodePipeline + CloudFront?

1. Sin servidores que administrar (Serverless): No hay actualizaciones de sistema operativo, parches de seguridad ni balanceadores de carga que gestionar. 2. Entrega Continua (Continuous Delivery - CD): Cada vez que subes cambios a la rama principal de tu repositorio Git (GitHub/Bitbucket/AWS CodeCommit), AWS compila y despliega tu aplicación en segundos de manera transparente. 3. Seguridad y CDN Global: Con CloudFront y AWS Certificate Manager (ACM) dispones de HTTPS gratuito con latencia ultra-baja en todo el mundo.

La arquitectura completa se compone de dos flujos principales interconectados:

Flujo A: Tráfico de Usuario Final (Front-end Delivery)

Route53 (DNS) ➔ CloudFront (CDN Global) + ACM (Certificado SSL Gratis) ➔ S3 Static Website Hosting (Origen)

Flujo B: Integración y Entrega Continua (CI/CD Pipeline)

Source GitHub (Webhook Commit) ➔ AWS CodeBuild (Ejecuta buildspec.yml) ➔ AWS CodePipeline (Orquestación) ➔ S3 Static Website Hosting (Despliegue)

A diferencia de otras soluciones que cobran tarifas fijas por proyecto, este enfoque en Amazon Web Services funciona bajo el modelo estricto de pago por uso (Pay-as-you-go).

A continuación se detalla el costo mensual real de mantener esta arquitectura en producción:

| Servicio AWS | Concepto | Costo Mensual Real | | :--- | :--- | :--- | | Amazon S3 | Hosting Estático & Storage del Bundle | $0.02 USD | | AWS CodeBuild / CodePipeline | Minutos de Compilación (Linux Container) | $0.11 USD | | Amazon Route 53 | Hosted Zone (DNS del dominio personal) | $0.50 USD | | TOTAL MENSUAL | Infraestructura Completa de Producción | $0.63 USD |

Tip: En cuentas de AWS con la capa gratuita activa (Free Tier), el costo de S3 y CodeBuild es de $0.00 USD durante los primeros 12 meses.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "StatementReactS3Deploy",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::nombre_del_bucket/*"
        }
    ]
}

A continuación se presenta el snippet exacto de la política de acceso del bucket extraído del Gist oficial de Daniel Vargas (BucketPolicy):

version: 0.2
phases:
  install:
    runtime-versions:
       nodejs: 16
    commands:
      - npm install
      - npm install -g yarn
      # install dependencies
  pre_build:
    commands:
      #installs dependencies into the node_modules/ directory
      - echo Entered the pre_build phase...
      - yarn install
  build:
    commands:
      # run build script
      - yarn build

artifacts:
  # include all files required to run application
  # we include only the static build files
  files:
    - '**/*'
  base-directory: 'build'

Para que AWS CodeBuild sepa cómo compilar tu aplicación React.js utilizando yarn, debes agregar este archivo buildspec.yml en la raíz de tu proyecto Git (extraído del Gist oficial de Daniel Vargas):