Implemente Next.js en AWS Amplify: una guía paso a paso

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

Implemente Next.js en AWS Amplify: una guía paso a paso

Rishi Raj Jain
Deploy Next.js to AWS Amplify

En esta guía, aprenderá cómo implementar un proyecto Nextjs SSR en AWS Amplify. Pasará por el proceso de configuración de un nuevo proyecto Nextjs, habilitará la representación del lado del servidor mediante el adaptador AWS Amplify y, finalmente, lo implementará en AWS Amplify.

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Requisitos previos

Necesitará lo siguiente:

Crea una nueva aplicación Nextjs

Comencemos creando un nuevo proyecto Nextjs. Abra su terminal y ejecute el siguiente comando:

Terminal window
npx create-next-app@latest my-app

Cuando se le solicite, elija:

  • cuando se le solicite usar TypeScript
  • No cuando se le solicita usar ESLint
  • cuando se le solicite usar Tailwind CSS
  • No cuando se le solicita usar el directorio src/
  • cuando se le solicite usar App Router
  • No cuando se le solicite personalizar el alias de importación predeterminado (@/*)

Una vez hecho esto, vaya al directorio del proyecto e inicie la aplicación en modo de desarrollo ejecutando el siguiente comando:

Terminal window
cd my-app
npm run dev

La aplicación debería ejecutarse en localhost:3000

Luego, deberá realizar el siguiente cambio en su archivo nextconfigjs. Abra el archivo y agregue el siguiente código:

module.exports = {
output: 'standalone', // [!code ++]
}

Luego, cree un archivo amplifymjs en la raíz del repositorio con el siguiente código:

amplify.mjs
import { join } from 'node:path';
import { writeFileSync, mkdirSync, existsSync, cpSync, rmSync } from 'node:fs';
// Define all the Amplify related directories
const amplifyDirectories = [
join(process.cwd(), '.amplify-hosting'),
join(process.cwd(), '.amplify-hosting', 'static'),
join(process.cwd(), '.amplify-hosting', 'static', '_next'),
join(process.cwd(), '.amplify-hosting', 'compute'),
join(process.cwd(), '.amplify-hosting', 'compute', 'default'),
join(process.cwd(), '.amplify-hosting', 'compute', 'default', 'node_modules'),
]
// Create directories if they do no exist already
if (existsSync(amplifyDirectories[0])) rmSync(amplifyDirectories[0], { force: true, recursive: true })
// Create directories if they do no exist already
amplifyDirectories.forEach((i => mkdirSync(i)))
// A general default configuration to fallback to compute if no matching static assets found
const deployManifestConfig = {
version: 1,
routes: [
{
path: `/assets/*`,
target: {
kind: "Static",
},
},
{
path: `/*.*`,
target: {
kind: "Static",
},
fallback: {
kind: "Compute",
src: "default",
},
},
{
path: "/*",
target: {
kind: "Compute",
src: "default",
},
},
],
computeResources: [
{
name: "default",
entrypoint: "server.js",
runtime: "nodejs18.x",
},
],
framework: {
name: "next",
version: "13.5.6",
},
};
// Write the config to .amplify-hosting/deploy-manifest.json
writeFileSync(
join(process.cwd(), ".amplify-hosting", "deploy-manifest.json"),
JSON.stringify(deployManifestConfig),
);
// Copy the static assets generated in .next/static and public to .amplify-hosting/static directory
cpSync(join(process.cwd(), 'public'), amplifyDirectories[1], { recursive: true })
cpSync(join(process.cwd(), '.next', 'static'), amplifyDirectories[2], { recursive: true })
// Copy the static assets generated in .next/standalone to .amplify-hosting/compute directory
cpSync(join(process.cwd(), '.next', 'standalone'), amplifyDirectories[4], { recursive: true })
// Remove .next/static and public from .amplify-hosting/compute/default
rmSync(join(amplifyDirectories[4], '.next', 'static'), { force: true, recursive: true })
rmSync(join(amplifyDirectories[4], 'public'), { force: true, recursive: true })

Luego, cree un archivo amplifyyml en la raíz del repositorio con el siguiente código:

version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- env >> .env
- npm run build
- node amplify.mjs
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*

El código anterior hace lo siguiente:

  • Utiliza comandos preBuild para instalar las dependencias de su proyecto Nextjs
  • Utiliza comandos build para:
    • Almacene todas las variables de entorno en el archivo env en la raíz del proyecto
    • Construya su aplicación Nextjs
    • Mueva el directorio node_modules y el archivo env al directorio de cálculo de Amplify

Implementar en AWS Amplify

El código ahora está listo para implementarse en AWS Amplify. Utilice los siguientes pasos para implementarlo:

  • Comience creando un repositorio de GitHub que contenga el código de su aplicación.

  • Luego, navegue hasta el panel de AWS Amplify y haga clic en Comenzar en la sección Alojar su aplicación web

Host your web app in AWS Amplify
  • Selecciona GitHub como fuente de tu repositorio Git.
GitHub as code source in AWS Amplify
  • Vincula el nuevo proyecto al repositorio de GitHub que acabas de crear.
Link Repo in AWS Amplify
  • Asigne un nombre a su proyecto y haga clic en Configuración avanzada
Name the project in AWS Amplify
  • En Configuración avanzada, actualice las Variables de entorno para que coincidan con las de su archivo env local y PORT como 3000. Haga clic en Siguiente para continuar.
Add Environment Variables in AWS Amplify
  • Haga clic en Guardar e implementar para implementar su sitio web.
Deploy to AWS Amplify
  • Obtenga la URL de implementación bajo el título Dominio en la información de compilación exitosa.
Grab Deployment URL in AWS Amplify

Conclusión

¡Hurra! Ahora tiene un proyecto Nextjs que se implementa automáticamente en AWS Amplify tras la inserción de Git.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en Twitter

Learn More Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024 October 30, 2024
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones October 26, 2024