No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Despliegue de Aplicaciones Frontend con Angular y AWS S3

17/21
Recursos

¿Cómo desplegar un Frontend usando AWS?

El despliegue de una aplicación Frontend puede parecer intimidante, pero con las herramientas adecuadas, este proceso se simplifica considerablemente. En esta guía, te mostraremos cómo usar varios servicios de AWS para automatizar el despliegue de tu proyecto Frontend, específicamente uno desarrollado en Angular. Los servicios clave este proceso son AWS CodePipeline, CodeBuild y S3, junto con Bitbucket como sistema de control de versiones.

¿Qué herramientas necesitas?

Para lograr un despliegue exitoso de una aplicación Frontend, es necesario asegurar que cuentas con ciertos permisos y configuraciones básicas. Aquí te describimos brevemente los elementos esenciales:

  • CodePipeline y CodeBuild: Ya deberías tener los permisos necesarios configurados en tu cuenta.
  • Bitbucket: Servirá como repositorio de origen del código.
  • S3: Servirá como alojamiento para los archivos de tu aplicación Angular.
  • ARNs de Roles: Necesitas los ARNs específicos de los roles de CodePipeline y CodeBuild ya existentes.

¿Cuál es el flujo de trabajo?

  1. Conexión de repositorio: Comienza obteniendo el código fuente desde Bitbucket.
  2. Construcción y empaquetado: Usa CodeBuild para ejecutar el comando npm run build, que compilará el código de Angular.
  3. Despliegue: Finalmente, los archivos resultantes serán subidos al bucket S3 de AWS para ser servidos como página web estática.

¿Qué configuraciones específicas necesita S3?

AWS S3 no solo se utiliza como un simple almacenamiento; en este caso, se configurará para actuar como un servidor web. Aquí se destacan dos configuraciones importantes:

  • Permisos públicos: Debes asegurarte de que los archivos sean accesibles públicamente para que puedan ser visualizados en un navegador.
  • Política de servidor web: Configura la política para que los archivos sean servidos de manera adecuada desde el bucket S3.

¿Cómo funcionan CodePipeline y CodeBuild?

La configuración de CodePipeline involucra varios pasos, entre los cuales destacan:

  • CodeStartSourceConnection: Si estás utilizando repositorios de Bitbucket, necesitarás una conexión preconfigurada con ARN.
  • Comandos de construcción: A través de BitBuildspec, se deberán instalar las dependencias de Angular y otras herramientas necesarias mediante comandos dentro del archivo buildspec.yml.
version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 12
    commands:
      - npm install -g @angular/cli
  build:
    commands:
      - npm install
      - npm run build

¿Cómo configurar el pipeline y dónde usar Terraform?

Terraform es clave en la creación y manejo de recursos en tu cuenta de AWS de forma automatizada. Aquí usarás Terraform para reusar configuraciones existentes como roles y políticas, al crear o modificar un CodePipeline. Su configuración incluirá:

  • La fuente (en tu caso, Bitbucket).
  • Construcciones y permisos necesarios.
  • Configuración para almacenar los resultados en S3.

Uso de Terraform dentro del CodePipeline

Toda la configuración del endpoint de despliegue y los permisos de conexión se gestionan reutilizando roles y recursos ya creados con Terraform. Dicho de otra manera, Terraform actúa como el "orquestador" de todo el proceso de infraestructura para asegurar que tu aplicación se despliegue correctamente cada vez que se realicen cambios en el código o configuraciones.

El despliegue es un proceso dinámico y adaptable que requiere una interacción constante con los desarrolladores y el equipo de TI para asegurarse de que los comandos y configuraciones sean correctos. Con práctica y comunicación, este proceso se convertirá en una segunda naturaleza, permitiéndote centrarte en lo que realmente importa: ofrecer un producto de calidad.

Aportes 28

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Si me asusto XD

El curso esta excelente pero seria interesante un par de video intermedio donde explicar un poco de terraform y AWS de manera introductoria al portal para poder saltar a los comandos y llevar le ritmo, pero si se entiende que es demostrativo

buenisimas las clases, entiendo que es solamente para ver como se puede usar, obviamente necesitamos estudiar terraform y aws, pero nos dá la pauta que el codigo es bastante facil y se ve muy poderoso. 10 de 10 el profe

Tiene poco provecho el llevar clases tan practicas cuando no se ha instalado ni manejado anteriormente plataformas como terraform o AWS mismamente, añadan mas requerimientos recomendados para el curso o empiecen mas lento. : P

Un curso introductorio debería ser menos extenso en cuanto a practica y uso de herramientas. algo mas teorico y grafico. Al final un poco de practica pero basica.

Asustada, pero vamos para delante,

La verdad he seguido los videos de Gersom Miranda porque detalla algunos pasos que no son tan claros con la demostración del curso. Los que estamos empezando desde cero, debemos detenernos a investigar un poco por nuestra cuenta, no digo que esté mal, igual hace parte del aprendizaje, pero creo que no se logra avanzar al ritmo esperado hasta resolver conceptos o errores que surgen en algunas ejecuciones.

Empiez con que, espero que la primera clase no te haya asustado: si me asusto, solo m e quede viendo

Es la primera vez que ya terminando un curso lo voy a dejar. Sigo con las ganas de aprender de DevOps, sin embargo, con todo el tiempo que he invertido en tratar de solucionar un montón de errores debidos a la cantidad de pasos que se saltaron, prefiero buscar otra alternativa para continuar con mi aprendizaje. Nunca me había pasado esto con un curso de Platzi, espero revisen esta situación.
Estas clases quedan un por fuera de contexto, se debió dar una adecuada intro...
No me ha asustado, simplemente no he entendido nada de nada
Asustar? Casi abandono la ruta de aprendizaje! Jaja
ya tenia todo, solo me faltaba la key que genera aws, me asuste jajaja
A mi me fallaba el Stage "Deploy" , despues de probar varios metodos inclusive habilitando manuelmente el acceso al bucket esta fue mi solución espero que sea de su ayuda ```c# resource "aws_s3_bucket" "frontend_artifacts" { bucket = var.S3FrontEnd #acl = "public-read" policy = data.aws_iam_policy_document.website_policy.json website { index_document = "index.html" error_document = "index.html" } } data "aws_iam_policy_document" "website_policy" { /*statement { actions = [ "s3:GetObject", "s3:PutBucketPolicy", "s3:ListBucket" ] principals { identifiers = ["*"] type = "AWS" } resources = [ "arn:aws:s3:::${var.S3FrontEnd}/*", "arn:aws:s3:::${var.S3FrontEnd}" ] }*/ statement { actions = [ "s3:*" ] principals { identifiers = ["arn:aws:iam::986609187232:user/platziuser"] #Arn de tu user que esta conectado al CLI de AWS con terraform type = "AWS" } resources = [ "arn:aws:s3:::${var.S3FrontEnd}/*", "arn:aws:s3:::${var.S3FrontEnd}" ] } } ```

Para no asustarse tanto, descargue el proyecto del video anterior y siga la explicación de Jaivic, al menos para familiarizarse con la sintaxis, también puede descargar la extensión de VS code HashiCorp Terraform para que se vean mejor

Si fue como una bomba de conocimientos que no tengo aun con las herramientas que se utilizaron en la clase anterior, pero como he utilizado jenkins, se asemejaron los conceptos y la forma como se trabaja.

La clave desde mi punto de vista es saber manejarse a través de los directorios que conforma el proyecto y como lo mencionaba los comandos.

Se entiende la idea de ser dinámicos y proactivos, pero debería de explicar más en profundidad los pipelines que está implementando.
Me salte la clase anterior la verdad no entendi nada ni de que trataba cada archivo ni como los hicieron, tienen que revisar este curso y subir el video anterior a ese que desaparecio
ARN: Amazon Resource Name. Es el identificador de un recurso en una cuenta de AWS.
Angular no tiene NPM. Angular usa NPM (Node Package Manager) como casi cualquier framework de JavaScript/Node.
Que no los comandos de desarrollo, no los encuentras en package.json
jajaja no le tengan miedo al codigo gente
16:20 aclarar NPM(node package manager) no es solo de AngularJS(Framework) como tal es de todo Javascript y es un manejador de paquetes de instancias. Para los que vienen de Pyhton seria PIP su equivalente

El archivo 2frontend-pipeline ya no les va a funcionar si lo usan tal cual como esta desde el git, esto porque AWS hace poco actualizo la creación de los buckets, para que ahora tengan de forma predeterminada habilitado el S3 Block Public Access y el ACLs deshabilitado.

Les comparto el link que me ayudo a resolver el problema: https://stackoverflow.com/questions/76419099/access-denied-when-creating-s3-bucket-acl-s3-policy-using-terraform

Deberían considerar actualizar el curso.
Saludos!!

yo lo pondria de esta forma para distinguir el produccion al de test.
ng run app:build
ng run app:build:production

Muy bueno pense que era obligatorio en el mismo repo poner todo pero no, como separar el Cloud, del front y del back.

Muy interesante sobretodo la parte de connection

Deben considerar como crear una cuenta AWS