Desplegando una SSR(Nextjs, Gatsby, NuxtJs, Astro.build) en AWS

El despliegue de aplicaciones de Frontend en AWS puede ser un proceso complejo. Sin embargo, utilizando CloudFormation, podemos automatizar gran parte de esta tarea y garantizar una implementación consistente y confiable. A continuación, presentaremos un paso a paso detallado para desplegar un proyecto SSR de Frontend en AWS utilizando diferentes frameworks, junto con los servicios de CloudFront, SSL y S3.

Requisitos previos

Antes de comenzar, es importante tener en cuenta los siguientes requisitos previos:

1. Una cuenta de AWS activa con permisos para crear y gestionar los recursos necesarios.
2. Un repositorio GitHub que contenga el código fuente de la aplicación SSR de Frontend.
3. Conocimientos básicos de CloudFormation, los frameworks Next.js, Gatsby, Nuxt.js o Astro.build, y TypeScript.

Configuración del repositorio GitHub

En primer lugar, asegurémonos de que el repositorio GitHub contenga el código fuente del proyecto SSR de Frontend junto con los archivos de configuración pertinentes. A continuación, mostraremos un ejemplo básico de la estructura del repositorio:

/
|-- .github/
|   |-- workflows/
|   |   |-- deploy.yml
|-- public/
|-- src/
|-- package.json
|-- tsconfig.json
|-- next.config.js (o gatsby-config.js, nuxt.config.js, astro.config.mjs según el framework utilizado)

Creación de una plantilla de CloudFormation

Ahora, crearemos una plantilla de CloudFormation que definirá la infraestructura necesaria para el despliegue del proyecto SSR de Frontend en AWS. Utilizaremos un archivo YAML para la plantilla, que incluirá los recursos siguientes:

• Un Bucket de S3 para almacenar los archivos estáticos y el código de la aplicación.
• Un CloudFront Distribution para la entrega de contenido estático y dinámico.
• Una distribución de SSL utilizando AWS Certificate Manager (ACM) para habilitar HTTPS.

A continuación, presentamos un ejemplo básico de un archivo YAML de CloudFormation para el despliegue con Next.js:

Resources:
  FrontendBucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: nombre-del-bucket
      AccessControl: PublicRead

  Distribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          - DomainName: !Ref FrontendBucket
            Id: !Ref FrontendBucket
            S3OriginConfig:
              OriginAccessIdentity: ''
        Enabled: true
        HttpVersion: http2


        DefaultCacheBehavior:
          TargetOriginId: !Ref FrontendBucket
          ViewerProtocolPolicy: redirect-to-https
          AllowedMethods:
            - GET
            - HEAD
            - OPTIONS
          CachedMethods:
            - GET
            - HEAD
          ForwardedValues:
            QueryString: false
            Cookies:
              Forward: none
        ViewerCertificate:
          AcmCertificateArn: arn:aws:acm:us-east-1:123456789012:certificate/abcdefgh-1234-5678-abcd-123456789012
          SslSupportMethod: sni-only

Outputs:
  WebsiteURL:
    Description: URL de la aplicación desplegada
    Value: !Sub "https://${Distribution.DomainName}"

Implementación de la plantilla de CloudFormation

Ahora que tenemos la plantilla de CloudFormation, procederemos a implementarla utilizando AWS Management Console o la AWS CLI. Asegúrate de seleccionar una región de AWS que admita todos los servicios requeridos.

Configuración de permisos y roles de IAM

Es importante garantizar que los permisos y roles de IAM estén correctamente configurados para permitir el acceso y las operaciones necesarias durante el despliegue y la ejecución del proyecto SSR de Frontend. Asegúrate de asignar los permisos adecuados a los servicios involucrados, como CloudFront, S3 y ACM.

Automatización del despliegue

Una vez que hayas completado los pasos anteriores y verificado que el despliegue inicial sea exitoso, es recomendable automatizar el proceso de despliegue utilizando herramientas como AWS CloudFormation StackSets, AWS CodePipeline o AWS CDK. Esto facilitará futuras actualizaciones y despliegues continuos de tu proyecto SSR de Frontend.

Conclusión

En este artículo, hemos explorado el paso a paso para desplegar un proyecto SSR de Frontend en AWS utilizando CloudFormation y varios frameworks populares, como Next.js, Gatsby, Nuxt.js y Astro.build. Hemos abordado la configuración de CloudFront, SSL y S3, junto con ejemplos de código y archivos relevantes. Con este conocimiento, estarás preparado para desplegar tus propias aplicaciones de Frontend en AWS de manera eficiente y confiable. ¡Buena suerte!