Implementación de una aplicación Astro.js en Amplify Hosting - AWS Amplify Hospedaje

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.

Implementación de una aplicación Astro.js en Amplify Hosting

Utilice las siguientes instrucciones para implementar una aplicación Astro.js en Amplify Hosting. Puede usar una aplicación existente o crear una aplicación inicial mediante uno de los ejemplos oficiales que proporciona Astro. Para crear una aplicación inicial, consulte Use a theme or starter template en la documentación de Astro.

Para implementar un sitio de Astro con SSR en Amplify Hosting, debe agregar un adaptador a su aplicación. No mantenemos un adaptador propiedad de Amplify para el marco de Astro. En este tutorial, se utiliza el adaptador astro-aws-amplify que creó un miembro de la comunidad. Este adaptador está disponible en github.com/alexnguyennz/astro-aws-amplify en el sitio web de GitHub. AWS no se encarga del mantenimiento de este adaptador.

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

  1. En el equipo local, vaya a la aplicación Astro que desea implementar.

  2. Para instalar el adaptador, abra una ventana de terminal y ejecute el siguiente comando. En este ejemplo, se usa el adaptador comunitario disponible en github.com/alexnguyennz/astro-aws-amplify. Puede reemplazar astro-aws-amplify por el nombre del adaptador que está usando.

    npm install astro-aws-amplify

  3. Abra el archivo astro.config.mjs en la carpeta de proyectos de su aplicación Astro. Actualice el archivo para agregar el adaptador. El archivo debe tener un aspecto similar al siguiente.

    import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import awsAmplify from 'astro-aws-amplify';
 
import sitemap from '@astrojs/sitemap';
 
// https://astro.build/config
export default defineConfig({
  site: 'https://example.com',
  integrations: [mdx(), sitemap()],
  adapter: awsAmplify(),
  output: 'server',
});

  4. Confirme el cambio y envíe el proyecto a su repositorio de Git.

    Ahora está listo o lista para implementar la aplicación Astro en Amplify.

  5. Inicie sesión en AWS Management Console y abra la consola de Amplify.

  6. En la página Todas las aplicaciones, seleccione Crear nueva aplicación.

  7. En la página Comenzar a crear con Amplify, seleccione el proveedor de repositorios de Git y, a continuación, elija Siguiente.

  8. En la página Añadir ramificación de repositorio, haga lo siguiente:

    1. Seleccione el nombre del repositorio que desea conectar.

    2. Seleccione el nombre de la ramificación del repositorio que desea conectar.

    3. Elija Siguiente.

  9. En la página de Configuración de la aplicación, busque la sección Configuración de compilación. En Directorio de salida de compilación, introduzca .amplify-hosting.

  10. También debe actualizar los comandos de compilación del frontend de la aplicación en la especificación de compilación. Para abrir la especificación de compilación, seleccione Editar archivo YML.

  11. En el archivo amplify.yml, localice la sección de comandos de compilación del frontend. Escriba mv node_modules ./.amplify-hosting/compute/default

    El archivo de configuración de compilación debe tener el aspecto siguiente.

    version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'npm ci --cache .npm --prefer-offline'
        build:
            commands:
                - 'npm run build'
                - 'mv node_modules ./.amplify-hosting/compute/default'
    artifacts:
        baseDirectory: .amplify-hosting
        files:
            - '**/*'
    cache:
        paths:
            - '.npm/**/*'

  12. Seleccione Guardar.

  13. Si desea que Amplify pueda entregar registros de aplicaciones a Registros de Amazon CloudWatch, debe habilitarlo explícitamente en la consola. Abra la sección Configuración avanzada y, a continuación, seleccione Habilitar registros de aplicaciones de SSR en la sección Implementación de la renderización del servidor (SSR).

  14. Elija Siguiente.

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