Home - netfoor/AmplifyWorkshop-RetailStore GitHub Wiki
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
# Configuración inicial
git config --global user.name "Tu Nombre"
git config --global user.email "[email protected]"
npm install -g aws-cdkgraph TD
A[Temp Bucket] --> B[Lambda]
B --> C[Prod Bucket]
C --> D[CloudFront]
D --> E[Usuarios]
-
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
- Bucket S3 permanente (
export AWS_ACCOUNTID=123456789012
export AWS_REGION=us-east-1
cdk bootstrap aws://$AWS_ACCOUNTID/$AWS_REGIONnpm create amplify@latest -yEstructura generada:
amplify/
├── auth/
│ └── resource.ts # Config de Cognito
├── data/
│ └── resource.ts # Modelos de datos
backend.ts # Punto de entrada
npx ampx configure profile
npx ampx sandbox// 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'])])
});npx ampx generate forms --models Product,Category
npx ampx generate graphql-client-code📂 Archivos generados:
-
src/ui-components/(Formularios base) -
src/graphql/(Queries/Mutations)
// amplify/auth/resource.ts
export const auth = defineAuth({
loginWith: { email: true },
groups: ['Admin', 'Editor']
});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// src/lib/amplifyClient.ts
import { Amplify } from 'aws-amplify';
import config from '../../amplify_outputs.json';
Amplify.configure(config);# 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" }
}}
/>
);
}// app/api/products/route.ts
export async function GET() {
const { data } = await client.models.Product.list();
return NextResponse.json(data);
}// utils/server-utils.ts
import { cookies } from 'next/headers';
export const getAuthClient = () => {
const cookieStore = cookies();
return generateClient<Schema>({
authToken: cookieStore.get('authToken')?.value
});
}- Ir a Amplify Hosting
- Conectar repositorio (GitHub/GitLab)
- Configurar variables de entorno:
NEXT_PUBLIC_API_URL=https://yourapp.cloudfront.net
graph LR
A[Git Push] --> B[Amplify Build]
B --> C[Despliegue CloudFront]
C --> D[Live URL]
-
Separación clara:
- Frontend:
src/components/ - Lógica de negocio:
src/lib/ - API Routes:
app/api/
- Frontend:
-
Seguridad:
- Nunca exponer credenciales en el cliente
- Usar grupos de Cognito para RBAC
-
Mantenimiento:
- Documentar esquemas con comentarios JSDoc
- Versionar cambios en
amplify/data/resource.ts
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! 💬