Cours 1/3 "Architecture Web"
Upcoming SlideShare
Loading in...5
×
 

Cours 1/3 "Architecture Web"

on

  • 6,372 views

Cours de 1h30 pour HETIC - H4. ...

Cours de 1h30 pour HETIC - H4.
Architecture Web.
Présentation générale de l'architecture web, bons et mauvais exemples.
Présentation des load balancers & proxys
Présentation des caches (memcached, varnish...)
Cloud

Statistics

Views

Total Views
6,372
Views on SlideShare
6,372
Embed Views
0

Actions

Likes
3
Downloads
164
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Cours 1/3 "Architecture Web" Cours 1/3 "Architecture Web" Presentation Transcript

    • ARCHITECTUREWEBWEB Cours 1
    • moi :)Maxime Topolov (@mtopolov)CTO & Co-Fondateur de Adyax (@adyax)Dans le dev/archi/web depuis 1995mtopolov@adyax.com
    • VOUS ?
    • Ce que vous n’allez pas apprendre avec moi
    • Debugger un dimanche soir, la config des caches sur fft.fr pendant la finale du Rolland Garros
    • Ni comment expliquer à un client que 15 millions de pages vues ne passeront pas sur un serveur chez OVH
    • Même pas comment corriger le merdier laissé par le précédent architecte, “parti pour de nouveaux horizons”
    • InternetInternet est la structure technique surlaquelle est construit le WEB. Certainscomposants sont essentiels : DNS -permettant à un humain de trouver un siteet le TCP - protocole permettant lacommunication entre un navigateur et unserveur
    • Architecture ?
    • Un architecte ?C’est pas une starIl n’est pas obligé detout connaitreIl est obligé d’ensavoir un peu sur toutCe n’est pas un sys-admin
    • Il y a 2 manières de concevoir une application : soit de la manière la plus simple qu’il soit, il est alors évident qu’il n’y a pas d’anomalies, soit de la manière la plus complexe, il n’est alors pas évident de trouver les anomalies. La première méthode est de loin la plus complexe...
    • Architecture web ?Flux : qui parle à qui et en quelle langue ?Soft : quels composants logiciels je vais utiliser etpourquoi ?Hard : quels machines choisir pour quel usage ?Combien : couts, nombre de machines, bandepassante, jours-hommeMagic : optimisation, tunning & debug
    • Mauvaise architecture
    • Mauvaise architectureSite lent = perte de revenuSite tombe lors de pic detrafic = perte de revenuBugs aléatoires =charges d’audit et correctifsCompensation hard =perte de marge
    • Da QuizzSi votre site affiche un taux dedisponibilité (dans la moyennemondiale) de 97,8 % combien detemps est-il indisponible sur uneannée ?
    • Da QuizzA : 2,2 JoursB : 8 heuresC : 8 joursD : 2200 secondes
    • Et la bonne réponse est 8 jours ! Donc, si votre site e-commerce fait 100K€ par jour (CA annuel de 36M€ = tous les sites e- commerce dans le top 25 France)... Vous perdez 800.000 € par an... Salaire d’un bon architecte web : 50K€
    • Taux de disponibilitéSe calcule en pourcentagesVarie entre 95% et 99,999%365 jours x 24 heures x 3600 secondes =31.536.000 secondesUn taux de X% = X*31.536.000/100/3.600heures d’indisponibilité
    • Temps de chargement1 seconde de temps de chargementsupplémentaire correspond à 7% de tauxd’abandonAvec notre site à 100K€ par jour celacorrespond à 2,5M€ de pertes de CA par an!Pas besoin d’avoir du gros trafic pour avoir unsite lent !
    • Couts cachésDétérioration de l’image de marqueNombre d’appels plus importants au supportCouts de développements induitsAugmentation des couts (personnel, hard, bandepassante, CDN...)ROI des campagnes publicitaires en baisseImpacts écologiques...
    • Exemple
    • France.frMauvaise architecture3 mois de site hors-ligne après le lancementImage de la France écornéeDifficulté à placer Drupal sur plusieurs appelsd’offresImpacts se chiffrant en millions d’euros
    • Contre-exemple
    • Quelques chiffres29 millions de visiteurs uniques par mois100 millions de pages vues par jour8.000 recherches par secondeTaux de disponibilité : 99,65 %Temps d’affichage : 6 secondesCA : 60.000.000 USD
    • Comment faire 7M$ en 13 mois ?Durée des travaux : 13 moisTaux de disponibilité : 99,65% -> 99,97%Temps de chargement : 6 sec -> 1,2 secChiffre d’affaires : +12% = +7,2M$
    • Architecture web ?
    • Da QuizzQuels sont les étapes pour chargerune page web depuis la saisie d’uneURL dans le navigateur jusqu’à sontaffichage complet ?
    • ETAPE OUTILS PROBLEMESEtablissement dune connexion TCP Navigateur Web Négociation TCPEnvoi de la requête vers lopérateur Box / DSLAM RoutageRécupération de ladresse IP DNS Problèmes DNSRoutage vers les serveurs Switchs La chine ? Cest où ? Etape supplémentaire, puissanceLoad balancing F5, Varnish, Ngnix, IIS machineServeurs de cache F5, Varnish, Ngnix, IIS Cache miss, puissance machine Mauvaise configuration, puissanceServeurs applicatifs IIS, Apache, Rails, Java machine Requêtes lentes/inutiles, puissanceBase de données MySQL, PostGre, MSSQL machineConstruction de la page HTML Drupal, RoR, ASP.NET, PHP… Lourdeur du CMS/FrameworkCompression de la page gZip :) …Envoi du flux par paquets TCP IIS, Apache, Rails, Java Lourdeur des pagesRoutage Switchs …Génération visuelle de du résultat à Navigateur Web Complexité de structurepartir du HTMLChargement des images Navigateur Web Lourdeur/nombre des images Complexité vs Puissance machineExécution du JavaScript Navigateur Web localeChargement des ressources Attente des services avant Navigateur Webexternes dafficher
    • traceroutetraceroute to www.google.com (173.194.34.18), 64 hops max, 52 byte packets 1 85-171-156-1.rev.numericable.fr (85.171.156.1) 24.643 ms 17.714 ms 13.625 ms 2 * * * 3 ip-185.net-80-236-8.asnieres.rev.numericable.fr (80.236.8.185) 17.179 ms 21.223 ms 9.897 ms 4172.19.128.170 (172.19.128.170) 17.496 ms 15.597 ms 21.259 ms 5 ip-161.net-80-236-1.static.numericable.fr (80.236.1.161) 14.616 ms 16.182 ms 61.046 ms 6 72.14.239.145(72.14.239.145) 25.932 ms 19.269 ms 12.210 ms 7 209.85.242.45 (209.85.242.45) 14.380 ms26.051 ms 25.651 ms 8 par03s02-in-f18.1e100.net (173.194.34.18) 15.521 ms 22.093 ms21.382 ms 8 étapes pour arriver chez Google Jusqu’à 200ms pour certains paquets Problèmes réseau avec ma box (2 * * * )
    • Da Quizz Hetic !
    • Quelques chiffresTemps de chargement total de la page ?Nombre d’objets à charger (et donc derequêtes à faire) ?Poids total de la page ?
    • Les «bonnes» réponses Temps de chargement : 7 secondes Nombre d’objets : 177 Poids total : 2,57 Mo
    • Il y a de quoi faire...
    • Front-End & Back-endComposants classiques d’une application web
    • Load BalancerFront 1 Front 2 Front 3 ... Files DB 1 DB 2 ...
    • Front-endRépond à la requête de l’utilisateur = génèrele HTML, XML, JSON, ... demandéServeur Web : Apache, IIS, NGnix,Lighthttpd, Puma, ThinCache statique : Varnish, MemcachedCode de l’application : PHP, RoR, Java,Python...
    • Back-endBase de données la plupart du temps(MySQL, MongoDB, Oracle, MSSQL, etc...)Moteur de recherche (SOLR, Sphinx, ...)
    • Load balancers & Proxys
    • Load balancerPeut être matériel ou logicielAttention au Single Point Of FailureSouvent les LB sont de la résponsabilité del’hébergeurDifficiles à scaler
    • ProxyServent à la sécuritéTrafic anonymeLogs de traficAccélération (cache internet d’un sous réseau)
    • Pour résumer
    • CachesS’il y a un chapitre a suivre c’est celui-là
    • Pourquoi cacher ?Eviter de refaire un travail déjà effectuéPour aller viteParce que la RAM ne coute pas cherParce que on ne code pas de sites en C++
    • Quels caches on a :Dans les équipements réseau (DNS,Routeurs)Interne à une application (Memcached, Redis)Au niveau de la base de donnéesAu niveau des scripts PHP (APC,eAccelerator)Devant un serveur web (Varnish, Apache)
    • Cache interne à l’applicationOn cache un résultat intermédiaire lors de lagénération d’une page (liste descommentaires)On cache ce qui peut être commun à plusieurspages (menu principal)On cache pour ne pas stocker en base(sessions des utilisateurs)
    • SELECT DISTINCT n.nid, n.uid, n.title, n.type, e.event_start, e.event_start ASevent_start_orig, e.event_end, e.event_end AS event_end_orig, e.timezone, e.has_time,e.has_end_date, tz.offset AS offset, tz.offset_dst AS offset_dst, tz.dst_region,tz.is_dst, e.event_start - INTERVAL IF(tz.is_dst, tz.offset_dst, tz.offset) HOUR_SECONDAS event_start_utc, e.event_end - INTERVAL IF(tz.is_dst, tz.offset_dst, tz.offset)HOUR_SECOND AS event_end_utc, e.event_start - INTERVAL IF(tz.is_dst, tz.offset_dst,tz.offset) HOUR_SECOND + INTERVAL 0 SECOND AS event_start_user, e.event_end - INTERVALIF(tz.is_dst, tz.offset_dst, tz.offset) HOUR_SECOND + INTERVAL 0 SECOND ASevent_end_user, e.event_start - INTERVAL IF(tz.is_dst, tz.offset_dst, tz.offset)HOUR_SECOND + INTERVAL 0 SECOND AS event_start_site, e.event_end - INTERVALIF(tz.is_dst, tz.offset_dst, tz.offset) HOUR_SECOND + INTERVAL 0 SECOND ASevent_end_site, tz.name as timezone_name FROM node nINNER JOIN event e ON n.nid = e.nidINNER JOIN event_timezones tz ON tz.timezone = e.timezoneINNER JOIN node_access na ON na.nid = n.nidLEFT JOIN domain_access da ON n.nid = da.nidLEFT JOIN node i18n ON n.tnid > 0 AND n.tnid = i18n.tnid AND i18n.language = enWHERE (na.grant_view >= 1 AND ((na.gid = 0 AND na.realm = all))) AND ((da.realm ="domain_id" AND da.gid = 4) OR (da.realm = "domain_site" AND da.gid = 0)) AND(n.language =en OR n.language = OR n.language IS NULL OR n.language = is ANDi18n.nid IS NULL) AND ( n.status = 1 AND ((e.event_start >= 2010-01-31 00:00:00 ANDe.event_start <= 2010-03-01 23:59:59) OR (e.event_end >= 2010-01-31 00:00:00 ANDe.event_end <= 2010-03-01 23:59:59) OR (e.event_start <= 2010-01-31 00:00:00 ANDe.event_end >= 2010-03-01 23:59:59)) )GROUP BY n.nid HAVING (event_start >= 2010-02-01 00:00:00 AND event_start <= 2010-02-28 23:59:59) OR (event_end >= 2010-02-01 00:00:00 AND event_end <= 2010-02-2823:59:59) OR (event_start <= 2010-02-01 00:00:00 AND event_end >= 2010-02-2823:59:59)ORDER BY event_start ASC;
    • MemcachedCache mémoire clé-valeur, encluster (!)Très rapide, très simple à utiliserMémoire = si memcached tombe,vous perdez tout, donc on y metrien d’importantIntégré à la plupart des CMS(Drupal, Magento) ou desFrameworks
    • $huge_data_for_front_page = $memcache->get("huge_data_for_front_page");if($huge_data_for_front_page === false){ $huge_data_for_front_page = array(); $sql = "SELECT * FROM hugetable WHERE timestamp > lastweek ORDER BY timestamp ASC LIMIT50000"; $res = mysql_query($sql, $mysql_connection); while($rec = mysql_fetch_assoc($res)){ $huge_data_for_frong_page[] = $rec; } // cache for 10 minutes $memcache->set("huge_data_for_front_page", $huge_data_for_front_page, 0, 600);}// use $huge_data_for_front_page how you pleaseLe principe reste le même, quelque soit l’application qui utiliserait memcached : on regarde, si pour une clé X, on a de la donnée, si oui, on continue, si nonon va chercher sur le back-end et on enregistre dans memcached pour Y temps
    • Que met-on dans memcachedRésultat de requêtes longuesRésultat d’appels aux web-servicesSessions des utilisateursObjets jetables à partager entre des serveursfront
    • QR-Memcached
    • Cache de la BDDIndexes, ne sont que des caches clé-valeurLes données d’une base sont stockés sur lesdisques = IO lentsPlus on alloue de RAM à un serveur BDDmieux c’estAttention, si votre base est utilisée en écriture,activer le cache sera pénalisant
    • Caches op-codesAPC ou eAccelerator, ou XCache, ou ZendOptimizer, ou ...http://en.wikipedia.org/wiki/List_of_PHP_acceleratorsTous ont à peu de choses près les mêmesprincipes de fonctionnement
    • Sans caches d’opcodes charger le scanner le créer un executer leRequête parser le script Résultats fichier .php lexicon opcode opcode Avec... OUI opcode en charger le cache ? opcode NON charger le scanner le créer un executer leRequête parser le script Résultats fichier .php lexicon opcode opcode stocker le opcode en cache
    • QR-APC
    • Cache statique en frontal Utilisé sur quasiment tous les sites web d’envergure Un outil open-source ressort : Varnish Si vous êtes riches : prenez un F5 (matériel)
    • Sans cache, ca crache
    • Avec du cache
    • Avant - Après
    • Varnish c’est facile
    • Installation classique Port : 80 VARNISH Port : 8080 APACHE
    • ProblèmesCertaines pages ne peuvent pas être cachéesComment cacher un site complètement dynamique(twitter, facebook...) ?Varnish, tout comme memcached est un cache chaud(on reboot = on perd tout)Comment cacher des “morceaux” de pagesComment invalider les cachesDuplication des caches
    • Exclusion de pagesUne page ne doit pas être cachée, si soncontenu est lié à la session de l’utilisateurCe sont les pages mon compte, mon panier,pages de paiementPages HTTPS
    • Exemple de conf VCLOn veut exclure du cache les pages /login, /search, /admin et quelques autres if (req.url ~ "^/login.php" || req.url ~ "^/search.php" || req.url ~ "^/admin(.*)" || req.url ~ "^/visitor(.*)" || req.url ~ "^/staff(.*)" || ) { return(pass);
    • CookiesATTENTION Varnish, comme la plupart descaches, va passer au back-end toute requêteHTTP avec un CookieOr, beaucoup de CMS, comme Drupal, posentdes cookies, même pour les anonymes.
    • Config Varnish Cookies Suppression des cookies, sauf si on estif ( !( req.url ~ ^/admin/) ) { unset req.http.Cookie; sur /admin} Suppression des cookies Google Analytics // Remove has_js and Google Analytics __* cookies. set req.http.Cookie = regsuball(req.http.Cookie, "(^|;s*)(_[_a-z]+| has_js)=[^;]*", ""); // Remove a ";" prefix, if present. set req.http.Cookie = regsub(req.http.Cookie, "^;s*", "");
    • Cacher des morceauxLa norme ESI (Edge Side Includes) permet decréer des caches complexesESI est en partie supporté par Varnish, maisaussi des F5 ou des CDN comme AkamaiESI requiert du développement cotéapplication.
    • Menu : TTL = 1 jour Les ESI permettent de découper la page en précisant, pour chaque bloc la Actu : TTL = 5 min durée de vie du cache, qui, n’oublions pas, peut être nulle pour certains blocsContenu : TTL = 20 min Page : TTL = 1 mois
    • Esi INCLUDEphp"/> <esi:include src="/content.php"/> <esi:inclu
    • ESI IncludeIl faut donc découper dans votre application lapage en blocs indépendants (très simple avecles CMS/Frameworks actuels)L’application décrit à Varnish, au niveau dechaque URL, comment construire la page
    • Enfin, coté VCLsub vcl_fetch { if (req.url == "/main.php") { setberesp.do_esi = true; /* Lancons le process ESI */ setberesp.ttl = 720h; /* Pose le TTL à 30 jours */ }elseif (req.url == "/menu.php") { set beresp.ttl =24h; /* 24h pour le menu */ } elseif (req.url == "/content.php") { set beresp.ttl =20m; /* 20 minutes pour le contenu */ } elseif (req.url== "/right-side-bar.php") { set beresp.ttl = 1h; /* 1hpour la colonne de droite */ } elseif (req.url =="/footer.php") { set beresp.ttl = 24h; /* 24h pour lefooter */ } }
    • Duplication des cachesSur les sites à très fort trafics on va mettre enplace plusieurs front avec un load balancer enfaceSi chaque front embarque un varnish, le cachesera reconstruit et invalidé indépendammentsur chaque front
    • Load BalancerFront 1 Front 2 Front 3 ... Cache 1 Cache 2 Cache 3 Cache X
    • Duplication de cachesLa solution peut-être la mise en place d’unVarnish au niveau du load-balancingLes caches sont alors communs à l’ensemblede l’application
    • Limitations de cachesLe cache est efficace quand beaucoup demonde demande la même ressourceSi j’ai 1.000.000 de pages avec un traficégalement réparti entre les pages (annuaires,base de données documentaires, site avec unfort SEO en long trail) avec un taux de 1 hitpar jour et par page, le cache ne sert à rien
    • Solution ?Optimiser la génération des pages avec duNoSQL (MongoDB, par exemple) -> on a plusbesoin de cachesTTL infini, avec un système d’invalidation trèsintelligent -> il faut être capable de savoirquand *chaque* page est invalidéeCrawling -> on simule un trafic permanent surle site, on garde le cache au chaud.
    • Exemple : Evene.frPlus de 3.000.000 de pagesArchitecture basée sur NGnix & VarnishUn crawler qui passe en permanence surtoutes les pagesGoogle tape toujours dans des pages cachées= bon pour le SEO
    • Invalidation des pagesPoser un TTL ne suffit pas, on veut pouvoirrafraichir une page modifiée, avant l’expirationdu cacheL’invalidation des pages de contenu est facileQuid de l’invalidation des listes, résultats derecherche, etc...
    • Invalidation varnishReboot de varnish (extrème)varnishadm - il faut un accès au terminal,mais on peut invalider en massepurge HTTP par wget / curl - on fait pagepar page...
    • QR-Varnish
    • Exemple d’un serveur front-end ? Varnish Apache APC PHP Memcached
    • CloudNon, je ne ferai pas de blagues pourries avec les nuages.
    • Grands principesVirtualisation des serveurs (l’application estinstallée dans une enveloppe)Grosses machines très standardisées (surlesquelles on met X serveurs virtuels)
    • AvantagesHard standard -> coûts réduitsOn optimise très bien le hard -> coûts réduitsSauvegarde et disaster recovery simplifiésScalabilité simplifié
    • Myths breakerUn site avec un fort trafic n’ira pas plus vitesur le cloudL’intérêt du cloud = plein de petitesapplicationsMettre un site sur le cloud nécessite de laréflexion et du développement
    • Exemple : AcquiaHosting sur le cloud deAmazonUniquement de sites DrupalMais en vrai ils ne sont pastrès différents d’unhébergeur classique
    • Acquia Managed Cloud
    • La suiteServeurs web : possibilités, NGnix, Apache, Lighthttpd,optimisations possiblesApplications : PHP, Java, .NET, RubyBases de données : MySQL, NoSQL, avantages etinconvénients, requêtes lentes, tuningMoteurs de recherche : Apache SOLR, Sphinx,MySQL Full text search, Antidot, ExaleadCDN : Videos, images, lintérêt, Akamaï, CDN Tech,...
    • La suite 2Exemple darchitecture appliqué à un CMS :DrupalExemple doptimisations sur un site concret :Evene.fr, Bouygues-Immobilier.comSizing : comment construire une architectureTest de performance, monitoring &supervision : JMeter, New Relic, Nagios
    • STAGES CHEZ ADYAXC’est super cool (mieux que chez Publicis,TBWA ou Fullsix !)On a un bar à 3 mètres avec des pintes à 4€On a publié les offres sur l’OGISi non : flemoing@adyax.com (un ex-HETICien)Les stagiaires gèrent de vrai projets (cf. Pierre-Loïc ;-)
    • Des questions ?
    • Bye bye !