= Comment utiliser AWS Amplify pour déployer une application React =
== Un guide pour déployer des applications React avec AWS Amplify ==
Depuis que j'ai commencé à consulter en tant qu'ingénieur logiciel, j'ai voulu créer un site Web de portefeuille qui présente les
projets personnels et professionnels sur lesquels j'ai travaillé. Cette pause hivernale, j'ai passé du temps à concevoir, développer et déployer mon site de portfolio, et dans cet article, je vais vous expliquer comment je l'ai déployé avec AWS Amplify. Vous pouvez consulter le site Web sur dan-murphy.com et le code sur GitHub.
= Un bref historique =
La plupart de mon travail professionnel consiste à créer des applications basées sur les données et à rationaliser les pipelines de données. Pour accomplir ces tâches, j'utilise régulièrement Python et Ruby et intègre JavaScript pour tout travail frontal. Dans un effort pour devenir plus à l'aise avec React, j'ai décidé d'utiliser le framework pour créer mon site Web de portefeuille.
= Configuration de l'application =
La première étape que j'ai franchie a été de décider comment structurer l'application. j'ai utilisé
create-react-app comme modèle de base pour mes répertoires, puis restructuré l'application avec quelques dossiers supplémentaires. La configuration finalisée ressemble à ceci :
src
Composants
âÃÂÃÂarchives
âÃÂÃÂextras
âÃÂÃÂdata
âÃÂÃÂimgs
pages
âÃÂÃÂcontenu
âÃÂÃÂdata
modes
essais
agencements
Certains des changements notables sont la
**Composants**
, et
**pages**
répertoires.
**modes**
,
: C'est là que je stocke tous les composants de l'application. En stockant les composants dans un dossier centralisé, il est plus facile de réutiliser et de refactoriser mon code et plus intuitif à comprendre pour les autres. Certains des composants qui composent mon site Web de portefeuille sont
Composants
Entête,
pied de page, et
ProjectSidebar.
: C'est ici que je construis les pages distinctes de l'application. J'importe les composants nécessaires depuis le
pages
dossier, puis regroupez-les pour concevoir la page. Voici un exemple de la façon dont j'ai fait cela pour le
page d'accueil des composants :
: C'est ici que je définis les styles CSS globaux pour l'application. j'adore utiliser
modes
styled-componentspour les composants individuels, mais j'ai également trouvé utile de créer des styles globaux disponibles pour chaque page.
Enfin, pour mapper les requêtes sur les bonnes pages, nous utilisons
réagir-routeur-dom. Les itinéraires sont définis dans le
Fichier App.js comme indiqué ci-dessous :
Cela cartographiera
Page d'accueil,
/projets demandes à
ProjetsPage,
/sur les demandes de
À propos de la page et
/demandes de bibliothèque à
BookPage. Maintenant que le développement de l'application est terminé, nous devons la déployer pour que d'autres puissent l'utiliser !
/demandes à
= Déploiement avec AWS Amplify =
== Aperçu ==
Il existe plusieurs façons de déployer un site Web React, mais j'ai découvert que l'une des plus simples consiste à utiliser
**AWS Amplify Amplify est décrit comme le moyen le plus rapide et le plus simple de créer des applications mobiles et Web évolutives. Pour ce faire, AWS extrapole toutes les complications liées à la configuration d'un serveur, à l'installation de dépendances et à la création d'une version de production de votre site Web, vous permettant de vous concentrer uniquement sur la création d'une UX intuitive. Pour en savoir plus sur ce qu'AWS Amplify propose pour les applications basées sur les données (en particulier, les sites Web avec un **frontend** et un **backend, consultez leur documentation.
== Connecter votre Repository ==
Pour héberger votre application Web sur AWS Amplify, vous devez d'abord connecter le référentiel contenant votre code source. Pour ce faire, vous pouvez naviguer vers le
*AWS Amplify* *Démarrage* **Hébergez mon application Web et cliquez sur **Connecter le référentiel d'application *page, faites défiler jusqu'à*page, faites défiler jusqu'à 
Ensuite, vous serez redirigé vers une page séparée où vous pourrez connecter le référentiel contenant votre code source. Pour cet exemple, je choisirai GitHub, mais AWS Amplify prend également en charge BitBucket, GitLab, AWS CodeCommit et même le déploiement sans fournisseur Git.
Une fois l'autorisation réussie, vous pouvez sélectionner le référentiel que vous souhaitez déployer et sélectionner la branche qu'AWS Amplify doit utiliser pour les versions de production.
Après cela, cliquez sur
**Next** et AWS vous demanderont de configurer vos paramètres *build* et *test*. Le modèle de base fourni par AWS est illustré ci-dessous.
version 1
l'extrémité avant:
étapes :
pré-construction :
commandes :
- construction d'installation npm :
commandes :
- construction d'exécution npm
artefacts :
baseDirectory : construire
des dossiers:
-
cache :
chemins :
- node_modules
De plus, sous le
Bascule **paramètres avancés**, vous pouvez définir des variables d'environnement et un conteneur de construction personnalisé.
Enfin, après avoir examiné les paramètres de votre application, cliquez sur
**Enregistrer et déployer **et **AWS commencera à configurer et à déployer votre application. Une fois le déploiement d'AWS terminé, vous pouvez accéder à la page d'accueil d'Amplify et voir votre application nouvellement déployéeAWS commencera à configurer et à déployer votre application. Une fois le déploiement d'AWS terminé, vous pouvez accéder à la page d'accueil d'Amplify et voir votre application nouvellement déployée.
Maintenant, personnalisons l'URL en utilisant
**Gestion de domaine AWS Amplify
== Ajouter un domaine personnalisé ==
Pour commencer à ajouter un domaine personnalisé, accédez à la barre latérale gauche et sélectionnez
**gestion de domaine 
**gestion de domaine**paramètre.
Ensuite, sélectionnez
**Ajouter un domaine **Configurer le domaine **Entrez votre nom de domaine (comme indiqué ci-dessous) et cliquez**Entrez votre nom de domaine (comme indiqué ci-dessous) et cliquez sur 
Après cela, vous pouvez configurer toutes les redirections nécessaires pour votre domaine. Par exemple, dans l'exemple suivant, je crée une redirection de httpsdan-murphy.com vers httpswww.dan-murphy.com.
Enfin, une fois votre domaine personnalisé correctement configuré, AWS vous fournira un
**Certificat de validation Vous pouvez également afficher ce certificat dans la console AWS Certificate Manager.
== Ajouter un enregistrement CNAME ==
La dernière étape de la configuration de votre domaine personnalisé consiste à ajouter un enregistrement CNAME. Dans l'exemple suivant, j'utilise Google Domains, mais les concepts fondamentaux restent les mêmes dans les différents bureaux d'enregistrement de domaine.
Tout d'abord, faites défiler jusqu'à
**Enregistrements de ressources personnalisés** dans Google Domains. Créez un enregistrement *CNAME *qui pointe tous les sous-domaines vers le domaine AWS Amplify : Nom : saisissez le nom du sous-domaine. Si le sous-domaine est www.domaine.com, saisissez . S'il s'agit de www app.domain.com, saisissez app. Données : sur la page de gestion de domaine, cliquez sur Actions, puis sélectionnez Afficher les enregistrements DNS. Ensuite, entrez le domaine AWS Amplify disponible sous Configurer le fournisseur DNS. 
Page **Gestion des domaines**, sélectionnez **Actions **Afficher les enregistrements DNS**
Au total, l'enregistrement de ressource personnalisé ressemblera à ceci :
Ensuite, ajoutez-en un de plus
Enregistrement *CNAME* qui pointe vers le serveur de validation AWS Certificate Manager. Le gestionnaire de certificats AWS validé gère le protocole TLS pour votre application : Nom : saisissez le sous-domaine du serveur de validation. Si l'enregistrement DNS permettant de vérifier la propriété de votre domaine est _1234.example.com, saisissez uniquement _1234. Données : saisir le certificat de validation ACM. Si le serveur de validation est _1234.abcdefg.acm-validations.aws., saisissez _1234.abcdefg.acm-validations.aws.
Toutes les informations relatives à vos certificats de validation se trouvent dans la console AWS Certificate Manager. Après la deuxième
*CNAME* est ajouté, vos enregistrements personnalisés devraient ressembler à ceci : 
Enfin, ajoutons un
**Enregistrement synthétique** pour configurer un sous-domaine vers l'avant : Sous-domaine : entrez l'URL du domaine : www. 
= Conclusion =
Globalement, dans cet article, nous avons appris à structurer les applications React et à les déployer avec AWS Amplify. Tout d'abord, nous avons discuté de la modularisation d'une application React en
*composants* *pages* dossiers. Ensuite, nous avons découvert **AWS Amplify** et comment déployer avec lui des applications statiques et basées sur les données. Enfin, nous avons appris à utiliser **AWS Amplify Domain Management** et **Google Domains **pour personnaliser le domaine de notre application. **et et
Si vous avez des questions, des préoccupations ou des commentaires sur cet article ou sur mon site de portfolio, n'hésitez pas à commenter ou à m'envoyer un e-mail à
*
[email protected]*. Merci d'avoir lu!
