Dans cet article, nous vous expliquons comment créer une application sans serveur avec Serverless Framework, la déployer dans le cloud et créer une interface utilisateur à l'aide de KendoReact.

Serverless est un modèle d'exécution qui permet aux fournisseurs de cloud d'innover. allouez des ressources au niveau de la fonction dans votre code plutôt que dans l'ensemble de l'application. Cela constitue un moyen plus économique et plus flexible d’exécuter votre application dans le nuage.

Parmi les plates-formes sans serveur les plus largement utilisées sont Amazon Lambda, les fonctions Google Cloud, les fonctions Microsoft Azure et IBM OpenWhisk.

Le modèle gagne en popularité du fait de quelques avantages par rapport aux applications en nuage traditionnelles:

• Coût faible et grande flexibilité: les plates-formes sans serveur fournissent automatiquement le matériel optimal pour exécuter votre code lorsqu’elles sont déclenchées
• Faible coût: Fournisseurs sans serveur facturez le temps que vos fonctions passent à courir; vous payez moins s'il y a moins de trafic sur votre application; vous payez également moins si vos fonctions fonctionnent rapidement
• Elles se déplacent de l’infrastructure cloud à l’application: vous n’êtes pas obligé de gérer ou de maintenir vos propres serveurs, ce qui vous permet de vous concentrer plus facilement sur votre application

Serverless Framework est un projet open source qui vous permet d’abstraire le fournisseur spécifique sans serveur et d’écrire votre application de la même manière sur toutes les plates-formes cloud. Serverless Framework ajoute la portabilité du fournisseur de cloud à la liste déjà impressionnante des avantages du modèle sans serveur.

Dans cet article, nous vous expliquons comment créer une application sans serveur avec Serverless Framework. Ceci est réalisable avec à peu près toutes les plateformes sans serveur, y compris Progress Kinvey mais dans cet exemple, nous allons le déployer sur Amazon Lambda, puis créer une interface utilisateur à l'aide de KendoReact.

KendoReact

Progress KendoReact est une bibliothèque de composants d'interface utilisateur natifs créés spécifiquement pour le développement de React. KendoReact n'a pas de dépendances et fournit un ensemble de composants d'interface utilisateur natifs optimisés pour React. En tant que tel, nous pouvons utiliser KendoReact pour simplifier et accélérer le développement d'interface utilisateur pour les applications sans serveur.

Présentation du projet

Dans cet article, nous créons un simple temporisateur Pomodoro à l'aide de KendoReact et Serverless. Si vous êtes nouveau dans la technique de Pomodoro, vous pouvez en lire plus ici ici .

Nous créons une interface simple pour démarrer et arrêter les minuteries Pomodoro et lister les minuteries récemment terminées. Les événements sont suivis dans une base de données AWS DynamoDB . Nous utilisons des composants KendoReact dans l'interface utilisateur.

Nous vous expliquerons l'installation des dépendances, la création du backend et du front-end, ainsi que le déploiement du projet sur AWS Lambda.

Dépendances

Backend

Tout d'abord, configurez les informations d'identification de votre compte Amazon Web Services (AWS). Si vous n'en avez pas, inscrivez-vous sur le site Web AWS ici . Une fois que vous avez les informations d'identification, configurez-les avec l'interface de commande AWS (AWS CLI). Les instructions pour le faire sont ici . Pour que la configuration soit aussi simple que possible, votre compte AWS doit disposer des informations d'identification de l'administrateur. Si vous utilisez l'AWS CLI pour la première fois, configurez-le selon les instructions .

Ensuite, assurez-vous d'avoir installé Node.js . Au moment de l'écriture, la dernière version stable de Node.js est 10.15.0. L'installation de Node.js installe également la dernière version de npm.

Enfin, installez Serverless Framework en suivant les instructions répertoriées dans l'article Prise en main de Serverless .

Frontend

. pour l'interface du projet sont similaires à l'arrière-plan:

• Node.js (au moment d'écrire ces lignes, la dernière version date du 10.15.0)
• npm (inclus avec Node.js)
• create -react-app incluse dans les versions modernes de Node.js
• KendoReact, que nous ajouterons plus tard

Création du backend pour l'application sans serveur

Assurez-vous d'avoir enregistré vos informations d'identification AWS. correctement. Serverless les utilise pour accéder au fournisseur de cloud, comme détaillé dans la section Dépendances.

Créez votre structure de back-end en utilisant la commande suivante:

 $ serverless create -t ​​aws-nodejs -p backend 

Cette commande produit un backend. répertoire contenant deux fichiers, handler.js et serverless.yml :

 $ tree
.
├── backend
├── ├── handler.js
└── └── serverless.yml 

handler.js contient le code de notre serveur. serverless.yml déclare toute l'infrastructure nécessaire à notre système.

Nous commençons par définir deux fonctions: une pour récupérer les entrées Pomodoro enregistrées et l'autre pour créer un nouveau temporisateur Pomodoro. Remplacez le contenu actuel dans handler.js par le code suivant:

 module.exports.getPomodoros = async (événement, contexte) => {
  // récupère tous les pomodoros de la table DynamoDB
  const pomodoros = wait documentClient
    .scan ({TableName: "pomodoros"})
    .promettre();

  réponse de retour (JSON.stringify ({pomodoros}));
};

module.exports.postPomodoro = async (événement, contexte) => {
  const Item = JSON.parse (event.body);
  wait documentClient.put ({
    TableName: "pomodoros",
    Article
  })
  .promettre();

  réponse de retour (JSON.stringify ({Item}));
}; 

Les deux fonctions accèdent au tableau pomodoros via l'objet documentClient . Il s'agit d'un mappage fourni par la bibliothèque JavaScript AWS DynamoDB. Nous déclarons le mappage dans le même fichier au-dessus des fonctions:

 const AWS = require ("aws-sdk");
const documentClient = new AWS.DynamoDB.DocumentClient (); 

Grâce à cela, nous pouvons accéder aux tables DynamoDB. Nous définissons également la fonction de réponse avec les en-têtes CORS nécessaires au fonctionnement du serveur et du client:

 const response = body => ({
  // retourne les en-têtes CORS dans la réponse, sans que cela
  // ne fonctionnerait pas depuis le navigateur
  en-têtes: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Credentials": true
  },
  statusCode: 200,
  corps
Ceci complète le fichier  handler.js . Ensuite, nous exposons les deux fonctions de notre gestionnaire au monde extérieur via le fichier  serverless.yml . Nous ajoutons d’abord les définitions de fonctions, en remplaçant tout ce que vous avez dans la section des fonctions: 


  getPomodoros:
    gestionnaire: handler.getPomodoros
    événements:
      - http:
        chemin: /
        méthode: GET
        cors: vrai
  postPomodoro:
    gestionnaire: handler.postPomodoro
    événements:
      - http:
        chemin: / add
        méthode: POST
        cors: vrai
 Deuxièmement, nous définissons la base de données DynamoDB:

  Ressources:
    # DynamoDB Table pour les entrées de pomodoro
    Table Pomodoros:
      Type: AWS :: DynamoDB :: Table
      Propriétés:
        TableName: pomodoros
        AttributeDefinitions:
          - AttributeName: nom
            AttributeType: S
        KeySchema:
          - AttributeName: nom
            Type de clé: HASH
        ProvisionedThroughput:
          ReadCapacityUnits: 2
          WriteCapacityUnits: 2
 Enfin, nous définissons un emplacement où persister  stack.json  - Voici comment le serveur sait plus tard où chercher notre application dorsale:
 plugins:
  - serverless-stack-output

Douane:
  sortie:
    # Enregistrer les URL de points de terminaison sur stack.json dans la source frontend
    # répertoire
    fichier: ../frontend/src/stack.json
C'est ça! Nous pouvons maintenant installer toutes les dépendances et déployer notre backend Serverless vers Amazon Lambda. Commencez par installer le plug-in indiqué ci-dessus:
 $ serverless plugin install --name serverless-stack-output 
puis
   
 $ npm install 
 et deploy:
 $ npm run deploy # ou serverless deploy 
 Et après quelques minutes:
 $ npm run deploy

> déploiement sans serveur

Serverless: service de packaging ...
Serverless: Exclure les dépendances de développement ...
Serverless: Créer une pile ...
Serverless: Checking Stack crée des progrès ...
.....
Serverless: Stack Create terminé ...
Serverless: Téléchargement du fichier CloudFormation sur S3 ...
Serverless: Télécharger des artefacts ...
Serverless: Téléchargement du fichier .zip du service sur S3 (3.53 KB) ...
Serverless: validation du modèle ...
Serverless: Mise à jour de la pile ...
Serverless: Vérification de la progression de la mise à jour de la pile ...
.................................................. ....
Serverless: mise à jour de la pile terminée ...
Des informations de service
service: serverless-kendo-pomodoro
étape: dev
région: us-east-1
pile: serverless-kendo-pomodoro-dev
clés api:
  Aucun
points finaux:
  GET - https://pyjsahfuk7.execute-api.us-east-1.amazonaws.com/dev/
  POST - https://pyjsahfuk7.execute-api.us-east-1.amazonaws.com/dev/add
les fonctions:
  getPomodoros: serveur sans-kendo-pomodoro-dev-getPomodoros
  postPomodoro: serveur sans-kendo-pomodoro-dev-postPomodoro
Serverless: Stack Sortie enregistrée dans le fichier: ../frontend/src/stack.json[19659031HERNotrebackendestdéployésurAWS!Noussommesprêtspourlaprochaineétape

 Nettoyage 
 Serverless Framework crée des ressources AWS pour vous. Une fois que vous avez terminé de configurer l'application Serverless et de travailler avec son interface, supprimez toutes les ressources créées en exécutant  $ serverless remove  dans le répertoire principal afin d'éviter des charges AWS inattendues pour votre compte. 
 Création de l'interface pour l'application sans serveur 
 Le moyen le plus simple de créer une structure pour l'interface consiste à utiliser l'utilitaire create-react-app. Exécutez cette commande: 
 $ npx create-react-app frontend 
 L’interface se compose de deux composants:
 Le principal est . C'est toute la logique pour communiquer avec le serveur via des requêtes HTTP et restituer les données extraites du serveur.
    est utilisé pour mesurer le temps.
 Pour le composant  App nous utilisons les composants  Grid  et  GridColumn  de KendoReact. Commencez par installer et sauvegarder les paquets:
 $ npm install --save @ progress / kendo-react-grid 
                     @ progress / kendo-data-query 
                     @ progress / kendo-react-input 
                     @ progress / kendo-react-intl 
                     @ progress / kendo-react-dropdowns 
                     @ progress / kendo-react-dateinputs 
 Ajoutez-le à la section d'importation de  App.js :
 import {Grid, GridColumn} de "@ progress / kendo-react-grid"; 19659031] Et remplacez l'actuel 
  par ce qui suit: 


  
 KendoReact Pomodoros sans serveur 
  
  
    
    
    
  
 
 Ici, nous utilisons un tableau simple pour montrer les temporisateurs Pomodoro que nous avons déjà terminés, en référence à un composant  Timer  qui a toute la logique pour mesurer le temps passé dans les Pomodoros et entre
 Le composant  Timer  utilise les composants  RadialGauge  Input  et  Button  KendoReact, et vous pouvez voir toute sa logique.  ici .
 L’interface utilise  stack.json  pour déterminer le détail du point final auquel elle est connectée. Ce fichier est généré lors du déploiement du backend.  Il est important de déployer le serveur avant d'exécuter le serveur. 
 Une fois le serveur utilisé, nous analysons le noeud final dans  App.js :
 import {ServiceEndpoint}. from "./stack.json";
Le code base de notre interface est petit maintenant que KendoReact implémente tous les composants. Nous pouvons nous concentrer sur la définition de la logique métier et sur la présentation claire des données.
 Nous ne couvrirons pas tout le code frontal dans cet article, car de nombreuses informations sont fournies par Create React App. Vous pouvez trouver la base de code frontale complète  ici . Clonez ce dépôt avant de continuer.
 Exécution du serveur
 Une fois le serveur prêt, et une fois le serveur déployé, vous pouvez exécuter le serveur localement en exécutant les commandes suivantes dans le répertoire du serveur:
 $ npm install 
 Alors:
 $ npm start 
 Ensuite, l'interface est accessible à l'adresse  localhost: 3000  dans votre navigateur. Essayez d'ajouter quelques pomodoros:
 
 Notez les transitions en douceur dans les champs fournis par KendoReact sans code supplémentaire de notre côté:
  [19659003] C'est ça! Notre minuterie Pomodoro est prête pour un temps productif.
 Conclusion
 Comme nous l'avons vu, il est facile de faire fonctionner ensemble KendoReact et Serverless. La configuration d'une application React pour utiliser un serveur sans serveur nécessite uniquement un fichier  serverless.yml  et un fichier  stack.json . Il y a beaucoup de choses que vous pouvez faire avec un serveur sans serveur.
 KendoReact fournit des composants pratiques à utiliser dans de nombreuses situations. Nous avons utilisé des grilles, des boutons et des champs de texte dans cet article, mais il en existe de nombreux autres, notamment des outils pour l'animation, les interfaces utilisateur de conversation, le traitement des fichiers PDF, etc.
 Serverless est un excellent moyen de créer des applications simples et évolutives. API et automatiser le déploiement de l'infrastructure requise pour ces API. En savoir plus sur le cadre sans serveur  ici . Si vous souhaitez en savoir plus sur le fonctionnement du processus de déploiement Serverless sur AWS, accédez au site  ici . Comme je l'ai mentionné précédemment, bien que nous utilisions AWS dans cet exemple, vous auriez pu également utiliser une plate-forme telle que Kinvey, sur laquelle vous pouvez en savoir plus sur  ici .
 En savoir plus sur les composants KendoReact  ] ici . La documentation sur des composants spécifiques inclus dans KendoReact est  ici . Et  ici  explique comment installer KendoReact.
 Comment votre configuration a-t-elle fonctionné avec Serverless et KendoReact? Faites-le-nous savoir dans les commentaires!
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
Articles similaires