Nextjs y AWS Amplify (Gen 2)

¿Qué es AWS Amplify?

AWS Amplify es un conjunto de herramientas y servicios creados por Amazon Web Services (AWS) que permite a los desarrolladores crear aplicaciones web y móviles de manera rápida y sencilla. Amplify proporciona una manera sencilla de configurar, construir e implementar aplicaciones, integrando servicios de backend como autenticación, almacenamiento, bases de datos, y APIs, sin necesidad de tener un profundo conocimiento de AWS.

Características Principales de AWS Amplify

1. Autenticación: Permite agregar funcionalidades de inicio de sesión, registro de usuarios, y manejo de contraseñas, entre otros, utilizando servicios como Amazon Cognito.
2. API (GraphQL y REST): Facilita la configuración de APIs mediante AWS AppSync para GraphQL o Amazon API Gateway para REST.
3. Almacenamiento: Proporciona almacenamiento de archivos y datos a través de Amazon S3 y DynamoDB.
4. Hosting y Despliegue: Permite el despliegue continuo de aplicaciones web con una configuración sencilla y soporte para CI/CD (Integración y Entrega Continua).
5. Notificaciones Push: Facilita el envío de notificaciones push a dispositivos móviles utilizando Amazon Pinpoint.
6. Analíticas: Permite la integración de analíticas en tiempo real con servicios como Amazon Kinesis y Amazon Pinpoint.

Ventajas de Usar AWS Amplify

• Facilidad de uso: Su interfaz amigable y sus CLI (Command Line Interface) permiten a los desarrolladores configurar y gestionar servicios de AWS sin complicaciones.
• Escalabilidad: Los servicios backend de AWS están diseñados para escalar automáticamente con el crecimiento de la aplicación.
• Seguridad: Integración nativa con los servicios de seguridad de AWS, proporcionando autenticación robusta y gestión de identidades.
• Integración continua: Compatibilidad con herramientas de CI/CD que facilitan el despliegue y actualización continua de aplicaciones.

AWS Amplify es una excelente opción para desarrolladores que desean construir aplicaciones robustas y escalables sin tener que gestionar la infraestructura subyacente. Su integración profunda con los servicios de AWS proporciona una

Configuración del CLI de AWS Amplify

Para comenzar a usar AWS Amplify, primero necesitas instalar y configurar la CLI de Amplify. te mostraré cómo hacerlo:

Instalación de la CLI de AWS Amplify

Primero, instala la CLI de AWS Amplify globalmente en tu sistema usando npm. Abre una terminal y ejecuta el siguiente comando:

npm i -g @aws-amplify/cli

Configuración de la CLI de AWS Amplify

Una vez instalada la CLI, debes configurarla para que se conecte con tu cuenta de AWS. Para hacerlo, ejecuta el siguiente comando en la terminal:

amplify configure

Este comando lo puedes ejecutar desde cualquier lugar ubicado en tu consola

Este comando abrirá la consola del administrador de AWS en tu navegador web. Sigue estos pasos:

1. Inicia sesión en tu cuenta de AWS: Si aún no tienes una cuenta de AWS, crea una antes de continuar.
2. Ve a la consola o terminal y Selecciona la región: Elige la región en la que deseas crear y gestionar tus recursos de AWS. Es recomendable elegir una región cercana a ti o a tus usuarios principales para reducir la latencia. Una vez escogido la region te mostrara un enlace o abrira un enlace con la documentacion de amplify, alli te mostrara los comandos que ya has ejecutado, pero con el que debes continuar es con el paso de crear un usuario de IAM.
3. Crea un usuario IAM: Sigue las instrucciones para crear un nuevo usuario IAM con los permisos necesarios para usar AWS Amplify. Asegúrate de guardar las credenciales del usuario (Access Key ID y Secret Access Key) en un lugar seguro.

En mi caso voy a crear un usuario llamado amplify-dev, luego escogeremos la opcion Añadir politicas directamente y buscaremos la opcion AdminstiratorAccess-Amplify, Luego le das en siguiente y finalmente en Crear usuario.

Después de completar estos pasos, vuelve a la terminal y sigue las instrucciones para ingresar las credenciales del usuario IAM que acabas de crear. Esto completará la configuración inicial de la CLI de AWS Amplify.

1. Primero escoge tu usuario en IAM, y ve en la pestaña de Security Credentials
2. En la seccion de llaves de acceso, crea una nueva llave de acceso y escoge Command Line interface (CLI), acepta los terminos y dale en crear. Copia estos valores en la terminal y ya estarias listo.

Ahora estás listo para comenzar a usar AWS Amplify en tus proyectos.

Creación desde AWS Amplify

Primero crea un template en tu cuenta de Github: https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/

Entra en el dashboard de AWS Amplify desde alli da click en en Github conecta tu github

Luego escoge el repositorio que acabas de crear con Amplify y simplemente dale siguiente hasta que lo crees

Esto creara un proyecto, debemos espera a que lo cree, una vez generado ya podemos ver la URL de producción

Clonalo luego

git clone
npm i

crea una carpeta llamada amplify con recursos, cada uno representa autenticacion con cognito o la base de datos conectada a DynamoDB

una vez creado ya te da una URL donde puedes probar la aplicacion

Configuracion Local

luego ve en la rama main y en Recursos de backend implementados descarga amplify_uotputs.json

npm run dev

añadir autenticacion

npm add @aws-amplify/ui-react

actualiza el codigo:

"use client";

import { useState, useEffect } from "react";
import { generateClient } from "aws-amplify/data";
import type { Schema } from "@/amplify/data/resource";
import "./../app/app.css";
import { Amplify } from "aws-amplify";
import outputs from "@/amplify_outputs.json";
import "@aws-amplify/ui-react/styles.css";
import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";

Amplify.configure(outputs);

const client = generateClient<Schema>();

export default function App() {
  const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);

  function deleteTodo(id: string) {
    client.models.Todo.delete({ id });
  }

  function listTodos() {
    client.models.Todo.observeQuery().subscribe({
      next: (data) => setTodos([...data.items]),
    });
  }

  useEffect(() => {
    listTodos();
  }, []);

  function createTodo() {
    client.models.Todo.create({
      content: window.prompt("Todo content"),
    });
  }

  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>My todos</h1>
          <button onClick={createTodo}>+ new</button>
          <ul>
            {todos.map((todo) => (
              <li onClick={() => deleteTodo(todo.id)} key={todo.id}>
                {todo.content}
              </li>
            ))}
          </ul>
          <div>
            🥳 App successfully hosted. Try creating a new todo.
            <br />
            <a href="https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/">
              Review next steps of this tutorial.
            </a>
          </div>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

Deploy cloud sandbox

npx ampx sandbox

Más Recursos

• Next App Router Setup
• Configuracion de AWS Amplify
• Configuracion de AWS Amplify con Nextj

Creación de proyecto de Nextjs

npx create-next-app -- next-amplified --ts --no-eslint --src-dir --import-alias '@/*' --no-tailwind --app
cd next-amplified

npm run dev

Luego inicalizaremos amplify:

amplify init

Escogemos lo siguiente:

? Enter a name for the project (nextamplified)
The following configuration will be applied:

Project information
| Name: next-amplified
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use: default

Cuando inicializas un nuevo proyecto de Amplify, suceden algunas cosas:

• Se crea un directorio de nivel superior llamado amplify que almacena la definición de tu backend. Durante el tutorial, agregarás capacidades en la nube, como una API GraphQL y alojamiento web. A medida que añades estas características, la carpeta amplify crecerá con plantillas de infraestructura como código que definen tu pila de backend. La infraestructura como código es una práctica recomendada para crear una pila de backend replicable.
• Se crea un archivo llamado amplifyconfiguration.json en el directorio de origen designado que contiene toda la configuración para los servicios que creas con Amplify. De esta manera, la biblioteca cliente de JavaScript de Amplify puede obtener la información necesaria para conectarse a tus servicios de backend.
• Se modifica el archivo .gitignore, agregando algunos archivos generados a la lista de ignorados.

Ademas puedes ir a la consola de AWS y poder ver el proyecto ya creado en el servicio Amplify, ademas crea un entorno de desarrollo dev vacio, el cual en los siguientes pasos llenaremos con datos.

Instalar Bibliotecas de Amplify

El paquete aws-amplify es la biblioteca principal para trabajar con las bibliotecas de Amplify en tus proyectos. El paquete @aws-amplify/adapter-nextjs incluye funciones adicionales específicas de Next.js para usar las bibliotecas de Amplify del lado del servidor.

npm install aws-amplify @aws-amplify/adapter-nextjs

Añadiendo Autenticación

UI Library

• https://ui.docs.amplify.aws/

Limpiar todo lo creado por Amplify

• lamda
• s3 buckets
• roles
• appsync
• dynamodb
• cognito
• clouformation
• IAM: Roles y politicas

adicionalmente usuarios de IAM

Si en caso has eliminado el Rol puedes volver a crearlo con el mismo nombre y otorgarle permios de adminsitrador para cloudformation