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)

  

  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.
  

  

• 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.
  

  

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

  

  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.
  

  

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

  

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

  

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

  

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

  

• 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.