Implementación de una aplicación SvelteKit 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 SvelteKit en Amplify Hosting

Utilice las siguientes instrucciones para implementar una aplicación SvelteKit en Amplify Hosting. Puede usar su propia aplicación o crear una aplicación de inicio. Para obtener más información, consulte Creating a project en la documentación de SvelteKit.

Para implementar una aplicación SvelteKit con SSR en Amplify Hosting, debe agregar un adaptador a su proyecto. No mantenemos un adaptador propiedad de Amplify para el marco de SvelteKit. En este ejemplo, utilizamos el amplify-adapter creado por un miembro de la comunidad. El adaptador está disponible en github.com/gzimbron/amplify-adapter en el sitio web de GitHub. AWS no se encarga del mantenimiento de este adaptador.

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

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

  2. Para instalar el adaptador, abra una ventana de terminal y ejecute el siguiente comando. En este ejemplo, se utiliza el adaptador comunitario disponible en github.com/gzimbron/amplify-adapter. Si utiliza un adaptador comunitario diferente, reemplace amplify-adapter por el nombre de su adaptador.

    npm install amplify-adapter

  3. Abra el archivo svelte.config.js en la carpeta de proyectos de su aplicación SvelteKit. Edite el archivo para usar amplify-adapter o reemplace 'amplify-adapter' por el nombre de su adaptador. El archivo debe tener un aspecto similar al siguiente.

    import adapter from 'amplify-adapter';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

              
/** @type {import('@sveltejs/kit').Config} */
const config = {
        // Consult https://kit.svelte.dev/docs/integrations#preprocessors
        // for more information about preprocessors
        preprocess: vitePreprocess(),

        kit: {
                // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
                // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
                // See https://kit.svelte.dev/docs/adapters for more information about adapters.
                adapter: adapter()
        }
};

export default config;

  4. Confirme el cambio y envíe la aplicación a su repositorio de Git.

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

    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 build.

  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. Introduzca - cd build/compute/default/ y - npm i --production.

    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'
                - 'cd build/compute/default/'
                - 'npm i --production'
              
    artifacts:
        baseDirectory: build
        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.