Desplegando una SPA (Angular, React, Vuejs) en AWS

La implementación de una aplicación SPA en AWS implica varios pasos clave, desde la configuración inicial hasta el despliegue efectivo. En este artículo, nos centraremos en los tres frameworks de frontend más populares: Angular, React y Vue.js, todos ellos escritos en TypeScript. A lo largo del proceso, utilizaremos YAML de CloudFormation para definir y orquestar nuestros recursos en AWS.

Requisitos previos

Antes de comenzar, asegúrese de tener los siguientes requisitos previos en su lugar:

1. Una cuenta de Amazon Web Services (AWS) activa y un conocimiento básico de sus servicios.
2. Un repositorio GitHub que contenga su proyecto SPA de frontend.
3. La interfaz de línea de comandos de AWS (AWS CLI) instalada y configurada en su máquina local.

Creación del archivo YAML de CloudFormation

Para comenzar, crearemos un archivo YAML de CloudFormation que describa los recursos necesarios para el despliegue de nuestra aplicación.

Aquí hay un ejemplo de archivo YAML de CloudFormation para cada escenario:

Angular:

AWSTemplateFormatVersion: '2010-09-09'
Resources:
  FrontendBucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: my-angular-frontend-bucket

  CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          - DomainName: !Ref FrontendBucket
            Id: MyFrontendBucket
            S3OriginConfig:
              OriginAccessIdentity: ''

        Enabled: true
        DefaultRootObject: index.html
        DefaultCacheBehavior:
          TargetOriginId: MyFrontendBucket
          ForwardedValues:
            QueryString: false
          ViewerProtocolPolicy: redirect-to-https

  SSLCertificate:
    Type: AWS::CertificateManager::Certificate
    Properties:
      DomainName: mydomain.com
      ValidationMethod: DNS

  CloudFrontDistributionListener:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionId: !Ref CloudFrontDistribution
      Listener:
        Protocol: HTTPS
        Port: 443
        SSLCertificate: !Ref SSLCertificate

React:

AWSTemplateFormatVersion: '2010-09-09'
Resources:
  FrontendBucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: my-react-frontend-bucket

  CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          - DomainName: !Ref FrontendBucket
            Id: MyFrontendBucket
            S3OriginConfig:
              OriginAccessIdentity: ''

        Enabled: true
        DefaultRootObject: index.html
        DefaultCacheBehavior:


          TargetOriginId: MyFrontendBucket
          ForwardedValues:
            QueryString: false
          ViewerProtocolPolicy: redirect-to-https

  SSLCertificate:
    Type: AWS::CertificateManager::Certificate
    Properties:
      DomainName: mydomain.com
      ValidationMethod: DNS

  CloudFrontDistributionListener:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionId: !Ref CloudFrontDistribution
      Listener:
        Protocol: HTTPS
        Port: 443
        SSLCertificate: !Ref SSLCertificate

Vue.js:

AWSTemplateFormatVersion: '2010-09-09'
Resources:
  FrontendBucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: my-vuejs-frontend-bucket

  CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          - DomainName: !Ref FrontendBucket
            Id: MyFrontendBucket
            S3OriginConfig:
              OriginAccessIdentity: ''

        Enabled: true
        DefaultRootObject: index.html
        DefaultCacheBehavior:
          TargetOriginId: MyFrontendBucket
          ForwardedValues:
            QueryString: false
          ViewerProtocolPolicy: redirect-to-https

  SSLCertificate:
    Type: AWS::CertificateManager::Certificate
    Properties:
      DomainName: mydomain.com
      ValidationMethod: DNS

  CloudFrontDistributionListener:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionId: !Ref CloudFrontDistribution
      Listener:
        Protocol: HTTPS
        Port: 443
        SSLCertificate: !Ref SSLCertificate

En cada caso, el archivo YAML define un bucket de S3 que contendrá los archivos de su aplicación SPA y una distribución de CloudFront que actuará como un punto de entrada para sus usuarios.

Configuración del entorno de AWS

Antes de implementar el archivo YAML de CloudFormation, debe configurar su entorno de AWS. Asegúrese de haber instalado y configurado AWS CLI en su máquina local.

Para configurar AWS CLI, abra la terminal y ejecute el siguiente comando:

aws configure

A continuación, proporcione su ID de acceso y clave secreta de AWS, así como la región preferida para implementar los recursos.

Implementación del archivo YAML de CloudFormation

Una vez que haya configurado su entorno de AWS, puede implementar el archivo YAML de CloudFormation utilizando el siguiente comando de AWS CLI:

aws cloudformation create-stack --stack-name my-frontend-stack --template-body file://path/to/your/cloudformation.yaml

Reemplace my-frontend-stack con el nombre deseado para su pila de CloudFormation, y path/to/your/cloudformation.yaml con la ruta real a su archivo YAML de CloudFormation.

Después de ejecutar este comando, AWS creará los recursos necesarios para su proyecto SPA de frontend, incluido el bucket de S3 y la distribución de CloudFront.

Configuración del repositorio de GitHub

El siguiente paso implica configurar su repositorio de GitHub para que refleje los cambios de su proyecto y los despliegue automáticamente en AWS. Esto se puede lograr mediante el uso de servicios como AWS CodePipeline o AWS CodeDeploy. A continuación se muestra un ejemplo de cómo se puede configurar un flujo de trabajo básico utilizando AWS CodePipeline:

1. Cree un nuevo flujo de trabajo en AWS CodePipeline y configure

la fuente como su repositorio de GitHub.

1. Especifique las acciones de compilación y despliegue, donde la acción de compilación se encargará de compilar su proyecto SPA y la acción de despliegue desplegará los archivos resultantes en el bucket de S3 o actualizará la distribución de CloudFront según sea necesario.
2. Configure los gatillos adecuados para que el flujo de trabajo se active automáticamente cuando se realicen cambios en su repositorio de GitHub.

Conclusiones

En este artículo, hemos explorado el proceso detallado para implementar un proyecto SPA de frontend utilizando Angular, React y Vue.js con TypeScript en AWS. Hemos cubierto el despliegue de la aplicación desde un repositorio GitHub mediante la configuración de CloudFront, SSL y el bucket de S3. Hemos proporcionado ejemplos de archivos YAML de CloudFormation para cada escenario y hemos discutido la configuración básica del repositorio de GitHub para lograr un despliegue automático en AWS. Ahora, con esta guía, está listo para llevar su proyecto SPA al siguiente nivel mediante el uso de AWS y aprovechando la escalabilidad y confiabilidad de sus servicios en la nube.