AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
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 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
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
Étape 3 : Retour à la console Amplify .......................................................................................... 35
Gestion des performances de votre application ..................................................................................... 36
iv
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
É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
É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
É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).
4AWS 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).
5AWS 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.
6AWS Amplify Console User Guide
Étapes suivantes
Étapes suivantes
• Ajouter un domaine personnalisé à votre application (p. 8)
• Gérer plusieurs environnements (p. 15)
7AWS 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.
8AWS 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.
9AWS 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.
10AWS 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.
11AWS 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.
12AWS 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
13AWS 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.
14AWS 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.
15AWS 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
16AWS 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.
17AWS 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.
18AWS 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 :
19AWS 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/
20AWS 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}]
21AWS 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 :
22AWS 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": ""}]
24AWS 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.
25AWS 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:
26AWS 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
27Vous pouvez aussi lire
