View a markdown version of this page

Distribuisci un' SvelteKit app su Amplify Hosting - AWS Amplify Hosting

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Distribuisci un' SvelteKit app su Amplify Hosting

Usa le seguenti istruzioni per distribuire un' SvelteKit applicazione su Amplify Hosting. Puoi utilizzare la tua applicazione o creare un'app iniziale. Per ulteriori informazioni, consulta Creazione di un progetto nella SvelteKit documentazione.

Per distribuire un' SvelteKit app con SSR su Amplify Hosting, devi aggiungere un adattatore al tuo progetto. Non manteniamo un adattatore di proprietà di Amplify per il framework. SvelteKit In questo esempio, stiamo usando quello amplify-adapter creato da un membro della community. L'adattatore è disponibile su github. com/gzimbron/amplify-adapter sul sito web. GitHub AWS non mantiene questo adattatore.

Per distribuire un' SvelteKit app su Amplify Hosting

  1. Sul tuo computer locale, accedi all' SvelteKit applicazione da distribuire.

  2. Per installare l'adattatore, aprite una finestra di terminale ed eseguite il comando seguente. Questo esempio utilizza il community adapter disponibile su github. com/gzimbron/amplify-adapter. Se stai usando un adattatore comunitario diverso, sostituiscilo amplify-adapter con il nome del tuo adattatore.

    npm install amplify-adapter

  3. Nella cartella del progetto SvelteKit dell'app, apri il svelte.config.js file. Modifica il file per utilizzare amplify-adapter o sostituirlo 'amplify-adapter' con il nome dell'adattatore. Il file dovrebbe avere il seguente aspetto.

    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. Effettua il commit della modifica e invia l'applicazione al tuo repository Git.

  5. Ora sei pronto per distribuire la tua SvelteKit app su Amplify.

    Accedi Console di gestione AWS e apri la console Amplify.

  6. Nella pagina Tutte le app, scegli Crea nuova app.

  7. Nella pagina Inizia a creare con Amplify, scegli il tuo provider di repository Git, quindi scegli Avanti.

  8. Nella pagina Aggiungi filiale del repository, procedi come segue:

    1. Seleziona il nome del repository a cui connetterti.

    2. Seleziona il nome del ramo del repository a cui connetterti.

    3. Scegli Next (Successivo).

  9. Nella pagina delle impostazioni dell'app, individua la sezione Impostazioni di compilazione. Per la directory di output di Build, inseriscibuild.

  10. È inoltre necessario aggiornare i comandi di compilazione del frontend dell'app nelle specifiche di compilazione. Per aprire la specifica di compilazione, scegliete Modifica file YML.

  11. Nel amplify.yml file, individua la sezione dei comandi di compilazione del frontend. Inserisci - cd build/compute/default/ e. - npm i --production

    Il file delle impostazioni di compilazione dovrebbe avere il seguente aspetto.

    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. Scegli Save (Salva).

  13. Se desideri che Amplify sia in grado di inviare i log delle app ad Amazon CloudWatch Logs, devi abilitarlo esplicitamente nella console. Apri la sezione Impostazioni avanzate, quindi scegli Abilita i log dell'app SSR nella sezione di distribuzione del Server-Side rendering (SSR).

  14. Scegli Next (Successivo).

  15. Nella pagina Revisione, scegli Salva e distribuisci.