Implemente y hospede aplicaciones renderizadas del lado del servidor con Amplify - AWS Amplify

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Implemente y hospede aplicaciones renderizadas del lado del servidor con Amplify

Puede utilizar AWS Amplify para implementar y alojar aplicaciones web que utilicen la representación del lado del servidor (SSR). Actualmente, Amplify admite aplicaciones SSR creadas con el marco Next.js. Cuando implementa su aplicación, Amplify detecta automáticamente SSR; no es necesario realizar ninguna configuración manual en AWS Management Console.

Para obtener más información sobre cómo Amplify admite SSR, revise los siguientes temas.

Qué es la representación en el servidor

Anteriormente, Amplify solo soportaba la implementación y el alojamiento de aplicaciones web estáticas. Estos incluyen aplicaciones creadas con marcos de aplicaciones de una sola página (SPA) como React, y aplicaciones creadas con un generador de sitios estáticos (SSG) como Gatsby. Las aplicaciones web estáticas consisten en una combinación de archivos, como archivos HTML, CSS y JavaScript, que se almacenan en una red de entrega de contenido (CDN). Cuando un explorador cliente realiza una solicitud al sitio web, el servidor devuelve una página al cliente con una respuesta HTTP y el explorador cliente interpreta el contenido y lo muestra al usuario.

Amplify ahora es compatible con aplicaciones web con renderizado del lado del servidor (SSR). Cuando un cliente envía una solicitud a una página SSR, el HTML de la página se crea en el servidor en cada solicitud. SSR permite a un desarrollador personalizar un sitio web por solicitud y por usuario. Además, SSR puede mejorar el rendimiento y la optimización de motores de búsqueda (SEO) para un sitio web.

Compatibilidad con Amplify para Next.js SSR

Actualmente Amplify admite la implementación y el alojamiento para aplicaciones web renderizadas del lado del servidor (SSR) creadas con Next.js solamente. Next.js es un framework React para el desarrollo de SPA con JavaScript.

Los desarrolladores pueden usar Next.js para combinar la generación de sitios estáticos (SSG) y SSR en un solo proyecto. Las páginas SSG se pre-engraban en tiempo de compilación, y las páginas SSR se pre-engraban en el momento de la solicitud. En un proyecto híbrido, los desarrolladores eligen qué tipo de prerendering usar para cada página.

La pre-endering puede mejorar el rendimiento y la optimización del motor de búsqueda. Dado que Next.js preinterpreta todas las páginas del servidor, el contenido HTML de cada página está listo cuando llega al explorador del cliente. Este contenido también puede cargarse más rápido. Los tiempos de carga más rápidos mejoran la experiencia del usuario final con un sitio web e impactan positivamente en la clasificación SEO del sitio. Preendering también mejora el SEO al permitir que los robots de los motores de búsqueda encuentren y rastreen fácilmente el contenido HTML de un sitio web.

Next.js proporciona soporte de análisis integrado para medir varias métricas de rendimiento, como Tiempo al primer byte (TTFB) y Primera pintura de contenido (FCP). Para obtener más información acerca de Next.js, consulteIntroducciónen el sitio web Next.js.

Precios de las aplicaciones SSR Next.js

Al implementar su aplicación SSR Next.js, Amplify crea recursos back-end adicionales en su cuenta de AWS, incluidos:

  • Un bucket de Amazon Simple Storage Service (Amazon S3) que almacena los recursos de los activos estáticos de su aplicación. Para obtener más información sobre los cargos de Amazon S3, consultePrecios de Amazon S3.

  • Distribución de Amazon CloudFront para servir la aplicación. Para obtener más información sobre los cargos de CloudFront, consultePrecios de Amazon CloudFront.

  • AFunción Lambda @EdgePara personalizar el contenido que ofrece CloudFront.

Cuando utiliza Amplify Framework (bibliotecas, CLI, componentes de interfaz de usuario), sólo paga por los servicios subyacentes de AWS que utilice. Para obtener más información acerca de los cargos de implementación y alojamiento de Amplify, consultePrecios de AWS Amplify.

Implementación de una aplicación SSR Next.js con Amplify

Para implementar una aplicación SSR Next.js con Amplify Console, siga el mismo flujo de trabajo para configurar una aplicación estática con implementaciones continuas. Para obtener instrucciones detalladas, consulte Introducción a código existente. Tenga en cuenta que no puede configurar una aplicación SSR en Amplify conImplementaciones manuales.

Configuración del archivo Packe.json

Cuando implementa una aplicación Next.js, Amplify inspecciona el script de compilación de la aplicación en elpackage.jsonpara detectar si la aplicación es SSR o SSG.

A continuación, mostramos un ejemplo del script de compilación para una aplicación SSR Next.js. El script de compilación"next build"indica que la aplicación admite páginas SSG y SSR.

"scripts": { "dev": "next dev", "build": "next build", "start": "next start" },

A continuación, mostramos un ejemplo del script de compilación para una aplicación SSG Next.js. El script de compilación"next build && next export"indica que la aplicación solo admite páginas SSG.

"scripts": { "dev": "next dev", "build": "next build && next export", "start": "next start" },

Configuración de compilación de Amplify

Después de inspeccionar elpackage.jsonpara determinar si está implementando una aplicación SSG o SSR, Amplify comprueba la configuración de compilación de la aplicación. Puede guardar la configuración de compilación en la consola de Amplify o en unamplify.ymlArchivo en la raíz de su repositorio. Para obtener más información, consulte Configuración de los ajustes de compilación.

Si Amplify detecta que está implementando una aplicación SSR Next.js y noamplify.ymlestá presente, genera un buildspec para la aplicación y establecebaseDirectoryDe a.next. Si está implementando una aplicación donde unamplify.ymlestá presente, la configuración de compilación en el archivo anula cualquier configuración de compilación en la consola. Por tanto, debe establecer manualmente labaseDirectoryDe a.nextEn el archivo.

A continuación, mostramos un ejemplo de la configuración de compilación de una aplicación dondebaseDirectorytoma el valor.next. Esto indica que los artefactos de compilación son para una aplicación Next.js que admite páginas SSG y SSR.

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

Si Amplify detecta que está implementando una aplicación SSG, genera una especificación de compilación para la aplicación y establecebaseDirectoryPara salir. Si está implementando una aplicación donde unamplify.ymlestá presente, debe establecer manualmente el archivobaseDirectoryDe aoutEn el archivo.

A continuación, mostramos un ejemplo de la configuración de compilación de una aplicación dondebaseDirectorytoma el valorout. Esto indica que los artefactos de compilación son para una aplicación Next.js que sólo admite páginas SSG.

version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: out files: - '**/*' cache: paths: - node_modules/**/*

Agregar funcionalidad SSR a una aplicación Next.js estática

Puede agregar funcionalidad SSR a una aplicación Next.js estática (SSG) existente implementada con Amplify Console. Esto requiere tres pasos. Primero, agregue un rol de servicio a la aplicación. A continuación, actualice el directorio de salida en la configuración de compilación de la aplicación. Por último, actualice lapackage.jsonpara indicar que la aplicación utiliza SSR.

Agregar un rol de servicio

Un rol de servicio es el rol de AWS Identity and Access Management (IAM) que asume Amplify Console cuando llama a otros servicios en su nombre. Siga estos pasos para agregar un rol de servicio a una aplicación SSG que ya está implementada con Amplify Console.

Para agregar un rol de servicio

  1. Inicie sesión en la consola de administración de AWS y abra laConsola de Amplify.

  2. Si aún no ha creado un rol de servicio en su cuenta de Amplify, consultePara crear un rol de serviciopara completar este paso previo.

  3. Elija la aplicación Next.js estática a la que desea agregar un rol de servicio.

  4. En el panel de navegación, elijaConfiguración de la aplicación,Generales.

  5. En la páginaDetalles de la aplicaciónPágina, elijaEditar

  6. ParaRol de servicio, elija el nombre de un rol de servicio existente o el nombre del rol de servicio que creó en el paso 2.

  7. Elija Save (Guardar).

Actualizar la configuración de compilación

Antes de volver a implementar la aplicación con la funcionalidad SSR, debe actualizar la configuración de compilación de la aplicación para establecer el directorio de salida en.next. Puede editar la configuración de compilación en la consola de Amplify o en unamplify.ymlalmacenado en su repositorio. Para obtener más información, consulte Configuración de los ajustes de compilación.

A continuación, mostramos un ejemplo de la configuración de compilación de una aplicación dondebaseDirectorytoma el valor.next.

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

Actualizar el archivo package.json

Después de agregar un rol de servicio y actualizar la configuración de compilación, actualice elpackage.jsonfile. Como en el ejemplo siguiente, establezca el script de compilación en"next build"para indicar que la aplicación Next.js admite páginas SSG y SSR.

"scripts": { "dev": "next dev", "build": "next build", "start": "next start" },

Amplify detecta el cambio en elpackage.jsonen su repositorio y vuelve a implementar la aplicación con la funcionalidad SSR.

Solución de problemas de implementación de SSR

Si experimenta problemas inesperados al implementar una aplicación SSR con Amplify, revise los siguientes temas de solución de problemas.

Su directorio de salida está anulado

El directorio de salida para una aplicación Next.js implementada con Amplify debe establecerse en.next. Si se reemplaza el directorio de salida de la aplicación, compruebe la casillanext.config.jsfile. Para tener el directorio de salida de compilación predeterminado en.next, elimine la línea siguiente del archivo:

distDir: 'build'

Compruebe que el directorio de salida está establecido en.nexten la configuración de compilación. Para obtener más información sobre cómo consultar la configuración de compilación de la aplicación, consulteConfiguración de los ajustes de compilación.

A continuación, mostramos un ejemplo de la configuración de compilación de una aplicación dondebaseDirectorytoma el valor.next.

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

Obtiene un error 404 después de implementar su sitio SSR

Si recibe un error 404 después de implementar su sitio, el problema podría deberse a que se anule el directorio de salida. Para consultar sunext.config.jsy verifique el directorio de salida de compilación correcto en la especificación de compilación de su aplicación, siga los pasos del tema anterior,Su directorio de salida está anulado.

A su aplicación le falta la regla de reescritura para las distribuciones SSR de CloudFront

Cuando implementa una aplicación SSR, Amplify crea una regla de reescritura para las distribuciones SSR de CloudFront. Si no puede acceder a su aplicación en un navegador web, compruebe que la regla de reescritura de CloudFront existe en su cuenta de AWS. Si falta, puedes agregarlo manualmente o volver a desplegar tu aplicación.

Para ver o editar las reglas de reescritura y redirección de una aplicación en la consola de Amplify, en el panel de navegación, elijaConfiguración de la aplicación, luegoReescribe y redirige. La siguiente captura de pantalla muestra un ejemplo de las reglas de reescritura que Amplify crea para usted cuando implementa una aplicación SSR.


          El panel reescribe y redirige en la consola de Amplify.

Tu aplicación es demasiado grande para implementarla

Si intenta implementar una aplicación SSR Next.js en Amplify y obtener unaRequestEntityTooLargeException, la aplicación es demasiado grande para implementarla. Puede intentar evitar este problema agregando código de limpieza de caché a sunext.config.jsfile.

El siguiente es un ejemplo de código en elnext.config.jsque realiza la limpieza de caché.

module.exports = { webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { config.optimization.splitChunks.cacheGroups = { } config.optimization.minimize = true; return config }, }

La aplicación almacena archivos estáticos en una carpeta con una ruta reservada

Next.js puede servir archivos estáticos desde una carpeta llamadapublicque se almacena en el directorio raíz del proyecto. Cuando implementa y aloja una aplicación Next.js con Amplify, el proyecto no puede incluir carpetas con la ruta de accesopublic/static. Amplify se reserva lapublic/staticpara su uso al distribuir la aplicación. Si su aplicación incluye esta ruta, debe cambiar el nombre destaticAntes de implementar con Amplify.

Su aplicación ha alcanzado un límite de CloudFront

Cuotas de servicios de CloudFrontlimite su cuenta de AWS a 25 distribuciones con funciones Lambda @Edge adjuntas. Si supera esta cuota, puede eliminar las distribuciones de CloudFront no utilizadas de su cuenta o solicitar un aumento de las cuotas. Para obtener más información, consulte Solicitud de un aumento de cuota en la Guía del usuario de Cuotas de servicio.

Su aplicación utiliza la versión 10 de Next.js

Puede implementar una aplicación creada con Next.js versión 10. Sin embargo, Amplify admite actualmente el conjunto completo de funciones solo a través de la versión 9.0.

Regiones no compatibles

Amplify no admite la implementación de aplicaciones SSR Next.js en todas las regiones de AWS donde Amplify Console esté disponible. Actualmente, Next.js SSR no se admite en las siguientes regiones: Europa (Milán) eu-south-1, Oriente Medio (Bahrein) me-south-1 y Asia Pacífico (Hong Kong) ap-east-1.