Compatibilidad de Amplify con marcos de SSR

Amplify Hosting es compatible con cualquier marco SSR JavaScript basado en un paquete de implementación que se ajusta al resultado de compilación que Amplify espera. Amplify Hosting proporciona una especificación de implementación que estandariza la estructura de archivos y directorios para la salida de la compilación de una aplicación para cualquier marco de SSR.

Los autores de los marcos pueden usar la especificación de implementación basada en el sistema de archivos para desarrollar adaptadores de compilación de código abierto personalizados para sus marcos específicos. Estos adaptadores transformarán la salida de la compilación de una aplicación en un paquete de implementación que se ajuste a la estructura de directorios prevista de Amplify Hosting. Este paquete de implementación incluirá todos los archivos y activos necesarios para alojar una aplicación, incluida la configuración del tiempo de ejecución, como las reglas de enrutamiento.

Si no utiliza un marco o un adaptador de marcos, puede desarrollar su propia solución para generar un paquete de implementación que se ajuste a la estructura de directorios prevista de Amplify Hosting.

Amplify Hosting admite los siguientes tipos primitivos: activos estáticos, computación, optimización de imágenes y reglas de enrutamiento. Puede aprovechar estos tipos primitivos para implementar aplicaciones con una funcionalidad más rica. Para obtener información detallada sobre cada tipo primitivo, consulteAmplify SSR: soporte de tipo primitivo.

Puede elegir entre las siguientes situaciones para empezar a implementar una aplicación de SSR en Amplify.

Implementación de una aplicación de Next.js

Amplify admite aplicaciones creadas con Next.js sin necesidad de un adaptador o configuración manual en la consola. Para obtener más información, consulte Amplify el soporte para Next.js.

Implementación de una aplicación que utilice un adaptador de marcos

Puede hacer referencia a cualquier adaptador de marcos de código abierto disponible para implementar la aplicación de SSR en Amplify Hosting. Para obtener más información, consulte Uso de un adaptador de marcos.

Hay un adaptador disponible para el marco Nuxt. Para obtener más información sobre cómo utilizar este adaptador, consulte la documentación de Nuxt.

Creación de un adaptador de marcos

Los autores de marcos que deseen integrar las características que proporciona un marco pueden usar la especificación de implementación de Amplify Hosting para configurar la salida de la compilación para que se ajuste a la estructura que Amplify espera. Para obtener más información, consulte Implementación de un servidor Express mediante el manifiesto de implementación.

Configuración de un script posterior a la compilación

Puede usar la especificación de implementación de Amplify Hosting para manipular la salida de la compilación según sea necesario para situaciones específicas. Para obtener más información, consulte Uso de la especificación de implementación de Amplify Hosting para configurar la salida de la compilación. Para ver un ejemplo, consulte Implementación de un servidor Express mediante el manifiesto de implementación.

Implementación de una aplicación de SSR en Amplify

Puede usar las instrucciones de este tema para implementar una aplicación creada con cualquier marco con un paquete de implementación que se ajuste a la salida de compilación que Amplify espera. Si va a implementar una aplicación de Next.js, no se necesita ningún adaptador.

Si va a implementar una aplicación de SSR que usa un adaptador de marcos, primero debe instalar y configurar el adaptador. Para ver instrucciones, consulte Uso de un adaptador de marcos.

Implementación de una aplicación de SSR en Amplify Hosting

1. Inicia sesión en la consola de Amplify AWS Management Console y ábrela.

2. En la página Todas las aplicaciones, selecciona Crear nueva aplicación.

3. En la página Comenzar a crear con Amplify, elige tu proveedor de repositorios de Git y, a continuación, selecciona Siguiente.

4. En la página Añadir ramificación de repositorio, siga estos pasos:

   1. Selecciona el nombre del repositorio al que deseas conectarte.

   2. Seleccione el nombre de la rama del repositorio a la que desee conectarse.

   3. Elija Siguiente.

5. En la página de configuración de la aplicación, Amplify detecta automáticamente las aplicaciones SSR de Next.js.

   Si va a implementar una aplicación SSR que utiliza un adaptador para otro marco, debe habilitar Amazon CloudWatch Logs de forma explícita. Abra la sección de configuración avanzada y, a continuación, seleccione Habilitar los registros de la aplicación SSR en la sección de implementación de Server-Side Rendering (SSR).

6. La aplicación requiere un rol de servicio de IAM que Amplify asume para entregar los registros en su Cuenta de AWS.

   El procedimiento para agregar un rol de servicio varía en función de si desea crear un rol nuevo o usar uno existente.

   • Para crear un nuevo rol:

     1. Elija Crear y utilizar un nuevo rol de servicio.

   • Para usar un rol existente:

     1. Elija Usar un rol existente.

     2. En la lista de funciones de servicio, seleccione la función que desee utilizar.

7. Elija Siguiente.

8. En la página Revisar, elija Guardar e implementar.

Uso de un adaptador de marcos

Puede instalar y usar cualquier adaptador de compilación de marcos de SSR que se haya creado para la integración con Amplify Hosting. Cada marco que ofrece un adaptador determina cómo se configura el adaptador y se conecta a su proceso de compilación. Normalmente, instalará el adaptador como una dependencia de desarrollo de npm.

Después de crear una aplicación con un marco, utilice la documentación del marco para obtener información sobre cómo instalar el adaptador de Amplify Hosting y configurarlo en el archivo de configuración de la aplicación.

A continuación, cree un archivo amplify.yml en el directorio raíz del proyecto. En el archivo amplify.yml, establezca el valor de baseDirectory en el directorio de salida de la compilación de la aplicación. El marco ejecuta el adaptador durante el proceso de compilación para transformar la salida en el paquete de implementación de Amplify Hosting.

El nombre del directorio de salida de la compilación puede ser cualquiera, pero el nombre de archivo .amplify-hosting tiene importancia. Amplify busca primero un directorio definido como baseDirectory. Si existe, Amplify busca la salida de la compilación en dicho directorio. Si el directorio no existe, Amplify busca la salida de la compilación en .amplify-hosting, incluso si el cliente no lo ha definido.

A continuación se muestra un ejemplo de la configuración de compilación de una aplicación. El valor de baseDirectory se establece en .amplify-hosting para indicar que la salida de la compilación está en la carpeta .amplify-hosting. Siempre que el contenido de la carpeta .amplify-hosting coincida con la especificación de implementación de Amplify Hosting, la aplicación se implementará correctamente.

version: 1
frontend:
  preBuild:
    commands:
      - npm install
  build:
    commands:
      - npm run build
  artifacts:
    baseDirectory: .amplify-hosting

Después de configurar la aplicación para usar un adaptador de marcos, puede implementarla en Amplify Hosting. Para obtener instrucciones detalladas, consulte Implementación de una aplicación de SSR en Amplify.