Déployer une application Astro.js sur Amplify Hosting

Suivez les instructions suivantes pour déployer une application Astro.js sur Amplify Hosting. Vous pouvez utiliser une application existante ou créer une application de démarrage en utilisant l'un des exemples officiels fournis par Astro. Pour créer une application de démarrage, voir Utiliser un thème ou un modèle de démarrage dans la documentation Astro.

Pour déployer un site Astro avec SSR Amplify Hosting, vous devez ajouter un adaptateur à votre application. Nous ne maintenons pas d'adaptateur appartenant à Amplify pour le framework Astro. Ce didacticiel utilise l'astro-aws-amplifyadaptateur créé par un membre de la communauté. Cet adaptateur est disponible sur astro-aws-amplifygithub.com/alexnguyennz/ sur le site Web. GitHub AWS ne gère pas cet adaptateur.

Pour déployer une application Astro sur Amplify Hosting

1. Sur votre ordinateur local, accédez à l'application Astro à déployer.

2. Pour installer l'adaptateur, ouvrez une fenêtre de terminal et exécutez la commande suivante. Cet exemple utilise l'adaptateur communautaire disponible sur astro-aws-amplifygithub.com/alexnguyennz/. Vous pouvez remplacer astro-aws-amplify avec le nom de l'adaptateur que vous utilisez.

   npm install astro-aws-amplify

3. Dans le dossier de projet de votre application Astro, ouvrez le astro.config.mjs fichier. Mettez à jour le fichier pour ajouter l'adaptateur. Le fichier doit ressembler à ce qui suit.

   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. Validez la modification et transférez le projet vers votre dépôt Git.

   Vous êtes maintenant prêt à déployer votre application Astro sur Amplify.

5. Connectez-vous au AWS Management Console et ouvrez la console Amplify.

6. Sur la page Toutes les applications, choisissez Créer une nouvelle application.

7. Sur la page Commencer à créer avec Amplify, choisissez votre fournisseur de dépôt Git, puis choisissez Next.

8. Sur la page Ajouter une branche de référentiel, procédez comme suit :

   1. Sélectionnez le nom du référentiel à connecter.

   2. Sélectionnez le nom de la branche du référentiel à connecter.

   3. Choisissez Suivant.

9. Sur la page des paramètres de l'application, recherchez la section Paramètres de création. Pour Construire le répertoire de sortie, entrez.amplify-hosting.

10. Vous devez également mettre à jour les commandes de génération du frontend de l'application dans la spécification de construction. Pour ouvrir la spécification de construction, choisissez Modifier YML le fichier.

11. Dans le amplify.yml fichier, recherchez la section des commandes de construction du frontend. Saisissez mv node_modules ./.amplify-hosting/compute/default.

    Votre fichier de paramètres de compilation doit ressembler à ce qui suit.

    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. Choisissez Save (Enregistrer).

13. Si vous souhaitez qu'Amplify soit en mesure de fournir des journaux d'applications à Amazon CloudWatch Logs, vous devez l'activer explicitement dans la console. Ouvrez la section Paramètres avancés, puis choisissez Activer les journaux d'SSRapplications dans la section de déploiement du rendu côté serveur (SSR).

14. Choisissez Suivant.

15. Sur la page Révision, choisissez Enregistrer et déployer.