Desplegando Aplicaciones Frontend en AWS App Runner: Desde el Build hasta el Escalamiento

Si estás trabajando en proyectos frontend modernos, probablemente ya te hayas enfrentado al desafío de desplegar y escalar aplicaciones sin necesidad de gestionar infraestructura compleja. AWS App Runner llega para simplificar el proceso de despliegue continuo de aplicaciones web. En este artículo, vamos a ver cómo desplegar una aplicación frontend utilizando AWS App Runner desde el build hasta el escalamiento automático. ¿Por qué usar AWS App Runner para Frontend? AWS App Runner es un servicio completamente gestionado que permite implementar aplicaciones directamente desde un repositorio de código fuente o una imagen de contenedor. Lo mejor es que elimina la necesidad de preocuparse por la infraestructura subyacente, lo que lo convierte en una excelente opción para proyectos frontend. Beneficios de usar AWS App Runner para frontend: Despliegue continuo integrado desde GitHub o AWS ECR. Escalamiento automático según la demanda. Certificados HTTPS automáticos y balanceo de carga. Integración nativa con servicios de AWS. Arquitectura del Proyecto Vamos a desplegar una aplicación React como ejemplo, pero los conceptos se aplican a cualquier aplicación frontend que puedas contenerizar. Utilizaremos los siguientes componentes: Docker para crear la imagen del frontend. AWS ECR para almacenar la imagen del contenedor. AWS App Runner para el despliegue. Paso 1: Crear el Proyecto React Comencemos creando una aplicación React de ejemplo. npx create-react-app my-app-runner cd my-app-runner Vamos a construir la aplicación para producción: npm run build Esto generará una carpeta build/ con el contenido optimizado para despliegue. Paso 2: Crear el Dockerfile Ahora vamos a contenerizar nuestra aplicación utilizando un Dockerfile. Dockerfile # Etapa de construcción FROM node:20-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # Etapa de producción FROM nginx:stable-alpine COPY --from=builder /app/build /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] Este Dockerfile utiliza dos etapas: Builder: Construye la aplicación utilizando Node.js. Producción: Utiliza un contenedor Nginx para servir los archivos estáticos. Paso 3: Crear el Repositorio en AWS ECR Primero, inicia sesión en AWS CLI: aws configure Crea un repositorio en AWS ECR: aws ecr create-repository --repository-name my-app-runner Obtén el URI del repositorio: echo $(aws ecr describe-repositories --repository-name my-app-runner --query 'repositories[0].repositoryUri' --output text) Paso 4: Construir y Subir la Imagen Autentícate en ECR: aws ecr get-login-password | docker login --username AWS --password-stdin .dkr.ecr..amazonaws.com Construye la imagen: docker build -t my-app-runner . Etiqueta la imagen: docker tag my-app-runner:latest .dkr.ecr..amazonaws.com/my-app-runner:latest Sube la imagen al repositorio ECR: docker push .dkr.ecr..amazonaws.com/my-app-runner:latest Paso 5: Crear el Servicio en AWS App Runner Usaremos AWS CLI para crear el servicio. Crear el Servicio aws apprunner create-service \ --service-name my-app-runner \ --source-configuration ImageRepository={ImageIdentifier=.dkr.ecr..amazonaws.com/my-app-runner:latest,ImageRepositoryType=ECR} \ --auto-deployments-enabled Verificar el Servicio Después de un par de minutos, el servicio estará desplegado. Puedes verificar el estado del servicio con: aws apprunner describe-service --service-arn Paso 6: Configurar el Escalamiento Automático AWS App Runner escala automáticamente según el tráfico, pero podemos ajustar los parámetros si es necesario. Actualizar el Servicio aws apprunner update-service \ --service-arn \ --auto-scaling-configuration-name default \ --min-capacity 1 \ --max-capacity 10 Paso 7: Pruebas de Despliegue Para verificar el despliegue, visita la URL proporcionada por App Runner. Realiza pruebas para asegurarte de que todo esté funcionando correctamente. Consideraciones Finales AWS App Runner hace que el despliegue de aplicaciones frontend sea eficiente y escalable sin necesidad de administrar servidores o infraestructura compleja. Su integración con ECR garantiza que siempre puedas desplegar la última versión de tu aplicación con solo actualizar la imagen. Si tienes dudas o problemas durante el despliegue, ¡déjamelo saber en los comentarios!

Mar 27, 2025 - 20:25

Desplegando Aplicaciones Frontend en AWS App Runner: Desde el Build hasta el Escalamiento

Si estás trabajando en proyectos frontend modernos, probablemente ya te hayas enfrentado al desafío de desplegar y escalar aplicaciones sin necesidad de gestionar infraestructura compleja. AWS App Runner llega para simplificar el proceso de despliegue continuo de aplicaciones web. En este artículo, vamos a ver cómo desplegar una aplicación frontend utilizando AWS App Runner desde el build hasta el escalamiento automático.

¿Por qué usar AWS App Runner para Frontend?

AWS App Runner es un servicio completamente gestionado que permite implementar aplicaciones directamente desde un repositorio de código fuente o una imagen de contenedor. Lo mejor es que elimina la necesidad de preocuparse por la infraestructura subyacente, lo que lo convierte en una excelente opción para proyectos frontend.

Beneficios de usar AWS App Runner para frontend:

Despliegue continuo integrado desde GitHub o AWS ECR.
Escalamiento automático según la demanda.
Certificados HTTPS automáticos y balanceo de carga.
Integración nativa con servicios de AWS.

Arquitectura del Proyecto

Vamos a desplegar una aplicación React como ejemplo, pero los conceptos se aplican a cualquier aplicación frontend que puedas contenerizar. Utilizaremos los siguientes componentes:

Docker para crear la imagen del frontend.
AWS ECR para almacenar la imagen del contenedor.
AWS App Runner para el despliegue.

Paso 1: Crear el Proyecto React

Comencemos creando una aplicación React de ejemplo.

npx create-react-app my-app-runner
cd my-app-runner

Vamos a construir la aplicación para producción:

npm run build

Esto generará una carpeta build/ con el contenido optimizado para despliegue.

Paso 2: Crear el Dockerfile

Ahora vamos a contenerizar nuestra aplicación utilizando un Dockerfile.

Dockerfile

# Etapa de construcción
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Etapa de producción
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Este Dockerfile utiliza dos etapas:

Builder: Construye la aplicación utilizando Node.js.
Producción: Utiliza un contenedor Nginx para servir los archivos estáticos.

Paso 3: Crear el Repositorio en AWS ECR

Primero, inicia sesión en AWS CLI:

aws configure

Crea un repositorio en AWS ECR:

aws ecr create-repository --repository-name my-app-runner

Obtén el URI del repositorio:

echo $(aws ecr describe-repositories --repository-name my-app-runner --query 'repositories[0].repositoryUri' --output text)

Paso 4: Construir y Subir la Imagen

Autentícate en ECR:

aws ecr get-login-password | docker login --username AWS --password-stdin .dkr.ecr..amazonaws.com

Construye la imagen:

docker build -t my-app-runner .

Etiqueta la imagen:

docker tag my-app-runner:latest .dkr.ecr..amazonaws.com/my-app-runner:latest

Sube la imagen al repositorio ECR:

docker push .dkr.ecr..amazonaws.com/my-app-runner:latest

Paso 5: Crear el Servicio en AWS App Runner

Usaremos AWS CLI para crear el servicio.

Crear el Servicio

aws apprunner create-service \
  --service-name my-app-runner \
  --source-configuration ImageRepository={ImageIdentifier=.dkr.ecr..amazonaws.com/my-app-runner:latest,ImageRepositoryType=ECR} \
  --auto-deployments-enabled

Verificar el Servicio

Después de un par de minutos, el servicio estará desplegado. Puedes verificar el estado del servicio con:

aws apprunner describe-service --service-arn

Paso 6: Configurar el Escalamiento Automático

AWS App Runner escala automáticamente según el tráfico, pero podemos ajustar los parámetros si es necesario.

Actualizar el Servicio

aws apprunner update-service \
  --service-arn  \
  --auto-scaling-configuration-name default \
  --min-capacity 1 \
  --max-capacity 10

Paso 7: Pruebas de Despliegue

Para verificar el despliegue, visita la URL proporcionada por App Runner. Realiza pruebas para asegurarte de que todo esté funcionando correctamente.

Consideraciones Finales

AWS App Runner hace que el despliegue de aplicaciones frontend sea eficiente y escalable sin necesidad de administrar servidores o infraestructura compleja. Su integración con ECR garantiza que siempre puedas desplegar la última versión de tu aplicación con solo actualizar la imagen.

Si tienes dudas o problemas durante el despliegue, ¡déjamelo saber en los comentarios!