Home - netfoor/AmplifyWorkshop-RetailStore GitHub Wiki

🚀 Amplify Gen 2: Guía Completa de Implementación

🌟 Introducción

Este documento detalla el proceso paso a paso para construir una aplicación full-stack con AWS Amplify Gen 2, integrando:

  • Autenticación con Cognito
  • Base de datos con DynamoDB
  • Frontend con Next.js
  • CI/CD automatizado

🛠 Pre-requisitos

# Configuración inicial
git config --global user.name "Tu Nombre"
git config --global user.email "[email protected]"
npm install -g aws-cdk

🔧 1. Configuración Inicial de Infraestructura

1.1 Assets Estáticos (S3 + CloudFront)

graph TD
    A[Temp Bucket] --> B[Lambda]
    B --> C[Prod Bucket]
    C --> D[CloudFront]
    D --> E[Usuarios]
Loading
  • Archivo CloudFormation: own-account-static-assets.yaml
  • Componentes creados:
    • Bucket S3 permanente (retailstore-assets-prod)
    • Distribución CloudFront con HTTPS
    • Lambda para procesamiento de imágenes

1.2 Bootstrapping CDK

export AWS_ACCOUNTID=123456789012
export AWS_REGION=us-east-1
cdk bootstrap aws://$AWS_ACCOUNTID/$AWS_REGION

🖥 2. Configuración del Proyecto Amplify

2.1 Inicialización

npm create amplify@latest -y

Estructura generada:

amplify/
├── auth/
│   └── resource.ts  # Config de Cognito
├── data/
│   └── resource.ts  # Modelos de datos
backend.ts           # Punto de entrada

2.2 Sandbox Local

npx ampx configure profile
npx ampx sandbox

🗄 3. Modelado de Datos

3.1 Definición de Modelos

// amplify/data/resource.ts
const schema = a.schema({
  Product: a.model({
    name: a.string().required(),
    price: a.float(),
    category: a.belongsTo('Category', 'categoryId')
  }).authorization(allow => [allow.groups(['Admin'])])
});

3.2 Generación de Código Frontend

npx ampx generate forms --models Product,Category
npx ampx generate graphql-client-code

📂 Archivos generados:

  • src/ui-components/ (Formularios base)
  • src/graphql/ (Queries/Mutations)

🔐 4. Autenticación y Autorización

4.1 Configuración de Cognito

// amplify/auth/resource.ts
export const auth = defineAuth({
  loginWith: { email: true },
  groups: ['Admin', 'Editor']
});

4.2 Creación de Usuarios (CLI)

USER_POOL_ID=$(jq -r .auth.user_pool_id amplify_outputs.json)
aws cognito-idp admin-create-user --user-pool-id $USER_POOL_ID --username [email protected]
aws cognito-idp admin-add-user-to-group --user-pool-id $USER_POOL_ID --username [email protected] --group-name Admin

🧩 5. Integración Frontend

5.1 Configuración Global

// src/lib/amplifyClient.ts
import { Amplify } from 'aws-amplify';
import config from '../../amplify_outputs.json';
Amplify.configure(config);

5.2 Componentes Personalizados

# Copiar formularios generados para personalización
cp src/ui-components/ProductCreateForm.jsx src/components/
// Ejemplo de componente extendido
'use client';
import { ProductCreateForm } from '@/ui-components';

export default function CustomProductForm() {
  return (
    <ProductCreateForm 
      onSuccess={() => alert('¡Producto creado!')}
      overrides={{
        SubmitButton: { children: "Guardar Producto" }
      }}
    />
  );
}

🔄 6. Server-Side Rendering (SSR)

6.1 Ruta de API (Next.js)

// app/api/products/route.ts
export async function GET() {
  const { data } = await client.models.Product.list();
  return NextResponse.json(data);
}

6.2 Cliente Seguro

// utils/server-utils.ts
import { cookies } from 'next/headers';

export const getAuthClient = () => {
  const cookieStore = cookies();
  return generateClient<Schema>({ 
    authToken: cookieStore.get('authToken')?.value 
  });
}

🚀 7. Despliegue en Producción

7.1 Configuración en AWS Console

  1. Ir a Amplify Hosting
  2. Conectar repositorio (GitHub/GitLab)
  3. Configurar variables de entorno:
    NEXT_PUBLIC_API_URL=https://yourapp.cloudfront.net

7.2 Flujo CI/CD

graph LR
    A[Git Push] --> B[Amplify Build]
    B --> C[Despliegue CloudFront]
    C --> D[Live URL]
Loading

📌 Mejores Prácticas

  1. Separación clara:

    • Frontend: src/components/
    • Lógica de negocio: src/lib/
    • API Routes: app/api/
  2. Seguridad:

    • Nunca exponer credenciales en el cliente
    • Usar grupos de Cognito para RBAC
  3. Mantenimiento:

    • Documentar esquemas con comentarios JSDoc
    • Versionar cambios en amplify/data/resource.ts

🎉 ¡Listo!

Ahora tienes una aplicación full-stack con: ✔ Autenticación escalable
✔ Base de datos NoSQL
✔ Frontend dinámico
✔ Pipeline CI/CD automatizado

Ir al Dashboard de Amplify
📚 Documentación Oficial


### 🔍 ¿Dónde continuar?
- **Personalización avanzada**: Implementa @aws-amplify/ui-react-storage para uploads directos a S3  
- **Monitorización**: Configura Amazon CloudWatch para logs  
- **Testing**: Añade Jest + Testing Library para pruebas E2E  

¿Preguntas? ¡Abre un issue en tu repositorio! 💬
⚠️ **GitHub.com Fallback** ⚠️