Cómo desplegar tu aplicación React en AWS S3 y CloudFront

Amazon Web Services (AWS) ofrece una infraestructura global robusta para alojar y servir aplicaciones web. En esta guía, te guiaremos a través del despliegue de tu aplicación de página única (SPA) React usando AWS S3 y CloudFront, aprovechando la robusta red de AWS y los servidores en el borde de CloudFront.

AWS S3

Amazon Simple Storage Service (S3) es un servicio de almacenamiento de objetos que ofrece escalabilidad líder en la industria, disponibilidad de datos, seguridad y rendimiento.

S3 está diseñado para una durabilidad del 99.999999999% (11 nueves) y almacena datos para millones de aplicaciones utilizadas por líderes del mercado en cada industria.

Te permite almacenar y recuperar cualquier cantidad de datos en cualquier momento, desde cualquier lugar en la web, lo que lo hace una opción ideal para alojar sitios web estáticos y aplicaciones web como aquellas construidas con React.

Configurando tu aplicación React en AWS S3

1. Construye tu aplicación React: Primero, prepara tu aplicación React para el despliegue. Ejecuta npm run build para crear una compilación de producción de tu aplicación.

2. Crea un Bucket S3: Inicia sesión en tu Consola de Administración de AWS, navega al servicio S3, y crea un nuevo bucket. Asegúrate de que el nombre de tu bucket sea único y que la opción para bloquear todo el acceso público esté desmarcada, ya que tu sitio web será accesible públicamente.

3. Configura el Bucket para alojamiento de sitios web: Una vez creado tu bucket, habilita el alojamiento de sitios web estáticos en las propiedades del bucket. Especificarás index.html como los documentos de índice y de error.

4. Sube tu aplicación: Sube el contenido de la carpeta build generada por React a tu bucket de S3. Asegúrate de que los permisos estén configurados como públicos para que los archivos puedan ser accesibles a través de internet.

5. Asegura tu Bucket: Aunque tu sitio web es público, asegurar tu bucket es crucial para prevenir accesos no autorizados. Utiliza políticas de AWS Identity and Access Management (IAM) para gestionar el acceso.

CloudFront

Amazon CloudFront es un servicio rápido de red de entrega de contenido (CDN) que entrega de manera segura datos, videos, aplicaciones y APIs a clientes globalmente con baja latencia y altas velocidades de transferencia. CloudFront está integrado con AWS – tanto físicamente como a través de la red de AWS – para ofrecerte una manera fácil de distribuir contenido a tus usuarios con baja latencia y altas velocidades de transferencia de datos.

Desplegando tu aplicación con CloudFront

1. Crea una Distribución CloudFront: Ve al console de CloudFront y crea una nueva distribución. Selecciona tu bucket de S3 como el origen. Recuerda especificar el mismo bucket de S3 que usaste para subir tu aplicación React.

2. Configura los Ajustes: Elige los ajustes basados en tus requisitos. Para una aplicación React, asegúrate de manejar respuestas personalizadas de error. Puedes querer configurar una respuesta de error personalizada para errores 404 para redirigir a index.html con un código de estado 200, asegurando una navegación fluida en la SPA.

3. SSL y Dominio Personalizado: CloudFront ofrece un certificado SSL/TLS gratuito, que puedes usar para servir tu contenido sobre HTTPS. Además, si tienes un dominio personalizado, puedes configurarlo en CloudFront y usar AWS Route 53 para apuntar tu dominio a tu distribución CloudFront.

AWS Route 53

AWS Route 53 es un servicio web de Sistema de Nombres de Dominio (DNS) escalable y altamente disponible. Está diseñado para dar a los desarrolladores una manera extremadamente confiable y rentable de enrutar usuarios finales a aplicaciones de Internet alojadas en AWS.

Route 53 se puede integrar fácilmente con servicios de AWS como CloudFront, haciendo sencillo configurar registros DNS para enrutar tráfico a tu CDN.

Vinculando AWS Route 53 a CloudFront

Crea una Zona Alojada: En la consola de Route 53, crea una nueva zona alojada para tu dominio.

Esto generará cuatro servidores DNS que necesitarás actualizar en la configuración de tu registrador de dominios.

Crea Conjuntos de Registros: Dentro de tu zona alojada, crea conjuntos de registros apuntando a tu distribución CloudFront. Para una configuración básica, necesitarás un registro A usando un Alias que apunte al nombre de dominio de tu distribución CloudFront.

Actualiza el Registrador de Dominios: Actualiza la configuración de DNS en tu registrador de dominios para usar los servidores DNS proporcionados por Route 53. Esto asegura que tu dominio enrute correctamente el tráfico a tu distribución CloudFront.

Integración Continua y Despliegue con GitHub Actions

Configurando un flujo de trabajo para tu aplicación React, puedes construir, probar y desplegar automáticamente tu proyecto en AWS S3 e invalidar el caché de tu distribución CloudFront, asegurando que los usuarios siempre tengan acceso a la versión más reciente de tu aplicación.

Configurando GitHub Actions para tu aplicación React

1. Crea un workflow en GitHub: En tu repositorio del proyecto, crea un directorio .github/workflows si aún no existe. Dentro de este directorio, crea un archivo YAML para tu flujo de trabajo, por ejemplo, deploy.yml.

2. Configura las Credenciales AWS: Para permitir que GitHub Actions despliegue tu aplicación en AWS, necesitarás configurar tus credenciales AWS como secretos en la configuración de tu repositorio GitHub. Ve a Configuración > Secretos y añade tu AWS Access Key ID y AWS Secret Access Key como AWS_ACCESS_KEY_ID y AWS_SECRET_ACCESS_KEY, respectivamente.

3. Define tu Flujo de Trabajo: En tu archivo deploy.yml, define los pasos de tu proceso CI/CD. Aquí hay un flujo de trabajo simple que instala dependencias, construye tu aplicación React y despliega la construcción en AWS S3, seguido por una invalidación de la distribución CloudFront:

name: Deploy React App to AWS S3 and CloudFront

on:
  push:
    branches:
      - main  # or your default branch

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '14'  # Set this to your node version

    - name: Install dependencies
      run: npm install

    - name: Build
      run: npm run build

    - name: Deploy to AWS S3
      uses: jakejarvis/s3-sync-action@v0.5.1
      with:
        args: --acl public-read --follow-symlinks --delete
      env:
        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}  # Your S3 Bucket name
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: 'us-east-1'  # Your AWS Region
        SOURCE_DIR: './build'

    - name: Invalidate CloudFront Distribution
      uses: chetan/invalidate-cloudfront-action@v1
      env:
        DISTRIBUTION_ID: ${{ secrets.DISTRIBUTION_ID }}  # Your CloudFront distribution ID
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        PATHS: '/'  # Paths to invalidate, typically '/'

4. Finaliza y Empuja: Después de configurar tu archivo de flujo de trabajo, empújalo a tu repositorio. GitHub Actions ejecutará automáticamente el flujo de trabajo cada vez que empujes cambios a la rama especificada, asegurando que tu aplicación React esté siempre actualizada.

Obteniendo Credenciales AWS para GitHub Actions

Para que tus flujos de trabajo de GitHub Actions interactúen con los servicios de AWS, como desplegar tu aplicación React en S3 o invalidar una distribución CloudFront, necesitarás proporcionar credenciales AWS con los permisos necesarios. Aquí te mostramos cómo puedes crear y configurar estas credenciales de forma segura.

Paso 1: Creando un Usuario IAM

Inicia sesión en la Consola de Administración de AWS y navega al servicio IAM (Identity and Access Management).

Crea un Nuevo Usuario IAM:

Elige Usuarios desde el panel de navegación y haz clic en Añadir usuario. Proporciona un nombre de usuario (por ejemplo, github-actions) y selecciona Acceso programático como el tipo de acceso. Esto crea un ID de clave de acceso y una clave de acceso secreta para la CLI de AWS, SDKs y otras herramientas de desarrollo.

Adjuntar Políticas:

Para otorgar los permisos necesarios para desplegar en S3 e invalidar distribuciones CloudFront, adjunta las políticas AmazonS3FullAccess y CloudFrontFullAccess. También puedes crear una política personalizada con permisos más restringidos adaptados a tus necesidades específicas.

Es una mejor práctica adherirse al principio de menor privilegio, otorgando solo los permisos necesarios para las tareas que realizarán tus GitHub Actions. Revisa y Crea el Usuario:

Revisa tus ajustes y haz clic en Crear usuario. Después de que el usuario sea creado, se te proporcionará un ID de clave de acceso y una clave de acceso secreta. Asegúrate de descargar y guardar de forma segura estas credenciales, ya que la clave de acceso secreta no puede ser recuperada después de este paso.

Paso 2: Configurando Secretos en GitHub

Navega a tu Repositorio GitHub donde está ubicada tu aplicación React.

Accede a la Configuración del Repositorio: Haz clic en Configuración > Secretos > Acciones.

Añade tus Credenciales AWS:

Haz clic en Nuevo secreto del repositorio.

Ingresa AWS_ACCESS_KEY_ID como el nombre y pega el ID de clave de acceso del usuario IAM como el valor. Repite el proceso para añadir otro secreto, AWS_SECRET_ACCESS_KEY, con la clave de acceso secreta como su valor. (Opcional) Secretos Adicionales:

Si tu flujo de trabajo de GitHub Actions necesita especificar un nombre de bucket S3, ID de distribución CloudFront, o cualquier otro identificador de recurso AWS, puedes añadirlos como secretos de la misma manera.

Paso 3: Usando los Secretos en tu Flujo de Trabajo de GitHub Actions

En tu archivo de flujo de trabajo de GitHub Actions (por ejemplo, deploy.yml), ahora puedes referenciar estos secretos usando la sintaxis ${{ secretos.NOMBRE }}, asegurando que tu flujo de trabajo tenga los permisos necesarios para realizar acciones en AWS sin codificar información sensible:

env:
  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  # Add other AWS resource identifiers as needed