Mise en route avec AWS

Développer une application React

Créer une application Web simple avec AWS Amplify

Module 1 : Déployer et héberger une application React

Dans ce module, vous allez créer une application React et la déployer dans le cloud en utilisant le service d'hébergement Web AWS Amplify.

Introduction

AWS Amplify fournit un flux de travail complet pour la création, 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, et déploie automatiquement les mises à jour à chaque dépôt de code.

Dans ce module, nous allons créer une application React et l’envoyer à un référentiel GitHub. Ensuite, nous connecterons le référentiel à l’hébergeur Web AWS Amplify 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.

Opérations que vous allez apprendre à effectuer

  • Création d'une application React
  • Initialisation d'un référentiel GitHub
  • Déploiement de votre application avec AWS Amplify
  • Mise en œuvre de changements de code et redéploiement de votre application

Concepts clés

Application React : React est un cadre d'application Web qui permet aux développeurs de créer rapidement des applications monopages performantes en utilisant JavaScript.

Git : un système de contrôle de version qui permet aux développeurs de stocker des fichiers ainsi que de maintenir et de mettre à jour les relations entre les fichiers et les répertoires, les versions et les modifications apportées aux fichiers.

 Durée nécessaire

10 minutes

 Services utilisés

Mise en œuvre

  • Création d'une 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 en utilisant la commande suivante dans votre invite de commande ou votre terminal :

    npx create-react-app amplifyapp
    cd amplifyapp
    npm start
  • 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, inscrivez-vous ici.

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

    Front End GitHub Repository Module 1

    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
  • Connexion à AWS Management Console

    Ouvrez AWS Management Console dans une nouvelle fenêtre de navigateur afin de garder le guide ouvert. 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.

    Front End AWS Console Find Amplify Module 1
  • Déployer votre application avec 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. Dans la console de service AWS Amplify, sélectionnez « Démarrer » sous Déployer.

    Front End Amplify Deploy Module 1

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

    Front End Amplify GitHub Module 1.png

    c. Authentifiez-vous sur GitHub et revenez à la console Amplify. Choisissez le référentiel et la branche principale créés précédemment, puis sélectionnez Suivant.

    Front End GitHub Add Repository Module 1.png

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

    Front End GitHub Add Repository2 Module 1.png

    e. Passez en revue les informations finales, puis sélectionnez Enregistrer et déployer.

    Front End GitHub Add Repository3 Module 1.png

    f. AWS Amplify va maintenant créer votre code source et déployer votre application sur https://...amplifyapp.com.

    Front End Amplify Deploy Source Module 1

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

    Front End Initial App Module 1
  • Déploiement automatique des modifications de code

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

    a. Modifiez src/App.js avec le code ci-dessous et enregistrez.

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1>Hello from V2</h1>
          </header>
        </div>
      );
    }
    
    export default App;

    b. Envoyez les modifications à GitHub dans l'invite de commande (Windows) ou Terminal (macOS) pour lancer automatiquement une nouvelle version : 

    git add .
    git commit -m “changes for v2”
    git push origin master

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

    Front End HelloV2 App Module 1

Conclusion

Vous avez déployé une application React dans le Cloud AWS en l’intégrant à GitHub et en utilisant AWS Amplify. Avec 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.

Ensuite, nous allons créer une version locale de l'application pour poursuivre le développement et ajouter de nouvelles fonctionnalités.

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

Merci
Merci de nous indiquer ce que vous avez aimé.
Fermer
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.
Fermer

Initialiser une application locale