Mise en route avec AWS

Développer une application React

Créer une application Web simple avec AWS Amplify

Introduction
héberger une application react
initialiser une application locale
ajouter une authentification
ajouter une api et une base de données
augmenter la capacité de stockage

Module 2 : Initialiser une application Amplify locale

Dans ce module, vous installerez et configurerez l'interface de ligne de commande (CLI) Amplify.

Introduction

Maintenant que nous avons initialisé un nouveau projet Amplify sur notre compte, nous voulons le faire descendre dans notre environnement local afin de pouvoir poursuivre son développement et ajouter de nouvelles fonctionnalités.

Dans ce module, vous installerez l'interface en ligne de commande d'AWS Amplify et initialiserez le projet Amplify à l'aide de l’interface de ligne de commande.

Opérations que vous allez apprendre à effectuer

  • Installez et configurez la CLI AWS
  • Initialisez l'application Amplify

Concepts clés

Interface de ligne de commande Amplify – L’interface de ligne de commande Amplify vous permet de créer, de gérer et de supprimer des services AWS directement à partir de votre terminal.

 Durée nécessaire

5 minutes

 Services utilisés

AWS Amplify

Mise en œuvre

  • L'interface de ligne de commande (CLI) Amplify est une chaîne d'outils unifiée permettant de créer des services AWS Cloud pour votre application, en suivant un flux de travail simple et guidé. Installons maintenant l’interface de ligne de commande Amplify en utilisant l'invite de commande (Windows) ou le terminal (macOS). REMARQUE : cette commande peut être exécutée dans n'importe quel répertoire de votre invite de commande/terminal car le « -g » indique que le binaire sera installé globalement sur votre système.

    npm install -g @aws-amplify/cli

  • Amazon IAM (Identity and Access Management) vous permet de gérer les utilisateurs et les autorisations d'accès dans AWS. L’interface de ligne de commande utilise IAM pour créer et gérer des services programmatiques en votre nom via l’interface de ligne de commande.

    Pour configurer l’interface de ligne de commande, exécutez la commande de configuration. Pour voir une démonstration vidéo du processus de configuration de l’interface de ligne de commande, cliquez ici.

    amplify configure

  • Ensuite, nous initialiserons une application localement. Comme nous avons déjà créé un projet Amplify, nous pouvons utiliser la configuration de l'application qui a déjà été créée.

    a. Dans la console Amplify, cliquez sur Environnements Back-end.

    b. Dans l'onglet Environnement Back-end, copiez la commande amplify init sur votre clavier.

    c. Initialisez le projet Amplify localement avec les commandes ci-dessous.

    REMARQUE : assurez-vous que le profil que vous choisissez a été configuré en utilisant la même région que le projet Amplify que vous avez déjà déployé.

    amplify init --appId your-app-id

? Enter a name for the project: amplifyapp
? Enter a name for the environment: dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that youre building: javascript
? What javascript framework are you using: react
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
? Do you want to use an AWS profile? Y
? Please choose the profile you want to use: your-aws-profile

Conclusion

Vous venez d'initialiser le projet Amplify et vous êtes maintenant prêt à commencer l'ajout de fonctionnalités ! Dans le prochain module, nous ajouterons un flux complet d'authentification des utilisateurs avec seulement quelques lignes de code.

Pour afficher votre projet Amplify dans le tableau de bord à tout moment, vous pouvez maintenant exécuter la commande suivante :

amplify console

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

 Commentaire
Démarrer le module 3

Ajouter une authentification