View a markdown version of this page

Distribuisci un' Astro.js 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' Astro.js app su Amplify Hosting

Usa le seguenti istruzioni per distribuire un' Astro.js applicazione su Amplify Hosting. Puoi utilizzare un'applicazione esistente o creare un'applicazione iniziale utilizzando uno degli esempi ufficiali forniti da Astro. Per creare un'applicazione iniziale, consulta Usare un tema o un modello iniziale nella documentazione di Astro.

Per distribuire un sito Astro con SSR su Amplify Hosting, devi aggiungere un adattatore alla tua applicazione. Non manteniamo un adattatore di proprietà di Amplify per il framework Astro. Questo tutorial utilizza l'astro-aws-amplifyadattatore creato da un membro della community. Questo adattatore è disponibile su github. com/alexnguyennz/astro-aws-amplify sul sito web. GitHub AWS non mantiene questo adattatore.

Per distribuire un'app Astro su Amplify Hosting

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

  2. Per installare l'adattatore, aprite una finestra di terminale ed eseguite il seguente comando. Questo esempio utilizza il community adapter disponibile su github. com/alexnguyennz/astro-aws-amplify. È possibile sostituirlo astro-aws-amplify con il nome dell'adattatore che si sta utilizzando.

    npm install astro-aws-amplify

  3. Nella cartella del progetto della tua app Astro, apri il astro.config.mjs file. Aggiorna il file per aggiungere l'adattatore. Il file dovrebbe avere il seguente aspetto.

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

    Ora sei pronto per distribuire la tua app Astro su Amplify.

  5. 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, inserisci.amplify-hosting.

  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. Entra mv node_modules ./.amplify-hosting/compute/default

    Il file delle impostazioni di compilazione dovrebbe essere simile al seguente.

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