Déployer une application web sur Amazon Amplify

GUIDE DE DÉMARRAGE

Module 1 : créer un nouveau projet Amplify

Dans ce module, vous créez une nouvelle application web et configurez Amplify.

Introduction

Dans ce module, vous créez une nouvelle application web à l'aide de React, une bibliothèque JavaScript dédiée à la création d'interfaces utilisateurs. Vous apprenez aussi comment configurer AWS Amplify pour votre premier projet.

Qu'allez-vous apprendre ?

  • Créer une nouvelle application web
  • Configurer Amplify sur votre projet

 Durée

5 minutes

 Prérequis du module

  • Compte AWS avec accès administrateur**
  • Dernière version de Chrome ou de Firefox (recommandé)

[**] Il est possible que les comptes créés au cours des dernières 24 heures n'aient pas encore accès aux services nécessaires à ce tutoriel.

Implémentation

Vérifier l'environnement

Vérifiez que vous exécutez Node.js 12.x ou une version ultérieure et npm 6.x ou une version ultérieure. Pour ce faire, exécutez node -v et npm -v dans une fenêtre du terminal/de la console. Si non, consultez les sites web nodejs et npm pour plus d'informations.

node -v

# Your output may differ based on the version installed.
12.1.1

npm -v

# Your output may differ based on the version installed.
6.14.6

L'interface de ligne de commande (CLI) Amplify est une chaîne d'outils unifiée qui permet de créer des AWS Cloud services pour votre application. Continuons et installons l'interface de ligne de commande (CLI) Amplify.

npm install -g @aws-amplify/cli

Remarque : étant donné que nous installons la CLI Amplify de manière globale, vous pourriez devoir exécuter la commande ci-dessus avec sudo, en fonction de vos politiques système.

Une fois l'installation terminée, configurez Amplify en exécutant la commande ci-dessous :

amplify configure

amplify configure ouvre un navigateur et vous invite à vous connecter à la console AWS.

Une fois que vous êtes connecté, la CLI Amplify vous invite à créer un utilisateur IAM.

Specify the AWS Region
? region:  # Your preferred region
Specify the username of the new IAM user:
? user name:  # User name for Amplify IAM user
Complete the user creation using the AWS console

Créez un utilisateur avec accès administrateur (AdministratorAccess) à votre compte pour allouer les ressources AWS pour vous, comme AppSync, Cognito, et plus encore.

gsg-build-amplify-4

Une fois l'utilisateur créé, la CLI Amplify vous invite à fournir les paramètres accessKeyId et secretAccessKey pour connecter la CLI Amplify à votre utilisateur IAM nouvellement créé.

Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default)

Successfully set up the new user.

Créer une application React

Pour créer une nouvelle application React, vous utilisez create-react-app, une chaîne d'outils qui vous permet de démarrer sans la moindre configuration requise.

Créez une application appelée amplify-app, puis initialisez-la avec amplify init :

# note npx is installed with npm
npx create-react-app amplify-app
cd amplify-app
amplify init

Lors de l'exécution d'amplify init, vous devrez fournir des informations concernant l'application. Utilisez les valeurs ci-dessous :

? Enter a name for the project amplifyapp

? Enter a name for the environment dev

? Choose your default editor: None

? Choose the type of app that you're building javascript

Please tell us about your project
? 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

Using default provider  awscloudformation

? Select the authentication method you want to use: AWS profile

? Please choose the profile you want to use amplify

Une fois que vous répondez à la dernière invite, cela crée l'infrastructure dont vous avez besoin. La sortie est similaire à ce qui suit :

⠼ Initializing project in the cloud...

CREATE_IN_PROGRESS DeploymentBucket              AWS::S3::Bucket            Fri Sep 17 2021 08:48:24 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS AuthRole                      AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole                    AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket              AWS::S3::Bucket            Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS AuthRole                      AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS UnauthRole                    AWS::IAM::Role             Fri Sep 17 2021 08:48:22 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS amplify-amplifyapp-dev-144814 AWS::CloudFormation::Stack Fri Sep 17 2021 08:48:19 GMT+0200 (South Africa Standard Time) User Initiated             
⠼ Initializing project in the cloud...

CREATE_COMPLETE AuthRole   AWS::IAM::Role Fri Sep 17 2021 08:48:38 GMT+0200 (South Africa Standard Time) 
CREATE_COMPLETE UnauthRole AWS::IAM::Role Fri Sep 17 2021 08:48:38 GMT+0200 (South Africa Standard Time) 
⠸ Initializing project in the cloud...

CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Fri Sep 17 2021 08:48:45 GMT+0200 (South Africa Standard Time) 
⠴ Initializing project in the cloud...

CREATE_COMPLETE amplify-amplifyapp-dev-144814 AWS::CloudFormation::Stack Fri Sep 17 2021 08:48:47 GMT+0200 (South Africa Standard Time) 
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

Ce que vous venez de créer

Lorsque vous exécutez amplify init pour initialiser un nouveau projet, Amplify :

  • analyse votre projet et confirme les paramètres de projet ci-dessus, notamment le profil AWS à utiliser pour allouer les ressources cloud requises pour votre application ;
  • crée un dossier appelé amplify dans le répertoire de votre projet. Ce dossier contient la configuration backend de votre application ;
  • crée un fichier appelé src/aws-exports.js dans le répertoire de votre projet. Ce fichier contient la configuration des services qu'Amplify alloue au fur et à mesure que vous ajoutez des fonctionnalités supplémentaires à votre application ;
  • crée un projet cloud pour votre application dans la console AWS Amplify, où vous pouvez afficher et gérer vos projets Amplify.
gsg-build-amplify-1

Conclusion

Dans ce module, vous avez appris à créer une application frontend React, à l'initialiser avec Amplify en vue de son déploiement dans votre compte AWS. Dans le prochain module, vous allez découvrir comment ajouter une API à votre application frontend à l'aide de GraphQL.

À suivre : connecter une API

Dites-nous si nous avons répondu à vos attentes.

Nous vous remercions pour votre commentaire
Nous sommes ravis que cette page vous ait été utile. Souhaitez-vous partager des détails supplémentaires pour nous aider à continuer à nous améliorer ?
Fermer
Nous vous remercions pour votre commentaire
Nous sommes désolés que cette page ne vous ait pas été utile. Souhaitez-vous partager des détails supplémentaires pour nous aider à continuer à nous améliorer ?
Fermer