Déploiement et hébergement d’une application ReactJS

avec la console AWS Amplify Console

La console AWS Amplify fournit un flux de travail complet pour le développement, le déploiement et l’hébergement des applications Web ou des sites statiques à page unique avec des backends sans serveur. Lors de la connexion à un référentiel Git, Amplify détermine les paramètres de construction pour à la fois pour le cadre front-end et toutes les ressources back-end sans serveur configurées avec l’interface de ligne de commande Amplify CLI, et déploie automatiquement les mises à jour à chaque dépôt de code.

Dans ce didacticiel, nous allons créer une nouvelle application React et l’envoyer à un référentiel GitHub.  Ensuite, nous connecterons le référentiel à Amplify Console et le déploierons dans un réseau de diffusion de contenu (CDN) disponible dans le monde entier et hébergé dans un domaine amplifyapp.com. Dans l’étape suivante, nous présenterons les fonctionnalités de déploiement en continu, en apportant des modifications à l’application React, et nous enverrons une nouvelle version à la branche principale, ce qui lancera automatiquement un nouveau déploiement.

Toutes les étapes de ce didacticiel sont éligibles à une offre gratuite.

À propos de ce didacticiel
Durée 10 minutes                                           
Coût Admissible à l’offre gratuite
Cas d’utilisation Sites Web et applications Web
Produits AWS Amplify Console
Public ciblé Développeur
Niveau Débutant
Dernière mise à jour 03/04/2018

1. Inscription à AWS

Vous devez avoir un compte AWS pour suivre ce didacticiel sur la console AWS Amplify. Dans le cade de ce didacticiel, AWS Amplify est disponible sans frais supplémentaires. Les ressources que vous créez dans ce tutoriel sont éligibles à l'offre gratuite. 

2. Confirmation de la configuration de l’environnement

Ouvrez votre interface de ligne de commande et saisissez la commande suivante :

node -v;

Si cette commande affiche une version inférieure à la v8.0, mettez à jour le nœud avec une version supérieure à la 8. Si la commande ne renvoie rien, installez le nœud à partir de nodejs.org/download.

3. Création d'une nouvelle application React

La méthode la plus simple pour créer une application React est d’utiliser la commande « create-react-app ». Installez ce paquet à l'aide de la commande suivante :

npx create-react-app amplifyapp
cd amplifyapp
npm start

4. Initialisation du référentiel GitHub

Dans cette étape, vous créerez un référentiel GitHub et déposerez votre code dans le référentiel. Vous aurez besoin d’un compte GitHub pour terminer cette étape – si vous n’en avez pas, ouvrez-en un ici

a. Créez un nouveau référentiel GitHub pour votre application (lien).

b. Initialisez Git et envoyez l’application au nouveau référentiel GitHub en exécutant les commandes suivantes dans votre interface de ligne de commande :

git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m ‘initial commit’
git push origin master

5. Connectez-vous à la console AWS Simplify

Ouvrez AWS Management Console dans une nouvelle fenêtre de navigateur afin de pouvoir continuer à consulter le guide. Lorsque cet écran se charge, saisissez votre nom d'utilisateur et votre mot de passe pour commencer. Saisissez ensuite Amplify dans la barre de recherche, et sélectionnez AWS Amplify pour ouvrir la console de service.

6. Déploiement de votre application dans AWS Amplify

Dans cette étape, vous connecterez le référentiel GitHub que vous venez de créer au service AWS Amplify. Cela vous permettra de construire, de déployer et d’héberger votre application sur AWS.

a. Sélectionnez Get Started sousDeploy.

b. Sélectionnez GitHub comme service de référentiel, puis sélectionnez Next.

c. Authentifiez-vous sur GitHub et revenez à la console Amplify. Choisissez le référentiel que vous avez créé auparavant et la branche principale, puis sélectionnez Next.

d. Acceptez les paramètres de construction par défaut et sélectionnez Next.

e. Passez en revue les informations finales puis sélectionnez Save and Deploy.

f. La console AWS Amplify Console va maintenant élaborer votre code source et déployer votre application sur https://<branchname>.<appid>.amplifyapp.com

g. Une fois la construction terminée, sélectionnez l’onglet pour afficher votre application en train de fonctionner.

tmt-react-ClickThumnail

7. Déploiement automatique des modifications de code

Dans cette étape, vous allez apporter quelques modifications au code et les envoyer à la branche principale de votre application.

a. Modifiez le fichier src/App.js.

b. Une fois la construction terminée, sélectionnez l’onglet sur la console AWS Amplify pour afficher votre application mise à jour.

tmt-react-7b-2

8. Nettoyage de vos ressources

Vous pouvez facilement mettre fin aux ressources que vous avez créées sur la console AWS Amplify. En fait, mettre fin aux ressources que vous n'utilisez plus afin de ne plus être facturé constitue une bonne pratique.

Sélectionnez Action puis Delete app. Dans la fenêtre qui s’ouvre, saisissez delete pour confirmer que vous souhaitez supprimer l’application. Votre application est maintenant supprimée.

Félicitations

Vous avez déployé une application React dans le cloud en l’intégrant à GitHub et en utilisant le console Amplify.

Avec la console AWS Amplify, vous pouvez déployer en continu votre application dans le cloud et l’héberger sur un CDN disponible dans le monde entier.

Ce didacticiel vous a-t-il été utile ?

Merci
Merci de nous indiquer ce que vous avez aimé.
Nous sommes désolés de vous décevoir.
Quelque chose est-il obsolète, déroutant ou inexact ? Aidez-nous à améliorer ce didacticiel en fournissant des commentaires.