Les requêtes HTTP de l'extrêmeLes requêtes HTTP de l'extrême
Vincent Cassé - @vcasseVincent Cassé - @vcasse
Les requêtes HTTP de l'extrêmeLes requêtes HTTP de l'extrême
Etape 1 :
Présenter la problématique
Etape 1 :
Présenter la problématique
Problématique de l'épisodeProblématique de l'épisode
● Gérer des fichiers dans le cloud
● Application web
● Utilisation d'...
Architecture de l'applicationArchitecture de l'application
Navigateur
web
Serveur
applicatif
Object
storage
Etape 2 :
Étudier chaque problème,
de manière temporelle
Etape 2 :
Étudier chaque problème,
de manière temporelle
Télécharger des fichiersTélécharger des fichiers
D'habitudeD'habitude
● Stockage en local temporaire
● Risque 1 : disque pleins
● Risque 2 : timeouts
● Stockage en local t...
Timeout ?Timeout ?
Navigateur
web
Serveur
applicatif
Object
storage
Timeout ?Timeout ?
● Connexion HTTP en attente sans traffic
● Passage par des load balancers
● Ressemble à une attaque SYN...
Le callback de curl est un amiLe callback de curl est un ami
● Exécution à chaque paquet reçu
● Temps curl non décompté
● ...
Le callback de curl est un amiLe callback de curl est un ami
curl_setopt($curl, CURLOPT_WRITEFUNCTION, function($a,$b) {
e...
Et plusieurs fichiers ?Et plusieurs fichiers ?
Enregistrer le fichier sous...Enregistrer le fichier sous...
// Frontend
Iframe  + formulaire à valider pour charger le fi...
Zip obligatoireZip obligatoire
● Un seul fichier par download
● Le format zip permet de faire un seul
fichier (même sans c...
Les streams sont vos amisLes streams sont vos amis
● Stream permet la lecture / écriture d'une
ressource
● Stream se compo...
Les streams sont vos amisLes streams sont vos amis
// Register stream zip
stream_wrapper_register("zip", "ZipClassName");
...
Et les miniatures ?Et les miniatures ?
Imagick ?Imagick ?
● Limité à l'application web
● Prend des ressources CPU
● Comment distribuer le cache ?
● Limité à l'ap...
Réducteur d'image à la voléeRéducteur d'image à la volée
Navigateur
web
Serveur
applicatif
Object
storage
Miniatures
Houston : on reçoit des erreurs 0Houston : on reçoit des erreurs 0
Des erreurs 0 ?Des erreurs 0 ?
● Pas d'erreur 0 dans les logs
● Sur IE, l'erreur n'appelle même pas le
callback d'erreur …...
Suppression d'un fichierSuppression d'un fichier
● L'erreur arrive sur les suppressions de
gros fichiers
● L'action est lo...
Code HTTP 0 ?Code HTTP 0 ?
● Soucis réseau : ça a tranché sur la route
● Timeout du load balancer !
● Solution : faire de ...
Suppression programméeSuppression programmée
● Object storage permet de programmer
une suppression
● Pas d'attente ! C'est...
Heu… y'a encore des erreurs 0 !Heu… y'a encore des erreurs 0 !
Encore des erreurs 0 ?Encore des erreurs 0 ?
● Sur un upload : y'a du traffic -_-
● Seulement sur les gros fichiers
● Sur ...
Firebug ...Firebug ...
● Analyseur de code dans Firefox /
Chrome
● Coupe le traffic sur les requêtes > 100
Mo.
● Paf timeo...
Et si on parlait d'upload ?Et si on parlait d'upload ?
Comment on upload ?Comment on upload ?
<form enctype="multipart/form­data" action="upload.php” method="POST">
<input type=...
AJAX ?AJAX ?
● Permet de suivre la progression
● Format binaire
xhr = new XMLHttpRequest();
xhr.addEventListener("load", s...
Et mon formulaire ?Et mon formulaire ?
● L'object storage attend un formulaire
● On crée le formulaire en javascript
● htt...
Contraintes des uploadsContraintes des uploads
● Adsl répandu
● Upload de l'adsl : max 128 Ko/s (1Mbps)
● Les uploads dure...
Fiabiliser les uploadsFiabiliser les uploads
Navigateur
web
Serveur
applicatif Object
storage
Upload
Chef ça a cassé !Chef ça a cassé !
● Same origin policy !
● Aucun appel Ajax sur un autre domaine
● C'était trop beau…
● S...
CORSCORS
● Permet de définir les serveurs autorisés
● Configuration sur les serveurs
● http://caniuse.com/#search=cors
// ...
Au fait, tu dois gérer IE8 !Au fait, tu dois gérer IE8 !
● Dernier IE de Windows XP...
● Gére pas formData (IE10)
● Gére p...
Au fait, tu dois gérer IE8 !Au fait, tu dois gérer IE8 !
● On crée une iframe sur cluster.objectstorage.ovh
● Contenant un...
Les autres blagues de IE < 10Les autres blagues de IE < 10
● Upload de .jpeg ?
● Sélection multiple ?
● Windows phone 8 ?
...
On peut uploader un dossier ?On peut uploader un dossier ?
● Chrome le peut. C'est deprecated
● Firefox bute sur l'ergonom...
Etape 3 :
La réalisation et ses aléas
Etape 3 :
La réalisation et ses aléas
Les bugs poilusLes bugs poilus
Remontées des utilisateursRemontées des utilisateurs
● Mon download a crashé au bout de 27h
● Mon zip est corrompu
● Mon d...
Ce qu'en pense les sysadminsCe qu'en pense les sysadmins
● Non pas de reboot de serveur
● Aucune alerte du monito
● Au fai...
Conso de RAM ?Conso de RAM ?
● Pas possible : je stream
● Je reproduis pas en dev : c'est le serveur
qui est mal configuré...
Nginx ?Nginx ?
location /webapp $ {
proxy_pass       http://localhost:81;
proxy_set_header Host      $host;
}
…
server {
l...
Nginx ?Nginx ?
Syntax:  proxy_buffering on | off;
Default:  proxy_buffering on;
Context:  http, server, location
http://ng...
proxy_bufferingproxy_buffering
Listen 80
Internet
Object
Storage
Listen 81
PHP-fpm
Proxy
Fastcgi
Tout est bien qui finit bienTout est bien qui finit bien
En fait, le dev web c'estEn fait, le dev web c'est
● Multi – navigateur
● Ça doit gérer le réseau
● C'est comme les oignon...
Merci !
Des questions ?
Merci !
Des questions ?
Les requêtes HTTP de l'extrêmeLes requêtes HTTP de l'extrême
Vincent Cassé - @vcasseVincent Cassé - @vcasse
[FR] Les requêtes HTTP de l'extrême
Prochain SlideShare
Chargement dans…5
×

[FR] Les requêtes HTTP de l'extrême

589 vues

Publié le

Tous ceux qui font du web connaissent HTTP. Mais que se passe-t-il quand on le pousse dans ses retranchements ? Retours d’expérience sur nos développements en interne.

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
589
Sur SlideShare
0
Issues des intégrations
0
Intégrations
185
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

[FR] Les requêtes HTTP de l'extrême

  1. 1. Les requêtes HTTP de l'extrêmeLes requêtes HTTP de l'extrême Vincent Cassé - @vcasseVincent Cassé - @vcasse
  2. 2. Les requêtes HTTP de l'extrêmeLes requêtes HTTP de l'extrême
  3. 3. Etape 1 : Présenter la problématique Etape 1 : Présenter la problématique
  4. 4. Problématique de l'épisodeProblématique de l'épisode ● Gérer des fichiers dans le cloud ● Application web ● Utilisation d'un object storage https://www.ovh.com/fr/cloud/storage/object-storage.xml ● Gérer des fichiers dans le cloud ● Application web ● Utilisation d'un object storage https://www.ovh.com/fr/cloud/storage/object-storage.xml
  5. 5. Architecture de l'applicationArchitecture de l'application Navigateur web Serveur applicatif Object storage
  6. 6. Etape 2 : Étudier chaque problème, de manière temporelle Etape 2 : Étudier chaque problème, de manière temporelle
  7. 7. Télécharger des fichiersTélécharger des fichiers
  8. 8. D'habitudeD'habitude ● Stockage en local temporaire ● Risque 1 : disque pleins ● Risque 2 : timeouts ● Stockage en local temporaire ● Risque 1 : disque pleins ● Risque 2 : timeouts
  9. 9. Timeout ?Timeout ? Navigateur web Serveur applicatif Object storage
  10. 10. Timeout ?Timeout ? ● Connexion HTTP en attente sans traffic ● Passage par des load balancers ● Ressemble à une attaque SYN ● Connexion HTTP en attente sans traffic ● Passage par des load balancers ● Ressemble à une attaque SYN
  11. 11. Le callback de curl est un amiLe callback de curl est un ami ● Exécution à chaque paquet reçu ● Temps curl non décompté ● Permet d'éviter stockage local ● Permet d'envoyer du contenu : pas de timeout ● Exécution à chaque paquet reçu ● Temps curl non décompté ● Permet d'éviter stockage local ● Permet d'envoyer du contenu : pas de timeout
  12. 12. Le callback de curl est un amiLe callback de curl est un ami curl_setopt($curl, CURLOPT_WRITEFUNCTION, function($a,$b) { echo $b; flush(); return strlen($b); ); curl_setopt($curl, CURLOPT_WRITEFUNCTION, function($a,$b) { echo $b; flush(); return strlen($b); );
  13. 13. Et plusieurs fichiers ?Et plusieurs fichiers ?
  14. 14. Enregistrer le fichier sous...Enregistrer le fichier sous... // Frontend Iframe  + formulaire à valider pour charger le fichier sans recharge la  page // Backend header('Cache­Control: no­cache, no­store, max­age=0, must­revalidate'); header("Content­Type: application/jpeg”); header('Content­Length: 1337”); header("Content­Transfer­Encoding: binary"); header('Content­Disposition: attachment;filename="picture.jpg"'); // Frontend Iframe  + formulaire à valider pour charger le fichier sans recharge la  page // Backend header('Cache­Control: no­cache, no­store, max­age=0, must­revalidate'); header("Content­Type: application/jpeg”); header('Content­Length: 1337”); header("Content­Transfer­Encoding: binary"); header('Content­Disposition: attachment;filename="picture.jpg"');
  15. 15. Zip obligatoireZip obligatoire ● Un seul fichier par download ● Le format zip permet de faire un seul fichier (même sans compression) ● Stockage local avant de zipper ? ● Un seul fichier par download ● Le format zip permet de faire un seul fichier (même sans compression) ● Stockage local avant de zipper ?
  16. 16. Les streams sont vos amisLes streams sont vos amis ● Stream permet la lecture / écriture d'une ressource ● Stream se comporte comme les fichiers ● Plus d'infos sur les streams http://php.net/manual/en/intro.stream.php https://blog.pascal-martin.fr/post/slides-presentation-flux-forum-php-2015.html ● Stream permet la lecture / écriture d'une ressource ● Stream se comporte comme les fichiers ● Plus d'infos sur les streams http://php.net/manual/en/intro.stream.php https://blog.pascal-martin.fr/post/slides-presentation-flux-forum-php-2015.html
  17. 17. Les streams sont vos amisLes streams sont vos amis // Register stream zip stream_wrapper_register("zip", "ZipClassName"); // Use stream zip with curl return $fp = fopen("zip://uniqNameByDownload”, "r+"); curl_setopt($curl, CURLOPT_FILE, $fp); fclose( $fp ); // Register stream zip stream_wrapper_register("zip", "ZipClassName"); // Use stream zip with curl return $fp = fopen("zip://uniqNameByDownload”, "r+"); curl_setopt($curl, CURLOPT_FILE, $fp); fclose( $fp );
  18. 18. Et les miniatures ?Et les miniatures ?
  19. 19. Imagick ?Imagick ? ● Limité à l'application web ● Prend des ressources CPU ● Comment distribuer le cache ? ● Limité à l'application web ● Prend des ressources CPU ● Comment distribuer le cache ?
  20. 20. Réducteur d'image à la voléeRéducteur d'image à la volée Navigateur web Serveur applicatif Object storage Miniatures
  21. 21. Houston : on reçoit des erreurs 0Houston : on reçoit des erreurs 0
  22. 22. Des erreurs 0 ?Des erreurs 0 ? ● Pas d'erreur 0 dans les logs ● Sur IE, l'erreur n'appelle même pas le callback d'erreur … ● Mais des 499 ● What ? ● Pas d'erreur 0 dans les logs ● Sur IE, l'erreur n'appelle même pas le callback d'erreur … ● Mais des 499 ● What ?
  23. 23. Suppression d'un fichierSuppression d'un fichier ● L'erreur arrive sur les suppressions de gros fichiers ● L'action est longue coté Object Storage ● Timeout php ? ● L'erreur arrive sur les suppressions de gros fichiers ● L'action est longue coté Object Storage ● Timeout php ?
  24. 24. Code HTTP 0 ?Code HTTP 0 ? ● Soucis réseau : ça a tranché sur la route ● Timeout du load balancer ! ● Solution : faire de l'async ? ● Soucis réseau : ça a tranché sur la route ● Timeout du load balancer ! ● Solution : faire de l'async ?
  25. 25. Suppression programméeSuppression programmée ● Object storage permet de programmer une suppression ● Pas d'attente ! C'est juste programmé ! ● Et si on programmait dans une seconde ? ● Object storage permet de programmer une suppression ● Pas d'attente ! C'est juste programmé ! ● Et si on programmait dans une seconde ?
  26. 26. Heu… y'a encore des erreurs 0 !Heu… y'a encore des erreurs 0 !
  27. 27. Encore des erreurs 0 ?Encore des erreurs 0 ? ● Sur un upload : y'a du traffic -_- ● Seulement sur les gros fichiers ● Sur un upload : y'a du traffic -_- ● Seulement sur les gros fichiers
  28. 28. Firebug ...Firebug ... ● Analyseur de code dans Firefox / Chrome ● Coupe le traffic sur les requêtes > 100 Mo. ● Paf timeout ... ● Analyseur de code dans Firefox / Chrome ● Coupe le traffic sur les requêtes > 100 Mo. ● Paf timeout ...
  29. 29. Et si on parlait d'upload ?Et si on parlait d'upload ?
  30. 30. Comment on upload ?Comment on upload ? <form enctype="multipart/form­data" action="upload.php” method="POST"> <input type="hidden" name="META1" value="file" /> <input name="content" type="file" /><br /> <input type="submit" value="Upload File" /> </form> ● Recharge la page ● Ne permet pas d'afficher la progression ● AJAX ? <form enctype="multipart/form­data" action="upload.php” method="POST"> <input type="hidden" name="META1" value="file" /> <input name="content" type="file" /><br /> <input type="submit" value="Upload File" /> </form> ● Recharge la page ● Ne permet pas d'afficher la progression ● AJAX ?
  31. 31. AJAX ?AJAX ? ● Permet de suivre la progression ● Format binaire xhr = new XMLHttpRequest(); xhr.addEventListener("load", successCallback, false); xhr.addEventListener("error", errorCallback, false); xhr.addEventListener("abort", abortCallback, false); xhr.upload.addEventListener("progress", progressCallback, false); xhr.open('POST', url, true); xhr.send(data); ● Permet de suivre la progression ● Format binaire xhr = new XMLHttpRequest(); xhr.addEventListener("load", successCallback, false); xhr.addEventListener("error", errorCallback, false); xhr.addEventListener("abort", abortCallback, false); xhr.upload.addEventListener("progress", progressCallback, false); xhr.open('POST', url, true); xhr.send(data);
  32. 32. Et mon formulaire ?Et mon formulaire ? ● L'object storage attend un formulaire ● On crée le formulaire en javascript ● http://caniuse.com/#search=formdata http://caniuse.com/#search=file formData = new FormData(); formData.append('meta1', “file”); formData.append('content', fp); … xhr.send(formData); ● L'object storage attend un formulaire ● On crée le formulaire en javascript ● http://caniuse.com/#search=formdata http://caniuse.com/#search=file formData = new FormData(); formData.append('meta1', “file”); formData.append('content', fp); … xhr.send(formData);
  33. 33. Contraintes des uploadsContraintes des uploads ● Adsl répandu ● Upload de l'adsl : max 128 Ko/s (1Mbps) ● Les uploads durent des heures ● Adsl répandu ● Upload de l'adsl : max 128 Ko/s (1Mbps) ● Les uploads durent des heures
  34. 34. Fiabiliser les uploadsFiabiliser les uploads Navigateur web Serveur applicatif Object storage Upload
  35. 35. Chef ça a cassé !Chef ça a cassé ! ● Same origin policy ! ● Aucun appel Ajax sur un autre domaine ● C'était trop beau… ● Same origin policy ! ● Aucun appel Ajax sur un autre domaine ● C'était trop beau…
  36. 36. CORSCORS ● Permet de définir les serveurs autorisés ● Configuration sur les serveurs ● http://caniuse.com/#search=cors // Requête de firefox GET /fileList/ HTTP/1.1 Origin: http://mywebapp.ovh // Réponse du serveur cluster.objectstorage.ovh Access­Control­Allow­Origin: http://mywebapp.ovh ● Permet de définir les serveurs autorisés ● Configuration sur les serveurs ● http://caniuse.com/#search=cors // Requête de firefox GET /fileList/ HTTP/1.1 Origin: http://mywebapp.ovh // Réponse du serveur cluster.objectstorage.ovh Access­Control­Allow­Origin: http://mywebapp.ovh
  37. 37. Au fait, tu dois gérer IE8 !Au fait, tu dois gérer IE8 ! ● Dernier IE de Windows XP... ● Gére pas formData (IE10) ● Gére pas CORS (IE10) ... ● Dernier IE de Windows XP... ● Gére pas formData (IE10) ● Gére pas CORS (IE10) ...
  38. 38. Au fait, tu dois gérer IE8 !Au fait, tu dois gérer IE8 ! ● On crée une iframe sur cluster.objectstorage.ovh ● Contenant un formulaire ● On simule le clic sur le bouton ● On crée une iframe sur cluster.objectstorage.ovh ● Contenant un formulaire ● On simule le clic sur le bouton
  39. 39. Les autres blagues de IE < 10Les autres blagues de IE < 10 ● Upload de .jpeg ? ● Sélection multiple ? ● Windows phone 8 ? ● Upload de .jpeg ? ● Sélection multiple ? ● Windows phone 8 ?
  40. 40. On peut uploader un dossier ?On peut uploader un dossier ? ● Chrome le peut. C'est deprecated ● Firefox bute sur l'ergonomie ● WebAPI ? ● Chrome le peut. C'est deprecated ● Firefox bute sur l'ergonomie ● WebAPI ?
  41. 41. Etape 3 : La réalisation et ses aléas Etape 3 : La réalisation et ses aléas
  42. 42. Les bugs poilusLes bugs poilus
  43. 43. Remontées des utilisateursRemontées des utilisateurs ● Mon download a crashé au bout de 27h ● Mon zip est corrompu ● Mon download a crashé au bout de 27h ● Mon zip est corrompu
  44. 44. Ce qu'en pense les sysadminsCe qu'en pense les sysadmins ● Non pas de reboot de serveur ● Aucune alerte du monito ● Au fait, pendant que tu es là, tu as vu mon mail sur la conso de RAM ? ● Non pas de reboot de serveur ● Aucune alerte du monito ● Au fait, pendant que tu es là, tu as vu mon mail sur la conso de RAM ?
  45. 45. Conso de RAM ?Conso de RAM ? ● Pas possible : je stream ● Je reproduis pas en dev : c'est le serveur qui est mal configuré ● Monito des process PHP : non c'est pas eux qui mangent la RAM ! ● Pas possible : je stream ● Je reproduis pas en dev : c'est le serveur qui est mal configuré ● Monito des process PHP : non c'est pas eux qui mangent la RAM !
  46. 46. Nginx ?Nginx ? location /webapp $ { proxy_pass       http://localhost:81; proxy_set_header Host      $host; } … server { listen 81; location ~ .php$ { try_files $uri =404; fastcgi_pass unix:/var/run/php5­fpm.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; } } location /webapp $ { proxy_pass       http://localhost:81; proxy_set_header Host      $host; } … server { listen 81; location ~ .php$ { try_files $uri =404; fastcgi_pass unix:/var/run/php5­fpm.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; } }
  47. 47. Nginx ?Nginx ? Syntax:  proxy_buffering on | off; Default:  proxy_buffering on; Context:  http, server, location http://nginx.org/en/docs/http/ngx_http_proxy_module.html Syntax:  proxy_buffering on | off; Default:  proxy_buffering on; Context:  http, server, location http://nginx.org/en/docs/http/ngx_http_proxy_module.html
  48. 48. proxy_bufferingproxy_buffering Listen 80 Internet Object Storage Listen 81 PHP-fpm Proxy Fastcgi
  49. 49. Tout est bien qui finit bienTout est bien qui finit bien
  50. 50. En fait, le dev web c'estEn fait, le dev web c'est ● Multi – navigateur ● Ça doit gérer le réseau ● C'est comme les oignons, ça a des couches ● Multi – navigateur ● Ça doit gérer le réseau ● C'est comme les oignons, ça a des couches
  51. 51. Merci ! Des questions ? Merci ! Des questions ?
  52. 52. Les requêtes HTTP de l'extrêmeLes requêtes HTTP de l'extrême Vincent Cassé - @vcasseVincent Cassé - @vcasse

×