Panorama des Technologies Web et...

Panorama des Technologies Web et Devops

Didier DONSEZUniversité Grenoble AlpesPolytech’Grenoble & LIG

IUT de Valence / L3Pro SIL CASIR / Mars 2019

Qui suis-je ?

Didier DONSEZUniversité Grenoble AlpesPolytech’Grenoble & LIG

DevOps

● Dev(elopment) – Op(eration)s● Objectifs

– TTM– MVP (Lean Startup)– Rapid Production Deployment

● Moyens– Micro-services Architectures– Continuous Integration (CI)– Continuous Delivery (CD)– Application Performance Monitoring (APM)

Le scénario DevOps

Etapes de DevOps (o)

Express

Daphnée

Frontend developerBackend developerFull stack developer

Etapes de DevOps (i)

Express

HTTP

Daphnée

Etapes de DevOps (ii)

HAProxy Express

HTTPHTTPS

Daphnée Olivier

Backup for Crash Recovery

Etapes de DevOps (iii)

Nginx

Spring

Grafana InfluxDB

metrics

HTTPHTTPSTelegraf

Agent

Momo

Etapes de DevOps (iv)

Nginx

Nginx

Spring

Spring

MySQL

Grafana InfluxDB

HTTPHTTPS

metrics

TelegrafAgent

Rémi

Etapes de DevOps (v)

Nginx

Nginx

Spring

Spring

MySQL

MySQL

Grafana InfluxDB

HTTPHTTPS

metrics

Smtp

Replication

Rémi

Wordpress

Wordpress

Smtp

Etapes de DevOps (v)

Nginx

Nginx

Spring

Spring

MySQL

MySQL

Grafana InfluxDB

HTTPHTTPS

metrics

Stripe

Replication

Serge

Etapes de DevOps (vi) SLM

HAProxy

HAProxy

Spring

Spring

MySQL

MySQL

Grafana InfluxDB

HTTPHTTPS

metrics

Stripe

Replication

Sophie

Criteo

Prestashop

Etapes de DevOps (vii)

HAProxy

HAProxy

Spring

Spring

MySQL

MySQL

Grafana InfluxDB

HTTPHTTPS

metrics

Criteo

Replication

Pierre

Trello

Prestashop

En conlusion…

• Des fonctonnalités simples : – Servir– Collecter,– Transporter,– Traiter,– Stocker… des données des diférentes sources

• … mais une architecture logicielle complexe !

La complexité… au service des propriétés non fonctonnelles

• Sécurité• Haute disponibilité• Performances• Passage à l’échelle• Agilité

Sécurité

• Objectfs : – Aucune corrupton de données– Aucun vol de données– Aucune ataque par déni de service

• Techniques mises en œuvre :– Chifrage des données – Protocoles de communicaton sécurisés – Pare-feux – Techniques logicielles contre les ataques par déni de

service– Audit/Test de sécurité

Exemple de rançon pour une base Mongo non protégée

● $ db.PLEASE_READ_ME.find()● { "_id" : ObjectId("58a7287db7dc324adb249fdf"), "info" :

"Don't panic. Your DB is in safety and backed up (check logs). To restore send 0.1 BTC and email with your server ip or domain name. Each 48 hours we erase all the data.", "amount" : "0.1 BTC", "data_we_have" : { "local" : [ "startup_log" ], "first_database" : [ "users", "preferences" ], "MyAppXXX" : [ "emails" ] }, "Bitcoin Address" : "1NSz9TRBGKHKFdjdjH2Gme3LwDi5", "email" : "xxxxx@xxxx.org" }

Haute-disponibilité

• Objectf : – Aucune interrupton de service

• Techniques mises en œuvre :– Monitoring – Détecton de fautes – Protocoles de réplicaton – Mécanismes de redondance – Mécanismes de « fail-over »– Circuit Breakers– Equilibreur de charge– Testers de résilience

Performances

• Objectf : – Réducton du coût d’infrastructure IaaS– Respect des SLA

• Techniques mises en œuvre :– Monitoring– Performance Debugging

Detecton des contentons sur les verroux N Copy Placement multicoeurs (Thread pinning)

– Equilibreur de charge– SLA Monitoring

Passage à l’Echelle

• Objectf : – Supporter des variatons dans la charge– en minimisant les coûts d’infrastructure ou d’énergie

• Techniques mises en œuvre :– Monitoring– Sharding– N Copy – Elastcité dynamique– Cloud hybride (cloud burstng)

Agilité

• Objectf – Time To Market– Philosophie « Minimal Viable Product » du Lean Startup

• Techniques mises en œuvre :– DevOps

Service immédiatement en producton Blue – Green Deployment

● Rolling Update● Fast rollback

● A/B Testng ou Split Testng Micro-services Serverless Architecture

Les grands composants● Database Systems

– SQL does not fit all !– NoSQL is not unique !

● Backends– Servent des ressources REST

● Frontends– Implémente une SPA

● Tooling– IDE & Forge

Data Models & Database SystemsOne does not fit all !

SQL● Oracle, MySQL/MariaDB,

Postgres, HSQL ...

NoSQL (Not 1 NF)● File Systems

– HDFS

● Table– Hbase (Big Table)

● Directories (LDAP)● Key-Value Stores

– Cassandra, Redis, Memcached, ...

● Document-oriented DB– MongoDB, CouchDB, ...

● ….

● Graph-oriented DB– Neo4J, ...

● Time-Series DB– OpenTSDB, InfluxDB, …

● Text Oriented– Lucene, OpenNLP, ElasticSearch– Geolocation

● GIS, Geo extensopns in MongoDB, Postgres, MySQL, ...

– Streams● Kafka, Flume

Performance● In-memory DB– MySQL Cluster, Redis, ...

Database SystemsMultiple Data Models

Gestionnaires de fonctions● Exemple

– CMS– Micro-Blogging– Ticketing / Issue Tracking– Shopping– ERP– Enterprise Social Network (ESN)– Newletter Campaign– …

● Notes– Utilise le propre systême de persistence– Expose une API (REST)– Disponible via un container Docker (Démo Wordpress)

CAP Theorem (Brewer)

• Un SD ne peut garantr qu’au max. 2 propriétés

RESTFul Services● Principles des services REST

– Hiérarchie d’URLs● /product● /product/12345● /user● /user/didier

– CRUD appliqué à HTTP● C(reate) → PUT● R(etrieve) → GET● U(pdate) → POST (or PUT for full update)● D(elete) → DELETE

● Description– OpenAPI (Swagger)

● Voir http://editor.swagger.io

Frontends & Backends● Tendance architecture

– Frontend SPA (Single Page Application)● Angular 2+, React, VueJS …

– Backend RESTFul● Remark : services Pub-Sub (websocket, PubNub, Firebase …)

● Misc.– Full Stacks (Backend Node.js)

● MEAN, Sails, Meteor …– Voir le comparatif live http://todomvc.com/

– API Gateway– Application

● Electron, Cordova

Thèmes Frontend Web● Thème Dashboard

– Organisation type tableau de bord– Regroupe des libs js dont Bootstrap– Boilerplate pour des canevas Full stack.

● Avantages– Permet de se passer d’un Web Designer (dans un premier

temps)– Gain de temps de dev.– Ergonomie connue.

● 20+ assez connus– Gentelella (11400 stars sur GitHub), SB Admin2, …

● https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/

Thèmes Frontend Web

● Ergonomie Web– Bootstrap– Material Design– Ionic– ...

● Avantages– Web Responsive– Mobile interaction– Mobile sensor integration (camera, NFC, GPS ...)– …

Dashboard Gentelella

Dashboard SB Admin 2

Ngx Admin (Angular 2+)

APMApplication Performance Monitoring

● Motivation– Supervision de l’infrastructure et des

applications– Recherche des « goulots d’étranglement »

● Techniques– Identification des événements– Centralisation des journaux d’événements– Visualisation (temps-réel) des journaux

APM consoles

● Connexion temps réel à des TSDBs– Customisable, Snippets intégrables

Demo Datadoghttps://www.youtube.com/watch?v=mpuVItJSFMc

Architecture Cloud● On-Demand Computing

– Scalabilité dynamique– Pay-per-use, Plan, Auction (AWS spot instance)

● Public, Privé, Hybride● Providers : FaaS, IaaS, PaaS, CaaS, SaaS● Gestionnaire de clusters privés (OpenStack, Mesos)● Gestionnaire de clusters containers (CaaS, Swarm,

Kubernetes)● Virtualisation vs Containerisation

Virtual Machines and Containers

● Voir cours Docker

Docker Modus operandi

Tooling DevOps● Jenkins – Gitlab● Ansible – Puppet – Chef -Cloudify● Openshift (Redhat)● Tools : gulp, npm, grunt, bower, yeoman, webpack,

browserify, maven, graddle, ant, …● Netflix OSS (Simian Army)● IDE : Eclipse, IntelliJ IDEA, Netbeans, Atoms, Chrome

Devtools● Q&A : SonarQube

JHipster (Generator)

● Domain– Microservice(s) + Single Web Page Application

● Model : JDL (~UML with pagination pragmas)– JDL Studio

● Generator (and sub-generators with yeoman)– Frontend : Angular X, React, Vue, Ionic – Backend : Spring

● Monolithe ou Micro-Services (API Gateway, Swagger)● Authentication, Rate Limit, ...● Databases : SQLs, Cassandra, MongoDB, Elastic, Kafka

– Devops● Docker containers, CD/CI, Cloud deployment (Heroku,,GCE, AWS, Azure ….)● Load injection, APM (Metrics, ELK)● QA (SonarCube) ...

The JHipster MicroService Architecture