AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com

 
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify
                              Console User Guide

AWS Amplify: Console User Guide
Copyright © 2019 Amazon Web Services, Inc. and/or its affiliates. All rights reserved.
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide

Amazon's trademarks and trade dress may not be used in connection with any product or service that is not Amazon's, in any manner
that is likely to cause confusion among customers, or in any manner that disparages or discredits Amazon. All other trademarks not
owned by Amazon are the property of their respective owners, who may or may not be affiliated with, connected to, or sponsored by
Amazon.
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide

Table of Contents
  Qu’est-ce que la console AWS Amplify ? ............................................................................................... 1
         Que sont les applications web modernes ? ..................................................................................... 1
         Fonctionnalités de la console Amplifiy ............................................................................................ 1
         Étape suivante ........................................................................................................................... 2
  Mise en route .................................................................................................................................... 3
         Étape 1 : Connexion de référentiel ................................................................................................ 3
         Étape 2 : Confirmation des paramètres de génération du frontend ...................................................... 4
         Étape 3 : Confirmation des paramètres de génération du backend (Bêta) ............................................. 5
         Étape 4 : Ajout de variables d'environnement (facultatif) .................................................................... 6
         Étape 5 : Enregistrement et déploiement ........................................................................................ 6
         Étapes suivantes ........................................................................................................................ 7
  Configuration de domaines personnalisés ............................................................................................... 8
         Ajout d'un domaine personnalisé géré dans Amazon Route 53 .......................................................... 8
         Ajout d'un domaine personnalisé géré par un fournisseur DNS tiers .................................................... 9
         Gestion de sous-domaines ......................................................................................................... 11
         Association d'un domaine ........................................................................................................... 12
  Déploiement de backends sans serveur ............................................................................................... 13
  Gestion de plusieurs environnements ................................................................................................... 15
         Utilisation d'environnements basés sur des branches ..................................................................... 15
         Utilisation de flux de travail d'équipe ............................................................................................ 16
                Utilisation d'un flux de travail centralisé ................................................................................ 16
                Utilisation d'un flux de travail de branche fonctionnalité ........................................................... 17
                Utilisation du flux de travail GitFlow ..................................................................................... 18
  Utilisation de redirections ................................................................................................................... 19
         Types de redirections ................................................................................................................ 19
         Éléments d'une redirection ......................................................................................................... 20
         Ordre de redirections ................................................................................................................. 20
         Redirections et réécritures simples .............................................................................................. 21
         Redirections d'applications web monopages (SPA) ........................................................................ 22
         Réécriture de proxy inverse ........................................................................................................ 22
         Barres obliques de fin et URL nettoyées ...................................................................................... 22
         Espaces réservés ..................................................................................................................... 23
         Paramètres de chaînes de requête et de chemin ........................................................................... 23
         Redirections basées sur la région ............................................................................................... 24
  Restriction de l'accès ......................................................................................................................... 25
  Configuration des paramètres de génération ......................................................................................... 26
         Syntaxe de la spécification YML ................................................................................................. 26
         Scénarios de génération ............................................................................................................ 27
                À l'aide de paramètres de génération spécifiques à la branche ................................................. 27
                Accès à un sous-dossier .................................................................................................... 27
                Déploiement du backend avec votre frontend ........................................................................ 28
                Définition du dossier de sortie ............................................................................................. 28
                Installation de packages dans le cadre de votre génération ..................................................... 28
                Utilisation d'un Registre npm privé ....................................................................................... 29
                Installation de packages de système d'exploitation ................................................................. 29
  Variables d'environnement .................................................................................................................. 30
         Définition de variables d'environnement ........................................................................................ 30
         Accès aux variables d'environnement ........................................................................................... 30
  Connexion à des domaines personnalisés tiers ..................................................................................... 32
         Connexion à un domaine GoDaddy ............................................................................................. 32
         Connexion à un domaine Google ................................................................................................ 33
  Création d'un rôle de service .............................................................................................................. 35
         Étape 1 : Création d'un rôle de service ......................................................................................... 35
         Étape 2 : Acceptation de toutes les valeurs par défaut dans la console AWS CloudFormation ................ 35

                                                                       iii
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide

     Étape 3 : Retour à la console Amplify .......................................................................................... 35
Gestion des performances de votre application ..................................................................................... 36

                                                                iv
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide
                                Que sont les applications web modernes ?

Qu’est-ce que la console AWS
Amplify ?
     La console AWS Amplify est un service de diffusion en continu et d'hébergement d'applications web
     modernes. La console AWS Amplify simplifie le déploiement frontend et backend de votre application.
     Connectez-vous à votre référentiel de code, et votre frontend ainsi que votre backend sont déployés en un
     seul flux de travail, sur chaque commit de code. Cela permet de garantir que votre application web n'est
     mise à jour que lorsque le déploiement a réussi, et élimine ainsi les incohérences entre le frontend et le
     backend de l'application. La console AWS Amplify vous permet de créer, de déployer et d'héberger plus
     facilement vos applications web mobiles, vous permettant ainsi de créer rapidement des commentaires et
     de fournir de nouvelles fonctionnalités à vos utilisateurs plus rapidement.

Que sont les applications web modernes ?
     Les applications web modernes sont conçues comme des applications web monopages qui regroupent
     tous les composants dans des fichiers statiques. Les architectures web client-serveur classiques ont
     conduit à des expériences médiocres, caractérisées non seulement par le fait que chaque clic de bouton
     ou chaque recherche nécessitait un aller-retour au serveur et le re-rendu de l’application tout entière.
     Les applications web modernes garantissent une expérience utilisateur de type application native en
     fournissant de manière efficace aux navigateurs un frontend applicatif ou une interface utilisateur sous
     forme de fichiers HTML/JavaScript préconstruits, pouvant ensuite appeler une fonctionnalité backend sans
     recharger la page.

     La fonctionnalité des applications web modernes est souvent répartie sur plusieurs emplacements, tels que
     les bases de données, les services d'authentification, l'exécution de code frontend dans le navigateur, et
     la logique métier backend ou les fonctions AWS Lambda, qui s'exécutent dans le cloud. Les déploiements
     d'applications sont ainsi complexes et chronophages, car les développeurs doivent rigoureusement
     coordonner les déploiements entre le frontend et le backend afin d'éviter des déploiements partiels ou
     en échec. La console AWS Amplify simplifie le déploiement du frontend et du backend en un seul flux de
     travail.

     La console AWS Amplify prend en charge les frameworks SPA (d’application monopage) courants, par
     exemple React, Angular, Vue.js, Ionic, Ember, ainsi que les générateurs sur site statiques tels que Gatsby,
     Eleventy, Hugo, VuePress et Jekyll.

Fonctionnalités de la console Amplifiy
     Vous pouvez effectuer les actions suivantes avec la console Amplify :

     • Connectez votre référentiel (GitHub, BitBucket, GitLab et AWS CodeCommit), la console Amplify détecte
       alors automatiquement les paramètres de génération frontend ainsi que la fonctionnalité backend
       provisionnée avec l'interface de ligne de commande Amplify (chaîne d'outils de ligne de commande pour
       créer des backends sans serveur).
     • Gérez les environnements de production et intermédiaires pour vos frontend et backend en connectant
       de nouvelles branches.
     • Le déploiement atomique permet d’éliminer la fenêtre de maintenance en garantissant que la mise à
       jour de l’application web ne s’effectue que lorsque le déploiement est terminé. Cela permet d'éliminer les
       scénarios dans lesquels les fichiers ne sont pas correctement chargés.

                                                    1
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide
                                         Étape suivante

    • Connectez votre domaine personnalisé. Si vous gérez votre domaine dans Amazon Route 53, la
      console Amplify connecte automatiquement la racine (yourdomain.com), les sous-domaines www
      (www.yourdomain.com) et les sous-domaines de branche (https://dev.yourdomain.com).
    • Obtenez des captures d'écran de votre application rendue sur différents appareils mobiles pour identifier
      les problèmes de disposition.
    • Configurez les réécritures et les redirections pour gérer les rangs de référencement.
    • Protégez votre application web par un mot de passe pour pouvoir utiliser de nouvelles fonctions sans les
      rendre accessibles publiquement.

Étape suivante
    Mise en route (p. 3) de la console Amplify.

                                                   2
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide
                                    Étape 1 : Connexion de référentiel

Mise en route
     Dans cette procédure, vous découvrez comment créer, déployer et héberger en continu une application
     web moderne. Les applications web modernes incluent les frameworks SPA (d’application monopage),
     par exemple React, Angular ou Vue, et les générateurs sur site statiques (SSG) tels que Hugo, Jekyll ou
     Gatsby.

     Pour commencer, connectez-vous à la console Amplify et choisissez Mise en route sous Déployer.

Étape 1 : Connexion de référentiel
     Connectez vos référentiels GitHub, Bitbucket, GitLab ou AWS CodeCommit. Une fois que vous avez
     autorisé la console Amplify, Amplify récupère un jeton d'accès à partir du référentiel, mais ne stocke pas
     ce jeton 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.

     Une fois que vous avez connecté le fournisseur de services de référentiel, choisissez un référentiel, puis
     choisissez une branche correspondante à créer et déployer.

                                                     3
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide
                                      Étape 2 : Confirmation des
                                 paramètres de génération du frontend

Étape 2 : Confirmation des paramètres de
génération du frontend
    Pour la branche sélectionnée, Amplify inspecte votre référentiel afin de détecter automatiquement la
    séquence de commandes de génération à exécuter.

    Important : vérifiez que les commandes de génération et le répertoire de sortie de génération (à savoir,
    artifactsbaseDirectory) sont exacts. Si vous devez modifier ces informations, choisissez Modifier pour ouvrir
    l'éditeur YML. Vous pouvez enregistrer vos paramètres de génération sur nos serveurs, ou vous pouvez
    télécharger le YML et l'ajouter à la racine de votre référentiel (pour monorepos, stockez le YML dans le
    répertoire racine de l'application).

                                                   4
AWS Amplify Console User Guide
                                 Étape 3 : Confirmation des paramètres
                                    de génération du backend (Bêta)

    Pour plus d'informations, consultez la page sur la structure YML (p. 26).

Étape 3 : Confirmation des paramètres de
génération du backend (Bêta)
    La console Amplify détecte les applications qui utilisent le framework Amplify et peut déployer des
    ressources backend en un seul flux de travail avec la génération frontend. Cela vous permet de gérer les
    environnements de production et de test avec votre flux de travail Git.

    Pour déployer la fonctionnalité backend à l'aide de l'interface de ligne de commande Amplify, créez
    ou réutilisez un rôle de service IAM. Les rôles IAM sont une méthode sécurisée pour accorder des
    autorisations de console Amplify afin d'agir sur les ressources de votre compte.

    Remarque : l'interface de ligne de commande Amplify ne s'exécutera pas si un rôle de service IAM n'est
    pas activé.

    Pour plus d'informations, consultez la page Déploiement d'un backend sans serveur avec la console
    Amplify (p. 13).

                                                    5
AWS Amplify Console User Guide
                          Étape 4 : Ajout de variables d'environnement (facultatif)

Étape 4 : Ajout de variables d'environnement
(facultatif)
     Toutes les applications ou presque ont besoin d'informations de configuration au moment de l'exécution.
     Ces configurations peuvent être des détails de connexion de base de données, des clés d'API ou différents
     paramètres. Les variables d'environnement permettent d'exposer ces configurations au moment de la
     génération.

Étape 5 : Enregistrement et déploiement
     Passez en revue tous vos paramètres pour vous assurer que tout est configuré correctement. Choisissez
     Enregistrer et déployer pour déployer votre application web sur un réseau de diffusion de contenu (CDN)
     mondial. Votre génération frontend prend généralement 1 à 2 minutes, mais peut varier en fonction de la
     taille de l'application.

     Accédez à l'écran des journaux de génération en sélectionnant un indicateur de progression sur la vignette
     de la branche. Une génération comporte les étapes suivantes :

     1. Mise en service : votre environnement de génération est configuré à l'aide d'une image Docker sur
        un hôte avec 4 vCPU, 7 Go de mémoire. Chaque génération dispose d'une instance hôte propre,
        garantissant ainsi que toutes les ressources sont bien isolées. Le contenu du fichier Docker est affiché
        pour s'assurer que l'image par défaut prend en charge vos exigences.
     2. Création : la phase de génération se compose de trois étapes : configuration (clone le référentiel dans le
        conteneur), déploiement du backend (exécute l'interface de ligne de commande Amplify pour déployer
        des ressources backend) et génération du frontend (crée vos artefacts frontend).
     3. Déploiement : lorsque la génération est terminée, tous les artefacts sont déployés sur un environnement
        d'hébergement géré par Amplify. Chaque déploiement est atomique : le déploiement atomique permet
        d’éliminer la fenêtre de maintenance en garantissant que la mise à jour de l’application web ne s’effectue
        qu'une fois le déploiement terminé.
     4. Vérification : pour vérifier que votre application fonctionne correctement, Amplify affiche des captures
        d'écran du fichier index.html dans plusieurs résolutions de périphériques à l'aide de Headless Chrome.

                                                     6
AWS Amplify Console User Guide
                                         Étapes suivantes

Étapes suivantes
    • Ajouter un domaine personnalisé à votre application (p. 8)
    • Gérer plusieurs environnements (p. 15)

                                                   7
AWS Amplify Console User Guide
                                   Ajout d'un domaine personnalisé
                                     géré dans Amazon Route 53

Configuration de domaines
personnalisés
    Vous pouvez connecter un domaine personnalisé acheté via des bureaux d'enregistrement de domaine
    (par exemple, Amazon Route 53, GoDaddy et Google Domains) à votre application. Lorsque vous déployez
    votre application web avec la console Amplify, elle est hébergée à l'adresse suivante :

    https://branch-name.d1m7bkiki6tdw1.amplifyapp.com

    Lorsque vous utilisez un domaine personnalisé, les utilisateurs voient que votre application est hébergée à
    partir d'une URL, par exemple :

    https://www.awesomedomain.com

    La console Amplify génère un certificat SSL pour tous les domaines connectés à votre application afin que
    l'ensemble du trafic soit sécurisé via HTTPS/2. Le certificat SSL généré par Amazon Certificate Manager
    est valide pendant 30 jours et est renouvelé automatiquement aussi longtemps que votre application est
    hébergée avec Amplify.

    Rubriques
     • Ajout d'un domaine personnalisé géré dans Amazon Route 53 (p. 8)
     • Ajout d'un domaine personnalisé géré par un fournisseur DNS tiers (p. 9)
     • Gestion de sous-domaines (p. 11)
     • Association d'un domaine (p. 12)

Ajout d'un domaine personnalisé géré dans Amazon
Route 53
    Lorsque vous déployez votre application, vous pouvez ajouter un domaine personnalisé que vous gérez à
    l'aide d'Amazon Route 53.

    1. Dans le panneau de navigation de gauche, choisissez Paramètres de l'application, Gestion de domaine,
       puis Ajouter un domaine.

                                                   8
AWS Amplify Console User Guide
                                   Ajout d'un domaine personnalisé
                                   géré par un fournisseur DNS tiers

    2. Dans Entrer votre domaine racine, saisissez votre domaine racine (https://awesomedomain.com).
       Lorsque vous commencez à saisir, les domaines racine que vous gérez dans Amazon Route 53
       s'affichent dans la liste (https://awesomedomain.com).
    3. Sélectionnez le domaine que vous souhaitez utiliser, puis choisissez Rechercher un domaine et
       Enregistrer.

    La console Amplify met automatiquement à jour les enregistrements DNS pour votre racine (https://
    awesomedomain.com) et sous-domaine www (https://www.awesomedomain.com) dans Amazon Route 53.
    Nous avons également configuré une redirection pour que https://www.awesomedomain.com pointe vers
    https://awesomedomain.com (vous pouvez le modifier en choisissant Réécritures et redirections dans le
    menu de gauche).

    Remarque : la propagation du DNS et la génération du certificat SSL prennent généralement 10 à
    30 minutes, mais peuvent également prendre jusqu'à 24 heures. Pour plus d'informations sur les messages
    d'état, consultez la page Association d'un domaine (p. 12).

Ajout d'un domaine personnalisé géré par un
fournisseur DNS tiers
    Lorsque vous déployez votre application, vous pouvez ajouter un domaine personnalisé que vous gérez à
    l'aide d'un fournisseur DNS tiers si vous n'utilisez pas Amazon Route 53.

    1. Dans le panneau de navigation de gauche, choisissez Paramètres de l'application, Gestion de domaine,
       puis Ajouter un domaine.
    2. Dans Entrer votre domaine racine, saisissez votre domaine racine (https://awesomedomain.com), puis
       choisissez Rechercher un domaine. Si le domaine est enregistré, une alerte verte vous informe de
       poursuivre si vous êtes le propriétaire du domaine. Si le domaine est disponible, achetez un domaine à
       Amazon Route 53.

                                                   9
AWS Amplify Console User Guide
                               Ajout d'un domaine personnalisé
                               géré par un fournisseur DNS tiers

3. Choisissez Save. La console Amplify ajoute deux entrées pour https://www.awesomedomain.com et
   https://awesomedomain.com avec une redirection configurée entre le sous-domaine www et le domaine
   racine. Le domaine étant géré en externe, vous devez configurer manuellement votre fournisseur DNS
   (par exemple, GoDaddy ou Google Domains).
4. Pour attribuer un domaine à votre déploiement d'application, choisissez Afficher les enregistrements
   DNS dans la bannière d'alerte.

5. Mettez à jour les enregistrements CNAME et ALIAS de vos fournisseurs DNS comme suit. Pour
   GoDaddy et Google Domains, consultez les instructions pas à pas de la page Connexion à des
   domaines personnalisés tiers (p. 32).
  a. Configurez l'enregistrement CNAME afin qu'il pointe tous les sous-domaines (https://
     *.awesomedomain.com) vers le domaine amplifyapp.
  b. Configurez l'enregistrement ANAME/ALIAS afin qu'il pointe le domaine racine (https://
     awesomedomain.com) vers votre domaine amplifyapp. Les enregistrements ANAME vous permettent
     de pointer la racine de votre domaine vers un nom d'hôte. Pour les fournisseurs DNS ne prenant pas
     en charge ANAME/ALIAS, nous vous recommandons vivement de migrer votre DNS vers Amazon
     Route 53.
  c. Pour générer un certificat SSL pour votre domaine, Amazon Certificate Manager (ACM) a besoin
     de vérifier la propriété. Configurez un CNAME afin qu'il pointe vers le serveur de validation d'ACM.
     Lorsqu'ACM valide la propriété de votre domaine, l'ensemble du trafic sera servi via HTTPS/2.

                                              10
AWS Amplify Console User Guide
                                     Gestion de sous-domaines

    Important : la vérification de la propriété du domaine et la propagation du DNS pour des domaines tiers
    peuvent prendre jusqu'à 48 heures. Pour plus d'informations sur les messages d'état, consultez la page
    Association d'un domaine (p. 12).

Gestion de sous-domaines
    Un sous-domaine est la partie de votre URL qui apparaît avant votre nom de domaine (par exemple,
    www.amazon.com ou aws.amazon.com). Pour les domaines gérés à l'aide de Route 53, la console
    Amplify crée automatiquement des sous-domaines pour toutes les branches connectées. Par exemple,
    lorsque vous connectez une branche dev, la console Amplify crée un déploiement à l'adresse https://
    dev..amplifyapp.com sans configuration supplémentaire. Si vous souhaitez profiter de la même
    fonctionnalité pour les fournisseurs tiers, vous devez configurer le DNS. Si vous souhaitez profiter de la
    même fonctionnalité pour les fournisseurs tiers, configurez le DNS pour accorder à la console Amplify
    l'accès de caractère générique (*) à tous les sous-domaines.

                                                   11
AWS Amplify Console User Guide
                                     Association d'un domaine

Association d'un domaine
    Lorsque vous associez un domaine à votre déploiement d'application Amplify, vous voyez les messages
    d'état suivants :

    1. En cours : première tentative de mise à jour de votre enregistrement DNS. Cela indique qu'Amplify est
       en mesure de mettre à jour les enregistrements gérés dans Route 53, mais ne peut pas le faire pour des
       fournisseurs DNS tiers.
    2. En attente de vérification : avant de générer un certificat SSL, Amazon Certificate Manager (ACM) doit
       vérifier que vous êtes le propriétaire du domaine. La vérification de domaines gérés en dehors d'Amazon
       Route 53 prend généralement plus de temps.
    3. En attente de déploiement : une fois le domaine vérifié, le DNS est propagé globalement sur tous les
       144 points de présence de notre réseau de diffusion de contenu (CDN).
    4. Disponible : le domaine est associé à votre application.

                                                   12
AWS Amplify Console User Guide

Déploiement de backends sans
serveur avec votre frontend (Bêta)
   Remarque : cette fonctionnalité n'est actuellement disponible que pour les utilisateurs de la version Bêta
   de l'interface de ligne de commande Amplify, qui prend en charge plusieurs environnements. Faites vos
   premiers pas avec la fonctionnalité en installant l'interface de ligne de commande Amplify.

   npm install -g @aws-amplify/cli@multienv

   La console Amplify permet aux développeurs de créer des applications à l'aide de l'infrastructure
   Amplify afin de déployer en continu des mises à jour sur leur backend et frontend sur chaque commit de
   code. La console Amplify vous permet de déployer des backends sans serveur avec les API GraphQL,
   l'authentification, l'analyse et le stockage créés par l'interface de ligne de commande Amplify.

   1. Connectez n'importe quel(le) référentiel/branche qui a été initialisé(e) par l'interface de ligne de
      commande Amplify (remarque : installez la version Bêta de l'interface de ligne de commande : npm
      install -g @aws-amplify/cli@multienv).
   2. La console Amplify détecte automatiquement les backends provisionnés avec l'interface de ligne de
      commande Amplify et ajoute une étape backend au YML de génération semblable à ce qui suit :

     version: 1.0
     env:
          variables:
              key: value
     backend:
          phases:
              build:
                  - export STACKINFO="$(envCache --get stackInfo)"
                  - amplifyPush --environment $AWS_BRANCH
                  - envCache --set stackInfo "$(amplify env get --json --name $AWS_BRANCH)"

     amplifyPush - Le script amplifyPush est un script d'assistant qui permet aux utilisateurs de spécifier un
     nom d'environnement en entrée et qui exécute l'interface de ligne de commande Amplify pour créer ou
     mettre à jour un environnement. Pour la première génération, nous créons un environnement backend
     qui correspond au nom de la branche connectée. ($ AWS_BRANCH est une variable d'environnement
     définie par le système). Si vous souhaitez réutiliser un environnement Amplify existant, modifiez la
     variable d'environnement $AWS_BRANCH pour qu'elle pointe vers env-name.

     Exemple d'utilisation :

     amplifyPush --environment ENV_NAME

     envCache - Fournit le stockage clé-valeur au moment de la génération. La variable envCache ne peut
     être modifiée que pendant une génération et peut être réutilisée dans la génération suivante. Grâce à
     envCache, nous pouvons stocker des informations sur l'environnement déployé et le rendre disponible
     dans le conteneur de générations lors des générations suivantes. Les variables d'environnement, quant
     à elles, ne peuvent pas être modifiées pendant une génération.

     Exemple d'utilisation :

     envCache --set  

                                                  13
AWS Amplify Console User Guide

  envCache --get  

3. Choisissez Suivant et Enregistrer et déployer. Votre génération d'application commence en déployant le
   backend suivi du frontend.

                                              14
AWS Amplify Console User Guide
                           Utilisation d'environnements basés sur des branches

Gestion de plusieurs environnements
et flux de travail d'équipe
Utilisation d'environnements basés sur des
branches
     La console Amplify exploite des branches Git pour créer de nouveaux environnements chaque fois qu'un
     développeur connecte une nouvelle branche dans son référentiel. Après avoir connecté votre première
     branche, vous pouvez créer un nouvel environnement en ajoutant une branche comme suit :

     1. Sur la page de la liste des branches, choisissez Connecter une branche.
     2. Choisissez une branche dans votre référentiel.
     3. Acceptez les paramètres de génération détectés automatiquement ou modifiez-les en fonction des
        exigences de votre application.
     4. Enregistrez, puis déployez votre application.

     Votre application comporte maintenant deux environnements frontend disponibles à l'adresse https://
     master.appid.amplifyapp.com et à l'adresse https://dev.appid.amplifyapp.com. Si votre application
     comprend un backend provisionné avec l'interface de ligne de commande Amplify (Bêta), la console
     Amplify déploie des backends distincts par branche. La connexion d'une branche crée des environnements
     de frontend et de backend, ce qui permet aux développeurs de travailler dans les environnements de test
     (sandbox) et d'utiliser Git comme mécanisme de fusion du code et de résolution des conflits.

                                                    15
AWS Amplify Console User Guide
                                    Utilisation de flux de travail d'équipe

Utilisation de flux de travail d'équipe
     Pour les équipes qui créent des applications sans serveur avec l'interface de ligne de commande Amplify,
     nous recommandons de procéder comme suit :

     • Chaque développeur d'une équipe crée un environnement de test (sandbox) dans le cloud qui est distinct
       de son ordinateur local. Cela permet aux développeurs de travailler indépendamment les uns des autres
       sans écraser les modifications des autres membres de l'équipe.
     • Votre équipe connecte des branches de production, de test et de fonctionnalité à la console Amplify. Cela
       garantit que la console Amplify utilise le référentiel Git comme seule source fiable à partir de laquelle
       déployer les modifications, plutôt que les développeurs de l'équipe envoient manuellement leur backend
       ou frontend en production à partir de leurs ordinateurs locaux.

     La console Amplify est conçue pour fonctionner avec tous les flux de travail d'équipe tels que les flux de
     travail centralisés, de branche fonctionnalité et GitFlow.

     Utilisation d'un flux de travail centralisé
     Les équipes qui migrent de SVN vers Git utilisent ce flux de travail. Avec ce flux de travail, tous les
     développeurs de l'équipe valident directement le code sur la branche par défaut appelée maître. Chaque
     développeur clone une copie locale du référentiel, travaille de manière indépendante, puis transmet le code
     pour le fusionner avec la branche maître. Exemples :

     1. Connectez la branche maître à la console Amplify pour un déploiement continu.
     2. Kita et Cody vérifient la branche maître localement, puis exécutent la commande amplify init pour
        configurer un backend cloud afin d'apporter des modifications au frontend et au backend à partir de leurs
        ordinateurs locaux.
     3. Lorsque le code a été testé localement, Kita transmet le code à la branche maître. Une génération est
        lancée dans la console Amplify qui met à jour le contenu frontend ou backend ayant changé.

     L'exemple de ligne de commande et le schéma suivants illustrent le flux de travail.

     > git fetch && git checkout master
     > amplify init
             ? Do you want to use an existing environment? false
             ? Enter a name for the environment kita-sandbox
             // Provide AWS Profile info
     // Test feature locally
     > npm run start
     > git commit -m "New feature" && git push origin master

                                                      16
AWS Amplify Console User Guide
                     Utilisation d'un flux de travail de branche fonctionnalité

Utilisation d'un flux de travail de branche fonctionnalité
L'idée principale du flux de travail de branche fonctionnalité réside dans le fait que le travail lié à la
fonctionnalité se produit dans une branche autre que la branche maître. Cela permet aux développeurs
de travailler sur de nouvelles fonctionnalités isolées de celles en production. Lorsque la fonctionnalité est
prête, elle est fusionnée dans la branche maître. Comme dans la procédure du flux de travail centralisé,
tous les membres de l'équipe travaillent sur la branche fonctionnalité en envoyant des mises à jour à la
branche jusqu'à ce qu'elle soit prête à être fusionnée avec la branche maître. La branche fonctionnalité est
également connectée à la console Amplify (protégée par un mot de passe) pour le déploiement continu afin
que les développeurs puissent partager des mises à jour avec d'autres parties prenantes.

                                                17
AWS Amplify Console User Guide
                               Utilisation du flux de travail GitFlow

Utilisation du flux de travail GitFlow
GitFlow utilise deux branches pour enregistrer l'historique du projet. La branche maître suit le code de mise
à jour uniquement, et la branche développement sert de branche d'intégration de nouvelles fonctionnalités.
GitFlow simplifie le développement parallèle en isolant le nouveau développement du travail terminé. Le
nouveau développement (comme les fonctionnalités et les correctifs de bogues non urgents) est effectué
dans des branches fonctionnalité. Lorsque le développeur juge que le code peut être publié, la branche
fonctionnalité est fusionnée dans la branche de développement d'intégration. Les seules validations sur la
branche maître sont les fusions de branches de mises à jour et de branches de correctifs (pour résoudre
les bogues urgents). Le schéma ci-dessous illustre les branches généralement connectées à la console
Amplify dans ce modèle.

                                                18
AWS Amplify Console User Guide
                                         Types de redirections

Utilisation de redirections
     Les redirections permettent à un serveur web de réacheminer la navigation d'une URL vers une autre. Les
     raisons courantes d'utilisation de redirections incluent les suivantes : personnaliser l'apparence de l'URL,
     éviter des liens brisés, déplacer l'emplacement d'hébergement d'une application ou d'un site sans modifier
     son adresse, et modifier une URL demandée dans le format nécessaire à une application web.

Types de redirections
     Il existe plusieurs types de redirections qui prennent en charge des scénarios spécifiques.

     Redirection permanente (301)

     Les redirections 301 sont conçues pour les modifications durables apportées à la destination d'une adresse
     web. L'historique de classement du moteur de recherche de l'adresse d'origine s'applique à la nouvelle
     adresse de destination. La redirection se produit côté client, une barre de navigation de navigateur affiche
     ainsi l'adresse de destination après la redirection. Les raisons courantes d'utilisation de redirections 301
     incluent les suivantes :

     • Pour éviter un lien brisé lorsque l'adresse d'une page change.
     • Pour éviter un lien brisé lorsqu'un utilisateur fait une faute de frappe prévisible dans une adresse.

     Redirection temporaire (302)

     Les redirections 302 sont conçues pour les modifications temporaires apportées à la destination d'une
     adresse web. L'historique de classement du moteur de recherche de l'adresse d'origine ne s'applique
     pas à la nouvelle adresse de destination. La redirection se produit côté client, une barre de navigation de
     navigateur affiche ainsi l'adresse de destination après la redirection. Les raisons courantes d'utilisation de
     redirections 302 incluent les suivantes :

     • Pour fournir une destination de détour lorsque des réparations sont effectuées sur l'adresse d'origine.
     • Pour fournir des pages de test de comparaison A/B d'interface utilisateur.

     Réécriture (200)

     Les redirections 200 (réécritures) sont conçues pour afficher le contenu de l'adresse de destination comme
     s'il était servi à partir de l'adresse d'origine. L'historique de classement du moteur de recherche continue
     à s'appliquer à l'adresse d'origine. La redirection se produit côté serveur, une barre de navigation de
     navigateur affiche ainsi l'adresse d'origine après la redirection. Les raisons courantes d'utilisation de
     redirections 200 incluent les suivantes :

     • Pour rediriger l'ensemble d'un site vers un nouvel emplacement d'hébergement sans modifier l'adresse
       du site.
     • Pour rediriger l'ensemble du trafic vers une application web monopage (SPA) vers sa page index.html
       pour traitement par une fonction de routeur côté client.

     Introuvable (404)

     Les redirections 404 se produisent lorsqu'une requête pointe vers une adresse qui n'existe pas. La page
     de destination d'une redirection 404 s'affiche au lieu de celle demandée. Les raisons courantes d'une
     redirection 404 incluent les suivantes :

                                                     19
AWS Amplify Console User Guide
                                       Éléments d'une redirection

     • Pour éviter un message de lien brisé lorsqu'un utilisateur saisit une URL incorrecte.
     • Pour pointer des requêtes de pages inexistantes d'une application web vers sa page index.html pour
       traitement par une fonction de routeur côté client.

Éléments d'une redirection
     Les redirections se composent de ce qui suit :

     • Une adresse d'origine : l'adresse demandée par l'utilisateur.
     • Une adresse de destination : l'adresse qui sert le contenu que l'utilisateur voit.
     • Un type de redirection : les types incluent une redirection permanente (301), une redirection temporaire
       (302), une réécriture (200) ou introuvable (404).
     • Un code pays à deux lettres (facultatif) : une valeur que vous pouvez inclure pour segmenter l'expérience
       utilisateur de votre application par région.

     Pour créer et modifier des redirections, choisissez Paramètres des réécritures et redirections dans le
     panneau de navigation de gauche.

     Pour modifier en bloc des redirections dans un éditeur JSON, choisissez Ouvrir un éditeur de texte.

Ordre de redirections
     Les redirections sont exécutées à partir du haut de la liste. Assurez-vous que votre ordre donne l'effet
     voulu. Par exemple, avec l'ordre de redirections suivant, toutes les requêtes d'un chemin donné sous /docs/
     sont redirigées vers le même chemin sous /documents/, sauf /docs/specific-filename.html qui redirige vers /
     documents/different-filename.html :

     /docs/specific-filename.html /documents/diferent-filename.html 301
     /docs/ /documents/

                                                      20
AWS Amplify Console User Guide
                                                  Redirections et réécritures simples

     L'ordre de redirections suivant ignore la redirection de specific-filename.html vers different-filename.html :

     /docs/ /documents/
     /docs/specific-filename.html /documents/diferent-filename.html 301

Redirections et réécritures simples
     Dans cette section, nous fournissons un exemple de code pour des scénarios de redirection courants.

     Vous pouvez utiliser l'exemple de code suivant pour rediriger définitivement une page spécifique à une
     nouvelle adresse.

      Adresse d'origine                      Adresse de destination                 Type de redirection           Code pays

      /original.html                         /destination.html                      permanent redirect
                                                                                    (301)

     JSON: [{"source": "/original.html", "status": "301", "target": "/destination.html", "condition": null}]

     Vous pouvez utiliser l'exemple de code suivant pour rediriger n'importe quel chemin dans un dossier vers le
     même chemin dans un autre dossier.

      Adresse d'origine                      Adresse de destination                 Type de redirection           Code pays

      docs/                               /documents/                         permanent redirect
                                                                                    (301)

     JSON [{"source": "/docs/", "status": "301", "target": "/documents/", "condition": null}]

     Vous pouvez utiliser l'exemple de code suivant pour rediriger l'ensemble du trafic vers index.html en tant
     que réécriture. Dans ce scénario, la réécriture permet d'indiquer à l'utilisateur qu'il a accédé à l'adresse
     d'origine.

      Adresse d'origine                      Adresse de destination                 Type de redirection           Code pays

                                          index.html                             rewrite (200)

     JSON [{"source": "/", "status": "200", "target": "/index.html", "condition": null}]

     Vous pouvez utiliser l'exemple de code suivant pour utiliser une réécriture afin de modifier le sous-domaine
     qui est présenté à l'utilisateur.

      Adresse d'origine                      Adresse de destination                 Type de redirection           Code pays

      https://                               https://                               rewrite (200)
      mydomain.com                           www.mydomain.com

     JSON [{"source": "https://mydomain.com", "status": "200", "target": "https://www.mydomain.com", "condition": null}]

                                                                         21
AWS Amplify Console User Guide
                                       Redirections d'applications web monopages (SPA)

     Vous pouvez utiliser l'exemple de code suivant pour rediriger des chemins dans un dossier qui sont
     introuvables vers une page 404 personnalisée.

      Adresse d'origine                       Adresse de destination                 Type de redirection                     Code pays

      /                                    /404.html                              not found (404)

     JSON [{"source": "/", "status": "404", "target": "/404.html", "condition": null}]

Redirections d'applications web monopages (SPA)
     La plupart des infrastructures SPA prennent en charge HTML5 history.pushState() pour modifier
     l'emplacement du navigateur sans déclencher de requête serveur. Cela fonctionne pour les utilisateurs
     qui commencent leur transition à partir de la racine (ou /index.html), mais échoue pour les utilisateurs qui
     accèdent directement à une autre page. À l'aide d'expressions régulières, l'exemple suivant configure une
     réécriture 200 pour tous les fichiers vers index.html, sauf pour les extensions de fichiers spécifiées dans
     l'expression régulière.

      Adresse d'origine                       Adresse de destination                 Type de redirection                     Code pays

     JSON [{"source": "", "status": "200", "target": "index.html", "condition": null}]

Réécriture de proxy inverse
     L'exemple suivant utilise une réécriture pour traiter par proxy le contenu d'un autre emplacement afin
     d'informer l'utilisateur que le domaine n'a pas changé :

      Adresse d'origine                       Adresse de destination                 Type de redirection                     Code pays

      /images                                 https://            rewrite (200)
                                              images.otherdomain.com

     JSON [{"source": "/images", "status": "200", "target": "https://images.otherdomain.com", "condition": null}]

Barres obliques de fin et URL nettoyées
     Pour créer des structures d'URL propres telles que about au lieu de about.html, des générateurs sur site
     statiques tels que Hugo génèrent des répertoires pour les pages avec un index.html (/about/index.html).
     La console Amplify crée automatiquement des URL nettoyées en ajoutant une barre oblique de fin lorsque
     cela est nécessaire. Le tableau ci-dessous présente différents scénarios :

                                                                         22
AWS Amplify Console User Guide
                                                   Espaces réservés

     Entrées utilisateur dans le                      URL dans la barre d'adresse                      Document affiché
     navigateur

     /about                                           /about                                           /about.html

     /about (when about.html                          /about/                                          /about/index.html
     returns 404)

     /about/                                          /about/                                          /about/index.html

Espaces réservés
    Vous pouvez utiliser l'exemple de code suivant pour rediriger des chemins dans une structure de dossiers
    vers une structure correspondante dans un autre dossier.

     Adresse d'origine                    Adresse de destination              Type de redirection                  Code pays

     /docs//                        /documents//                  permanent redirect
     //                      //                     (301)
                                  
    JSON [{"source": "/docs////", "status": "301", "target": "/documents////",
    "condition": null}]

Paramètres de chaînes de requête et de chemin
    Vous pouvez utiliser l'exemple de code suivant pour rediriger un chemin vers un dossier avec un nom qui
    correspond à la valeur d'un élément de la chaîne de requête dans l'adresse d'origine :

     Adresse d'origine                    Adresse de destination              Type de redirection                  Code pays

     /docs?id=
AWS Amplify Console User Guide
                                               Redirections basées sur la région

Redirections basées sur la région
     Vous pouvez utiliser l'exemple de code suivant pour rediriger des requêtes en fonction de la région.

      Adresse d'origine                   Adresse de destination               Type de redirection       Code pays

      /documents                          /documents/us/                       302                       

     JSON [{"source": "/documents", "status": "302", "target": "/documents/us/", "condition": ""}]

                                                                    24
AWS Amplify Console User Guide

Restriction de l'accès
   Protégez par un mot de passe les branches « fonctionnalité » qui ne sont pas encore accessibles
   publiquement.

   1. Choisissez Paramètres de l'application, puis Contrôle d'accès.
   2. Dans la liste de vos branches connectées, choisissez Gérer l'accès dans le coin supérieur droit.

   3. Effectuez l'une des actions suivantes :
     • Vous pouvez définir un mot de passe global que vous souhaitez appliquer à toutes les branches
       connectées. Par exemple, si les branches maître, dev et fonctionnalité sont connectées, vous pouvez
       utiliser un mot de passe global afin de définir les mêmes nom d'utilisateur et mot de passe pour toutes
       les branches.
     • Vous pouvez définir un mot de passe au niveau de la branche.

                                                  25
AWS Amplify Console User Guide
                                     Syntaxe de la spécification YML

Configuration des paramètres de
génération
     Le console Amplify détecte automatiquement le framework frontend et les paramètres de génération
     associés en inspectant le fichier package.json dans votre référentiel. Vous avez les options suivantes :

     • Enregistrez les paramètres de génération dans la console Amplify. La console Amplify détecte
       automatiquement les paramètres de génération et les enregistre afin qu'ils sont accessibles via la
       console Amplify. Ces paramètres s'appliquent à l'ensemble de vos branches, sauf si un fichier YML est
       trouvé dans votre référentiel.
     • Enregistrez les paramètres de génération dans votre référentiel. Téléchargez le fichier amplify.yml et
       ajoutez-le à la racine de votre référentiel (ou à la racine du dossier d'application pour monorepos).

     Vous pouvez modifier ces paramètres dans la console Amplify en choisissant Paramètres de l'application
     > Paramètres de génération. Ces paramètres de génération s'appliquent à toutes les branches de votre
     application, sauf pour les branches pour lesquelles un fichier YML est enregistré dans le référentiel.

Syntaxe de la spécification YML
     La spécification de génération YML contient un ensemble de commandes de génération et de paramètres
     associés utilisés par la console Amplify pour exécuter votre génération. Le YML est structuré comme suit :

     version: 1.0
     env:
       variables:
            key: value
     backend:
       phases:
          preBuild:
            commands:
              - *enter command*
          build:
            commands:
              - *enter command*
          postBuild:
              commands:
              - *enter command*
     frontend:
       phases:
          preBuild:
            commands:
              - cd react-app
              - npm ci
          build:
            commands:
              - npm run build
       artifacts:
          files:
              - location
              - location
          discard-paths: yes
          baseDirectory: location
       cache:

                                                    26
AWS Amplify Console User Guide
                                       Scénarios de génération

        paths:
            - path
            - path

    • version : représente le numéro de version YML de la console Amplify.
    • env : ajoutez des variables d'environnement dans cette section. Vous pouvez également ajouter des
      variables d'environnement à l'aide de la console.
    • backend : exécutez des commandes de l'interface de ligne de commande Amplify pour provisionner un
      backend, mettre à jour des fonctions Lambda, ou des schémas GraphQL dans le cadre d'un déploiement
      continu. Découvrez comment déployer un backend avec votre frontend (p. 13).
    • frontend : exécutez des commandes de génération de frontend.
    • Le frontend et le backend comportent trois phases qui représentent les commandes exécutées au cours
      de chaque séquence de la génération.
           • pré-build : le script preBuild s'exécute avant le démarrage de la génération, mais après
             l'installation des dépendances.
           • génération : vos commandes de génération.
           • post-build : le script post-build s'exécute lorsque la génération est terminée et que nous avons
             copié tous les artefacts nécessaires dans le répertoire de sortie.
    • artefacts > répertoire de base : le répertoire dans lequel se trouvent vos artefacts de génération.
    • artefacts > fichiers : spécifiez les fichiers de votre artefact que vous souhaitez déployer. ** /* permet
      d'inclure tous les fichiers.

Scénarios de génération
    Les scénarios suivants décrivent comment écrire votre YML de génération.

    À l'aide de paramètres de génération spécifiques à la
    branche
    Pour définir des paramètres de génération spécifiques à la branche, ajoutez le YML de spécification de
    génération à la racine de votre référentiel. Vous pouvez le faire de différentes manières :

    • Lorsque vous connectez une nouvelle branche, choisissez Modifier. Apportez vos modifications, puis
      choisissez Enregistrer et ajouter à mon référentiel. La console Amplify ajoute automatiquement le
      YML à votre référentiel lorsque vous déployez la branche. Remarque : si vous ne voulez pas que ces
      paramètres s'appliquent à toutes les branches, assurez-vous de ne pas fusionner ce fichier dans les
      autres branches.
    • Dans la console Amplify, choisissez Paramètres de l'application, Paramètres de génération, puis
      Télécharger. Apportez vos modifications, puis ajoutez ce fichier à la racine de votre référentiel.

    Accès à un sous-dossier
    Pour monorepos, les utilisateurs souhaitent pouvoir accéder à un dossier pour exécuter la génération.
    Lorsque vous exécutez la commande cd, elle s'applique à toutes les étapes de votre génération. Vous ne
    devez donc pas répéter la commande lors des différentes phases.

    version: 1.0
    env:
      variables:
          key: value

                                                     27
Vous pouvez aussi lire
DIAPOSITIVES SUIVANTES ... Annuler