Démarrer avec AWS

Créer une application React complète

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.

Présentation

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 frontend et toutes les ressources backend 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 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.

Qu'allez-vous accomplir ?

Dans ce module, vous allez :
  • Créer une application React
  • Initialisation d'un référentiel GitHub
  • Déployer votre application avec AWS Amplify
  • Mettre en œuvre de changements de code et redéployer 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 et de maintenir et mettre à jour les relations entre les fichiers et les répertoires, les versions et les modifications apportées aux fichiers.

 Temps nécessaire

10 minutes

 Services utilisés

Mise en œuvre

  • 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
  • Dans cette étape, vous allez créer un référentiel GitHub et déposer 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.

    b. Ouvrez un nouveau terminal et naviguez jusqu'au dossier racine de votre application, par exemple amplifyapp.

    c. L'utilisation de create-react-app initialisera automatiquement le référentiel git et effectuera un premier commit. Si vous essayez de déployer une application React existante dans laquelle git n'a pas été initialisé, assurez-vous de saisir les commandes suivantes avant de continuer :

    git init
    git add .
    git commit -m "initial commit"

    d. Si vous n'avez jamais utilisé GitHub sur votre ordinateur, suivez ces étapes avant de continuer à autoriser la connexion à votre compte.

    Poussez l'application vers le nouveau référentiel GitHub en exécutant les commandes suivantes dans votre interface de ligne de commande :

    git remote add origin git@github.com:username/reponame.git
    git branch -M main
    git push -u origin main
  • Ouvrez la console de gestion AWS dans une nouvelle fenêtre de navigateur afin de garder ce guide détaillé ouvert. Lorsque l'écran s'affiche, saisissez votre nom d'utilisateur et votre mot de passe pour démarrer. Saisissez ensuite Amplify dans la barre de recherche, et sélectionnez AWS Amplify pour ouvrir la console de service.

  • 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 Mise en route sous Hébergement Amplify.

    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. 

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

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

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.

À l'étape suivante, nous créerons une version locale de l'application pour poursuivre le développement et ajouterons de nouvelles fonctionnalités.

Cette page vous a-t-elle été utile ?

Initialiser une application locale