Distribuisci un'app Astro.js su Amplify Hosting

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

Per implementare un sito Astro con SSR Amplify Hosting, devi aggiungere un adattatore alla tua applicazione. Non gestiamo 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 all'indirizzo astro-aws-amplifygithub.com/alexnguyennz/ sul sito web. GitHub AWS non mantiene questo adattatore.

Per distribuire un'app Astro su Amplify Hosting

1. Sul tuo computer locale, vai all'applicazione Astro per distribuirla.

2. Per installare l'adattatore, apri una finestra di terminale ed esegui il seguente comando. Questo esempio utilizza il community adapter disponibile all'indirizzo astro-aws-amplifygithub.com/alexnguyennz/. Puoi sostituire astro-aws-amplify con il nome dell'adattatore che si sta utilizzando.

   npm install astro-aws-amplify

3. Nella cartella del progetto dell'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. Conferma la modifica e invia il progetto al tuo repository Git.

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

5. Accedi a AWS Management Console 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 ramo del repository, procedi come segue:

   1. Seleziona il nome del repository da connettere.

   2. Seleziona il nome del ramo del repository da connettere.

   3. Scegli Next (Successivo).

9. Nella pagina delle impostazioni dell'app, individua la sezione Impostazioni di creazione. Per la directory di output di Build, immettete.amplify-hosting.

10. È inoltre necessario aggiornare i comandi di compilazione del frontend dell'app nelle specifiche di build. Per aprire le specifiche di build, scegli Modifica YML file.

11. Nel amplify.yml file, individua la sezione dei comandi di compilazione del frontend. Inserisci mv node_modules ./.amplify-hosting/compute/default

    Il file delle impostazioni di build dovrebbe avere l'aspetto 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. Seleziona Salva.

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

14. Scegli Next (Successivo).

15. Nella pagina di revisione, scegli Salva e distribuisci.