App de gastos hormiga en el AWS Free Tier Workshop paso a paso

Módulo 2: Tu página en Amplify

Tiempo estimado: 12 min

Lo que vas a construir

Una página publicada por HTTPS desde tu fork de GitHub, con Amplify Hosting. Los archivos ya están en web/, y cada push a main dispara un deploy nuevo.

La API todavía no existe, así que la página va a avisar que falta conectarla. Es lo esperado: la conectas en el módulo 5.

Módulo 2: GitHub dispara Amplify Hosting y publica tu página

Empezamos por aquí porque GitHub y Amplify son lo que más tarda en configurarse.

¿Por qué usamos Amplify Hosting?

Amplify Hosting conecta tu repositorio con una URL HTTPS y publica los cambios cuando haces push. CDK se encarga de la API, Lambda y DynamoDB, y Amplify solo del frontend.

Pídele a Kiro la tarea 1

Abre .kiro/specs/gastos-hormiga/tasks.md. Cada tarea dice qué archivos tocar, cuáles no y qué revisar al final, así que no le tienes que explicar nada a Kiro en el chat.

La tarea 1 crea amplify.yml en la raíz del repo, para que Amplify publique la carpeta web/.

¿Qué es una spec?

Es la forma en que Kiro planea un cambio grande: requisitos, diseño y tareas. Normalmente la genera Kiro contigo, aquí ya viene escrita para ahorrar tiempo.

Te toca: pídele a Kiro la tarea 1

En tasks.md, da clic en Start task arriba de la tarea 1. Start task

Si no ves el botón, escríbelo en el chat de Kiro:

Haz la tarea 1 de .kiro/specs/gastos-hormiga/tasks.md

🤖 Cuando el código lo escribe una IA, tu trabajo es revisarlo.

Revisa lo que escribió

1. ¿Solo creó amplify.yml? La tarea no toca infra/gastos-stack.ts, la API ni las Lambdas. Si Kiro cambió alguno, pídele que revierta todo menos amplify.yml.

2. ¿Amplify va a publicar web/? En amplify.yml, la carpeta de artefactos tiene que ser web.

Sube amplify.yml a GitHub

Amplify va a leer el archivo en su primer deploy, así que primero lo guardamos en main.

Te toca: guarda el archivo y súbelo a GitHub

  1. Revisa que veas ?? amplify.yml:

    git status --short

  2. Agrega solo ese archivo, sin git add .:

    git add amplify.yml

  3. Guarda el commit:

    git commit -m "Prepara Amplify Hosting"

  4. Súbelo a main de tu fork:

    git push origin main
git push me abrió una ventana o me pidió iniciar sesión

Es normal la primera vez. Inicia sesión con la cuenta de GitHub donde hiciste el fork y acepta la autorización. El push sigue solo.

git commit dice "Please tell me who you are"

Falta tu nombre y correo en Git. Sigue el paso 2 de Git y GitHub por primera vez y repite el commit.

Conecta GitHub con Amplify

Te toca: crea la app de Amplify Hosting

  1. Abre la consola de Amplify y elige deploy an app.
  2. Elige GitHub y autoriza a AWS a ver tus repositorios. abrir amplify
  3. Selecciona tu fork de workshop-new-experience-aws y la rama main. seleccionar repo autorizar github Nota: puedes darle acceso a todos tus repositorios o solo a algunos. Te recomiendo solo a los que necesites. autorizar github 2
  4. Revisa que la configuración de build use amplify.yml. guardar y desplegar
  5. Guarda y espera a que el primer deploy termine en verde.

Amplify te da una URL terminada en amplifyapp.com. Cópiala: la usas en el checkpoint y otra vez en el módulo 5.

Ábrela. La página dice que ya está publicada pero todavía no apunta a una API. En las herramientas del navegador vas a ver un 404 de config.js: es normal, ese archivo lo creas en el módulo 5.

Tu página es pública

Cualquiera que tenga la URL de Amplify puede abrirla, y cuando conectes la API en el módulo 5 también podrá ver los gastos. Por eso arriba hay un banner que avisa que es una página de pruebas y que no registres datos reales.

Checkpoint ✅

Te toca: corre el checkpoint con la URL de Amplify

npm run verify 2 https://main.<tu-app-id>.amplifyapp.com

Revisa que amplify.yml publique web/ y que tu página responda por HTTPS.

El checkpoint falla porque la página responde 404

Abre Amplify y revisa el último build. Si falló, corrige el archivo que marque, haz commit y push. Si sigue corriendo, espera a que termine.

Dice que no encuentra amplify.yml

Kiro todavía no hizo la tarea 1, o lo creó en otra carpeta. El archivo va en la raíz del repo, junto a package.json.

Para saber más

¿Cómo hago que la página no sea pública?

Para que solo tú veas tus gastos, el GET tiene que saber quién eres. Eso es login, y es el paso extra de Cognito.

Si te sobra tiempo

Cambia el color del banner en web/estilos.css, haz commit y push, y mira cómo Amplify publica el cambio.

Si te atoraste

Pega en Kiro el error de la terminal o del build de Amplify y pídele que lo explique sin cambiar nada (más en errores comunes). Si no te ayuda, levanta la mano y enseña el último build de Amplify: sus logs dicen si el problema está en la conexión con GitHub o en amplify.yml.

Si solo te falta el archivo de Kiro, tráelo de la rama de solución y súbelo:

git restore --source origin/modulo-2 -- amplify.yml