Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra. # Commencer à déployer une application sur Amplify Hosting Pour vous aider à comprendre le fonctionnement d'Amplify Hosting, les didacticiels suivants vous expliquent comment créer et déployer des applications créées à l'aide de frameworks SSR courants pris en charge par Amplify. **Topics** + [Déployer une application Next.js](getting-started-next.md) + [Déployer une application Nuxt.js](get-started-nuxt.md) + [Déployer une application Astro.js](get-started-astro.md) + [Déployer une SvelteKit application](get-started-sveltekit.md) # Déployer une application Next.js sur Amplify Hosting Ce didacticiel explique comment créer et déployer une application Next.js à partir d'un dépôt Git. Avant de commencer ce didacticiel, remplissez les conditions préalables suivantes. **Inscrivez-vous pour un Compte AWS** Si vous n'êtes pas encore AWS client, vous devez en [créer un Compte AWS](https://portal.aws.amazon.com/billing/signup#/start/email) en suivant les instructions en ligne. L'inscription vous permet d'accéder à Amplify et à d'autres AWS services que vous pouvez utiliser avec votre application. **Création d’une application** Créez une application Next.js de base à utiliser pour ce didacticiel, en [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app)suivant les instructions de la *documentation Next.js*. **Création d'un dépôt Git** Amplify prend en charge GitHub Bitbucket, et GitLab. AWS CodeCommit Transférez votre `create-next-app` application vers votre dépôt Git. ## Étape 1 : Connecter un dépôt Git Au cours de cette étape, vous connectez votre application Next.js dans un dépôt Git à Amplify Hosting. **Pour connecter une application dans un dépôt Git** 1. Ouvrez la console [Amplify](https://console.aws.amazon.com/amplify/). 1. Si vous déployez votre première application dans la région actuelle, vous partirez par défaut de la page de **AWS Amplify**service. Choisissez **Déployer une application** en haut de la page. 1. **Sur la page **Commencer à créer avec Amplify**, choisissez votre fournisseur de dépôt Git, puis choisissez Next.** Pour les GitHub référentiels, Amplify utilise GitHub la fonctionnalité Apps pour autoriser l'accès à Amplify. Pour plus d'informations sur l'installation et l'autorisation de l' GitHubapplication, consultez[Configuration de l'accès d'Amplify aux référentiels GitHub](setting-up-GitHub-access.md). **Note** Après avoir autorisé la console Amplify avec Bitbucket, or GitLab, AWS CodeCommit Amplify récupère un jeton d'accès auprès du fournisseur de référentiel, mais *ne le stocke pas* sur les serveurs. AWS Amplify accède à votre référentiel à l'aide de clés de déploiement installées dans un référentiel spécifique. 1. Sur la page **Ajouter une branche de référentiel**, procédez comme suit : 1. Sélectionnez le nom du référentiel à connecter. 1. Sélectionnez le nom de la branche du référentiel à connecter. 1. Choisissez **Suivant**. ## Étape 2 : Confirmer les paramètres de construction Amplify détecte automatiquement la séquence de commandes de génération à exécuter pour la branche que vous déployez. Au cours de cette étape, vous passez en revue et confirmez vos paramètres de compilation. **Pour confirmer les paramètres de génération d'une application** 1. Sur la page des **paramètres de l'application**, recherchez la section **Paramètres de création**. Vérifiez que la **commande Frontend build** et le **répertoire de sortie Build** sont corrects. Pour cet exemple d'application Next.js, le **répertoire de sortie Build** est défini sur`.next`. 1. La procédure d'ajout d'un rôle de service varie selon que vous souhaitez créer un nouveau rôle ou utiliser un rôle existant. + Pour créer un nouveau rôle : 1. Choisissez **Créer et utiliser un nouveau rôle de service**. + Pour utiliser un rôle existant : 1. Choisissez **Utiliser un rôle existant**. 1. Dans la liste des rôles de service, sélectionnez le rôle à utiliser. 1. Choisissez **Suivant**. ## Étape 3 : déployer l'application Au cours de cette étape, vous déployez votre application sur le réseau AWS mondial de diffusion de contenu (CDN). **Pour enregistrer et déployer une application** 1. Sur la page de **révision**, vérifiez que les détails de votre référentiel et les paramètres de l'application sont corrects. 1. Choisissez **Save and deploy** (Enregistrer et déployer). La création de votre interface prend généralement 1 à 2 minutes, mais cela peut varier en fonction de la taille de l'application. 1. Lorsque le déploiement est terminé, vous pouvez consulter votre application à l'aide du lien vers le domaine `amplifyapp.com` par défaut. **Note** [Pour renforcer la sécurité de vos applications Amplify, le domaine amplifyapp.com est enregistré dans *la* liste des suffixes publics (PSL).](https://publicsuffix.org/) Pour plus de sécurité, nous vous recommandons d'utiliser des cookies avec un `__Host-` préfixe si vous devez définir des cookies sensibles dans le nom de domaine par défaut de vos applications Amplify. Cette pratique vous aidera à protéger votre domaine contre les tentatives de falsification de requêtes intersites (CSRF). Pour plus d’informations, consultez la page [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) du Mozilla Developer Network. ## Étape 4 : (Facultatif) nettoyer les ressources Si vous n'avez plus besoin de l'application que vous avez déployée pour le didacticiel, vous pouvez la supprimer. Cette étape permet de vous assurer de ne pas être facturé pour des ressources que vous n’utilisez pas. **Pour supprimer une application** 1. Dans le menu des **paramètres de l'application** du volet de navigation, sélectionnez **Paramètres généraux**. 1. Sur la page des **paramètres généraux**, choisissez **Supprimer l'application**. 1. Dans la fenêtre de confirmation, entrez**delete**. Choisissez ensuite **Supprimer l'application**. ## Ajoutez des fonctionnalités à votre application Maintenant qu'une application est déployée sur Amplify, vous pouvez explorer certaines des fonctionnalités suivantes disponibles pour votre application hébergée. **Variables d’environnement** Les applications ont souvent besoin d'informations de configuration au moment de l'exécution. Ces configurations peuvent être des détails de connexion à la base de données, des clés d'API ou des paramètres. Les variables d'environnement permettent d'exposer ces configurations au moment de la création. Pour plus d’informations, consultez la section [Variables d’environnement](environment-variables.md). **Domaines personnalisés** Dans ce didacticiel, Amplify héberge votre application pour vous sur le `amplifyapp.com` domaine par défaut avec une URL telle que. `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com` Lorsque vous connectez votre application à un domaine personnalisé, les utilisateurs voient que votre application est hébergée sur une URL personnalisée, telle que`https://www.example.com`. Pour plus d'informations, consultez la section [Configuration de domaines personnalisés](custom-domains.md). **Aperçus par pull request** Les aperçus des pull requests Web permettent aux équipes de prévisualiser les modifications apportées par les pull requests (PRs) avant de fusionner le code avec une branche de production ou d'intégration. Pour plus d'informations, consultez les [aperçus Web pour les pull requests](pr-previews.md). **Gérer plusieurs environnements** Pour savoir comment Amplify utilise les branches de fonctionnalités et les GitFlow flux de travail pour prendre en charge plusieurs déploiements, voir Déploiements de [branches de fonctionnalités et flux de travail d'équipe](multi-environments.md). # Déployer une application Nuxt.js sur Amplify Hosting Suivez les instructions suivantes pour déployer une application Nuxt.js sur Amplify Hosting. Nuxt a implémenté un adaptateur prédéfini à l'aide du serveur Nitro. Cela vous permet de déployer un projet Nuxt sans aucune configuration supplémentaire. **Pour déployer une application Nuxt sur Amplify Hosting** 1. Connectez-vous à la console [Amplify AWS Management Console](https://console.aws.amazon.com/amplify/) et ouvrez-la. 1. Sur la page **Toutes les applications**, choisissez **Créer une nouvelle application**. 1. **Sur la page **Commencer à créer avec Amplify**, choisissez votre fournisseur de dépôt Git, puis choisissez Next.** 1. Sur la page **Ajouter une branche de référentiel**, procédez comme suit : 1. Sélectionnez le nom du référentiel à connecter. 1. Sélectionnez le nom de la branche du référentiel à connecter. 1. Choisissez **Suivant**. 1. 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'applications SSR** dans la section Déploiement du **rendu côté serveur (SSR**). 1. Choisissez **Suivant**. 1. Sur la page **Révision**, choisissez **Enregistrer et déployer**. # 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](https://docs.astro.build/en/install-and-setup/#use-a-theme-or-starter-template) dans la *documentation Astro*. Pour déployer un site Astro avec SSR sur 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-amplify`adaptateur créé par un membre de la communauté. Cet adaptateur est disponible sur [github. com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify) 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. 1. Pour installer l'adaptateur, ouvrez une fenêtre de terminal et exécutez la commande suivante. Cet exemple utilise l'adaptateur communautaire disponible sur [github. com/alexnguyennz/astro-aws-amplifier](https://github.com/alexnguyennz/astro-aws-amplify). Vous pouvez le *astro-aws-amplify* remplacer par le nom de l'adaptateur que vous utilisez. ``` npm install astro-aws-amplify ``` 1. 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', }); ``` 1. 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. 1. Connectez-vous à la console [Amplify AWS Management Console](https://console.aws.amazon.com/amplify/) et ouvrez-la. 1. Sur la page **Toutes les applications**, choisissez **Créer une nouvelle application**. 1. **Sur la page **Commencer à créer avec Amplify**, choisissez votre fournisseur de dépôt Git, puis choisissez Next.** 1. Sur la page **Ajouter une branche de référentiel**, procédez comme suit : 1. Sélectionnez le nom du référentiel à connecter. 1. Sélectionnez le nom de la branche du référentiel à connecter. 1. Choisissez **Suivant**. 1. 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**. 1. 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 le fichier YML**. 1. Dans le `amplify.yml` fichier, recherchez la section des commandes de construction du frontend. Saisissez **mv node\$1modules ./.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/**/*' ``` 1. Choisissez **Enregistrer**. 1. 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'applications SSR** dans la section Déploiement du **rendu côté serveur (SSR**). 1. Choisissez **Suivant**. 1. Sur la page **Révision**, choisissez **Enregistrer et déployer**. # Déployer une SvelteKit application sur Amplify Hosting Suivez les instructions suivantes pour déployer une SvelteKit application sur Amplify Hosting. Vous pouvez utiliser votre propre application ou créer une application de démarrage. Pour plus d'informations, consultez [la section Création d'un projet](https://kit.svelte.dev/docs/creating-a-project) dans la *SvelteKit documentation*. Pour déployer une SvelteKit application avec SSR sur Amplify Hosting, vous devez ajouter un adaptateur à votre projet. Nous ne maintenons pas d'adaptateur appartenant à Amplify pour le SvelteKit framework. Dans cet exemple, nous utilisons le `amplify-adapter` créé par un membre de la communauté. L'adaptateur est disponible sur [github. com/gzimbron/amplify-adaptateur](https://github.com/gzimbron/amplify-adapter) sur le GitHub site Web. AWS ne gère pas cet adaptateur. **Pour déployer une SvelteKit application sur Amplify Hosting** 1. Sur votre ordinateur local, accédez à l' SvelteKit application à déployer. 1. Pour installer l'adaptateur, ouvrez une fenêtre de terminal et exécutez la commande suivante. Cet exemple utilise l'adaptateur communautaire disponible sur [github. com/gzimbron/amplify-adaptateur.](https://github.com/gzimbron/amplify-adapter) Si vous utilisez un autre adaptateur communautaire, remplacez-le *amplify-adapter* par le nom de votre adaptateur. ``` npm install amplify-adapter ``` 1. Dans le dossier du projet de votre SvelteKit application, ouvrez le `svelte.config.js` fichier. Modifiez le fichier pour utiliser `amplify-adapter` ou remplacez-le *'amplify-adapter'* par le nom de votre adaptateur. Le fichier doit ressembler à ce qui suit. ``` 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; ``` 1. Validez la modification et transférez l'application vers votre dépôt Git. 1. Vous êtes maintenant prêt à déployer votre SvelteKit application sur Amplify. Connectez-vous à la console [Amplify AWS Management Console](https://console.aws.amazon.com/amplify/) et ouvrez-la. 1. Sur la page **Toutes les applications**, choisissez **Créer une nouvelle application**. 1. **Sur la page **Commencer à créer avec Amplify**, choisissez votre fournisseur de dépôt Git, puis choisissez Next.** 1. Sur la page **Ajouter une branche de référentiel**, procédez comme suit : 1. Sélectionnez le nom du référentiel à connecter. 1. Sélectionnez le nom de la branche du référentiel à connecter. 1. Choisissez **Suivant**. 1. 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**build**. 1. 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 le fichier YML**. 1. Dans le `amplify.yml` fichier, recherchez la section des commandes de construction du frontend. Entrez **- cd build/compute/default/** et**- npm i --production**. 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' - 'cd build/compute/default/' - 'npm i --production' artifacts: baseDirectory: build files: - '**/*' cache: paths: - '.npm/**/*' ``` 1. Choisissez **Enregistrer**. 1. 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'applications SSR** dans la section Déploiement du **rendu côté serveur (SSR**). 1. Choisissez **Suivant**. 1. Sur la page **Révision**, choisissez **Enregistrer et déployer**.