Architecture(s)etapplication(s)Web

CSC4101-HTTPetArchitectured'applicationWeb3tiers

25/09/20181

PlanducoursCM2:HTTPetarchitectureappliWeb3tiers

2

1. Architecture

3

Quetrouve-t-onsouslecapotd’uneapplicationWeb?

4

Architecture3tiersArchitecturelogicielle:

couchedeprésentation;couchedetraitement;couched’accèsauxdonnées.

Simplificationdel’approchegénéraled’unearchitectureàplusieursniveaux(multitier)

5

VariantelignedecommandeApplicationSymfonyToDo,enlignedecommande:

présentationaffichagesortiestandard

traitementApp\Command\ListTodosCommand

accèsauxdonnéesDoctrine+SQLite

6

VariantesurleWeb

7

3couchesdesapplicationsWebDéploiementsurleWebdesdifférentescouches:

Présentation:pagesHTMLtransmisesvialeréseau:serveurquilesconstruitclient(navigateur)quilesaffiche

Traitements:programmes:serveurWeb(dialogueHTTP,invocationdesapplications)serveurd’applications(exécutedesprogrammesPHP,parexemple)

AccèsauxdonnéesSGBD

8

Évolutiondesarchitectures

9

ServeurdepagesWebstatiquesHistoriquement,lespremiersserveursWebsecontententdefournirdespagesWebstatiqueschargéesdepuisdesfichiers(documentsHTML).

10

Caractéristiquesd’unserveurdepagesstatiques

AvantagesEfficace(tientlacharge)

InconvénientsNepermetpasfacilementdespagesquisemettentàjourdynamiquement,enfonctiondesvisitesEncoremoinsdesapplicationsinteractivesProblèmedecohérencedesURLs(renommages,lienscassés,etc.)

11

ApplicationsBD+WebLesserveursserventàfairetournerdesapplicationsproduisantdespagesWebdynamiques,àpartirde

donnéesissuesdebasesdedonnées.

12

Caractéristiquesd’unserveurpourapplicationsBD+Web

Aged’orduWeb:desapplicationssontpossibles:desprogrammesgénèrentdespagesWebenfonctiondes

requêtesduclient

13

AvantagesBasededonnéesgèrel’intégritédesdonnées(transactions,accèsmultiples,intégritéréférentielle,…)Tientlacharge:dupliquerl’exécutiondesscriptsLargegammedechoixdulangagedeprogrammation

14

InconvénientsInvocationdesscriptsparleserveur

Difficultéàprogrammer(+/-)

15

Architecturemoderne,multi-couchesOndistinguelesdifférentscomposantsmisenœuvre

dansuneapplication,endifférentescouchesindépendantes.

16

CaractéristiquesDécoupageencouchesMieuxdécomposerl’architecturedel’applicationcôtéserveurpourmieuxmaîtriserledéveloppementDécouplerparexemple:

lalogiquemétier(pasnécessairementWeb)laprésentation(sousformedepagesWeb)

Modèlequipeutêtreraffinéenajoutantd’autrescouches

17

ÉvolutionsrécentesRôleaccruduclient

utilisationdeJavaScriptavecframework(Angular…)programmationévénementiellesurleclientpagemodifiéecôtéclient(DOM)microservicescôtéserveur(API)

18

2. HTTP

19

Principesrequêtesetréponses

20

ArchitectureClient-ServeurHTTP(HyperTextTransferProtocol)

MultiplesclientssimultanésServeursans«connaissance»particulièredesclientsRéseauinternetTCP/IP

21

Constructiondelarequêteparleclient1. Leclient(navigateur)interprètel’URL2. IldemandeauservicedenomuneadresseIP

corrrespondantaunomdusite(www.monsite.fr)3. IlétablituneconnexionTCPavecleserveuràcette

adresse,surlenumérodeportassociéauprotocole:80pourHTTP(ou443pourHTTPS,…)

4. Ilformulesarequêted’action(parexemplevialaméthodeGET)suruneressource(/projet/doc.html),enécrivantunmessage:ex.:«GET/projet/doc.html»

22

TraitementdelarequêteparleServeur1. Analyselarequêtereçue(GET/projet/doc.html)2. Vérificationvalidité,autorisationsd’accès…

3. Envoid’uneréponseauclientavec:

uncodederetourcontenu(documentourésultatexécution)

ou:

messaged’erreur,ouunedemandeauthentification,ouadressederedirection

4. Fermeturedelaconnexion

23

Requête-Réponse

24

Contenudesmessages

25

Productionducontenusurleserveurchemind’accèsàlaressourcereçu:identifielaressourcedemandée(«/projet/doc.html»);Enfonctionducontextedelarequête,pourlamêmeURL,leserveurpeutrenvoyerdifférentesreprésentationsdecetteressource,différentscontenus/formats;Lafaçondontleserveurfabriquelecontenurenvoyéluiappartient:leclientnepeutriensupposer,justesuivreleslienshypertextes.

26

Arborescencedecheminsd’accèsauxressourcesaccessibles(danslesURL)différented’uneéventuellearborescencedestockageeffectifàl’intérieurduserveur.

Peut-êtreenvoid’undocumentstockésurunsystèmedefichier?Peut-êtreuneapplicationgénérantdesdocumentsdynamiquement?

-…

Choixduserveurarbitraireenfonctionducontextedelarequête.

27

TransmettredesdonnéesauserveurCommentleclientpeut-iltransmettredesdonnéesauserveur:contexteexplicitepourlesapplicationsdynamiques?L’URLpeutcontenirdesinformationsvariables:

desargumentsd’unGET

nom valeur

id 3

nb 42

Lecorpsdelarequêtepeuttransmettredesdonnées:ex.méthodePOST(voirci-après)

http://www.monsite.fr/projet/service.php?id=3&nb=42

28

Protocolesansétat(stateless)Chaquerequêteesteffectuéedefaçonindépendante,etleserveurnegardepaslatracedesrequêtesprécédenteseffectuéesparlemêmeclient.Debase,pasdegestiondesessiondansHTTP(maisdessolutionsexistent).

29

SpécificationsdebaseHTTP

30

FormatdesmessagesHTTPTrèspeudetypesderequêtes/méthodes(moinsd’unedizaine)ToutentexteASCII7bits(facileàdébugger)Syntaxetrèssimple,avec4zones1. ligne1:requête(oustatutréponse)2. plusieurslignes:en-têtes(optionnels)3. lignevide:séparateur(obligatoire)4. restedumessage:corps/contenu(quipeutêtre

vide)

31

Structured’unerequêteclientCanevas:

Lalignevideestimportante(findesen-têtes)

Exemple:

MéthodeDocumentVersion_HTTPEn-têtes(Lignevide)ContenuduMessageoptionnel...(saisied'unformulaire,documentàpublier)...

1:GET/hello.txtHTTP/1.12:User-Agent:curl/7.16.3libcurl/7.16.3OpenSSL/0.9.7lzlib/1.2.33:Host:www.example.com4:Accept-Language:en,mi5:6:

32

Structured’uneréponseserveurCanevas:

Exemple:

Version_HTTPCodeSignificationEn-têtes(Lignevide)ContenuduMessage...(documentHTML,image,...)...

1:HTTP/1.1200OK2:Date:Mon,27Jul200912:28:53GMT3:Server:Apache4:Content-Length:725:Content-Type:text/plain6:7:Saluttoutlemonde.Moncontenucontientunretourcharriotàlafin.8:

33

Méthodes

34

Actionssurlesressources(CRUD)Leclientsouhaiteeffectuerdesactions/opérationssurlesressourcesduserveurIlinvoquedifférentstypesderequêtes,méthodes:

Opération MéthodeHTTP SQL

C Create(création) PUT/POST INSERT

R Read(accès) GET SELECT

U Update(m-à-j) PUT/PATCH UPDATE

D Delete(suppr.) DELETE DELETE

cf.RFC7231:HTTP/1.1SemanticsandContent35

https://tools.ietf.org/html/rfc7231

ExemplederequêteGETDemandedudocumentpremier.htmlparlenavigateur(firefox)

Regardezlesen-têtesdanslesoutilspourledéveloppeurdevosnavigateurs

GET/premier.htmlHTTP/1.1requêteConnection:Keep-Aliveen-têtes(début)User-Agent:Mozilla/5.0(Firefox/3.0.2)Host:telecom-sudparis.euAccept:image/gif,image/jpeg,*/*en-têtes(fin)lignevideicicontenuvide

36

ExemplederéponseàunGETEnvoidudocumentHTMLparleserveurWebApache

Lapremièrelignecontientlecodedestatut/retour:200OK

HTTP/1.1200OKréponseDate:Mon,11Nov200817:47:24GMTen-têtes(début)Server:Apachee/2.2.3(DebianGNU/Linux)Perl/v5.8.4PHP/5.2.6Last-Modified:Wed,28Apr200815:55:02GMTContent-length:327Content-type:text/htmlen-têtes(fin)lignevidecontenu...documentHTML...

37

MéthodeGETRécupérerlareprésentationd’uneressource

Seuleméthodeàl’origine⇒usagetrèssimple:GETdoc.htmlMéthodelaplusutiliséequipermetde:

Récupérerlecontenud’undocument(fichier,image…)Activerl’exécutiond’unprogrammesurleserveurEtmêmeenvoyerdesdonnéesprogramme?nom=paul

AvecGET,lecontenudumessagedanslarequêteesttoujoursvide

38

AutresméthodesHEAD:commeGET,maisrécupérerseulementl’en-têtePOST:envoidedonnéespourtraitementcôtéserveur(ex:contenud’unformulaireHTML)PUT:envoiducontenud’undocument,pourenregistrementsurleserveurDELETE:suppressiond’undocument

39

CONNECT:établiruntunnelversleserveurhébergeantuneressource(serveurproxy)OPTIONS:demandedesoptionsgéréesparleserveurpourl’accèsàuneressourceTRACE:effectueuntestd’accèscompletlelongduchemind’accèsàuneressource(ping/echo)

40

KeepCalmEnpratique,au-delàdecetteséance,vousutiliserezet

gérerezprincipalement:

GETPOST

L’affairesecorserapourceuxquis’intéresserontauxservicesWebfonctionnantavecdesAPIsurHTTP

(REST)

41

CodesderéponseduserveurDe100à199

Messagesd’informationDe200à299

Succès.Exemple:200OkayDe300à399

RedirectionsDe400à499

Erreursduclient.Ex.:404NotFoundDe500à599

Erreursduserveur.Ex.:501InternalServerError

42

En-têtessansmaldetête

43

Rôledesen-têtes(headers)Ajouteducontexte(propriétésduclient,autorisations…)Détaillelescaractéristiquesdesflux(encodage,taille…)Optimisations(cache,…)Gestiond’unesessionau-dessusd’unprotocolesansétat(cookies,…)Élémentspropresàl’application(extensible)

44

En-têtesgénérauxAussibiendansrequêtesouréponses

LescachesetproxyCache-Control,Pragma,Via

LaconnexionConnection

LadateDate

LecodageMIME-Version,Transfer-Encoding

45

En-têtesderequêtesPréférencesduclient:types,caractères,langage…AcceptAccept-EncodingAccept-CharsetAccept-Language

Identificationduclient/serveur:site,e-mail,source…HostFromRefererUser-Agent

46

En-têtesderequêtes(suite)Contrôled’accèsetsessions(login,cookies…)AuthorizationCookie

Conditionspourleserveur(surladate…)If-Modified-SinceIf-MatchIf-RangeIf-Unmodified-Since

Autres(pourproxy)Max-Forwards

47

En-têtesderéponsesInformationssurlecontenu:type,taille,URL,encodage…Content-TypeContent-LengthContent-EncodingContent-Location

InformationssurladatedemodificationouladuréeLast-ModifiedExpires

48

En-têtesderéponses(suite)Identificationduserveur:nom,formats…ServerAccept-RangeLocation

Complémentspourleclient:durée,âge…AgeRetry-AfterWarningAutres:Allow:méthodesautoriséesEtag:entitédebalisage

49

En-têtesderéponses(suite)Demanded’authentificationWWW-Authenticate

EnvoidecookiesSet-Cookie

50

3. FonctionnementdesserveursWeb

51

ServeurHTTP1. ComprendrelesrequêtesHTTPdesclients

URL(http(s)://example.com/hello)Verbe/méthode/action(GET,POST,…)En-têtesDonnéestransmises

2. ConstruirelaréponseServirdesdocumentsOuexécuterdesprogrammes

3. Renvoyeruneréponseauclient(HTML,etc.)

52

MaisaussiVérifierlasécuritéGérerlesperformances…

53

Exemples

PaaS(PlatformasaService)prêtàl’emploisurunCloud

ApacheNginx

54

https://httpd.apache.org/https://nginx.org/

Programmes/ApplicationsExécution:

Directesurlesystèmed’exploitation

ou

Danslecontexted’unserveurd’applicationsUnmoduleduserveurWebUnserveurd’applicationdédié

55

InvocationduprogrammeLeserveurWebinvoquel’exécutiond’unprogrammeLeprogrammes’exécutesurune«plate-forme»:langage,bibliothèques,moteursd’exécution,…LeprogrammefournitunesortieauformatHTML(engénéral):transmise«telle-quelle»

56

Technologiesd’invocationd’unprogramme

Différentesfaçonsd’appelerunprogrammeGlobalementlamêmefaçonmêmesidifférentestechnologiespossibles:

CGI(CommonGatewayInterface)Exécutiondeprogrammes«ausein»duserveurHTTPServeurd’applicationsséparé

57

1.CGI(CommonGatewayInterface)RequêtesuruneURLinvoqueuneexécutiond’unprocessussurl’OS:shellscript,exécutablecompilé,script(Perl,Python,…)Pointd’entréeduprogrammeunique:programmationimpérative«classique»Problèmes:lourdeurdel’invocationd’unnouveauprocessussystèmeàchaquerequêtegestiondesessiondifficilesécurité:celledel’OS

Obsolète58

2.Exécutiondeprogrammes«ausein»duserveurHTTP

LeserveurHTTP«intègre»desfonctionnalitéspourdévelopperdesapplications(viades«plugins»):

Langagedeprogrammation«embarqué»(PHP,Python,…)Gestion«native»deHTTPGénération«facile»deHTML,etc.

Exécutiondansdesthreadsdédiées(plusefficacequedesprocessusàinvoquer)Transfertdesdonnéesimmédiat:enmémoire,sanspasserparl’OS

59

3.Serveurd’applicationsséparéArchitectureunpeudifférenteLeserveurWebgèrelachargeHTTPetfournitdesdocumentsstatiques(CSS,images,etc.)Un(ouplusieurs)serveur(s)d’applicationsgère(nt)l’exécutiondesréponsesdynamiquesauxrequêtesLeserveurHTTPetlesserveursd’applicationsontconnectésdefaçonefficace(sipossible)Leserveurd’applicationgèredessessionsOnpeutgérerdefaçonindépendantelapartiestatiqueetlapartiedynamique,notammentpours’adapteràlachargeplusoumoinsdynamiquement.

60

Exemple:programmesWebenPHPBibliothèquespourspécificitésHTTPFacileàtester(?)TrèspopulairepourdéploiementchezdeshébergeursTrèspermissifsurlestyledeprogrammationConservedesmécanismestrèsprochesdelafaçond’écrirelesprogrammesenscriptsCGIServeurd’exécutionPHPdédié(PHP-FPM)

61

InvocationdesprogrammesPHP

62

Contexted’invocationDonnéestransmisesauserveurWebvialarequêteHTTPURL

Arguments(URL-encoded)En-têtes

CookiesDonnées

contenu(payload)delarequête(ex.donnéesdeformulairespourunPOST)

63

Lechoixduprogrammeàinvoquerestdéterminéparunecombinaisond’éléments(aminimavialechemindansl’URL)

Laconfigurationduserveurdéterminelesrèglesàappliquer

64

LeserveurWebpeutfiltrerlesdonnéesreçuesdanslarequêteIlinvoqueun«processus»oul’exécutiond’unefonctionsurl’APId’unmoduleIltransmetlesdonnéesauprogramme

argumentsd’unprocessus(CGI)variablesd’environnement(CGI)paramètresdesfonctionsdesAPIs,ouvariablesdulangagedeprogrammation(moduleintégré)

65

Résultatsd’exécutionRésultatd’unprogramme(POSIX)

Codederetoursystème(exécutiond’unprocessus):0ou!=0

SortiestandardduprogrammeErreurstandard?

66

ConversionenréponseHTTP

Codederetour->Codedestatut

0 ⇒ 200!=0 ⇒ 5xx

67

SortiesStandard(stdout)telle-quelledansréponseHTTP:attentionauformat

Headers:succès,échecs,redirections,…Cookies:sessions

LignevideContenududocument:

HTMLAutresformats(APIs:JSON,…)

Erreurstandard(stderr):dansleslogsduserveur?

68

ServeurHTTPintégréàPHPInvocationserveurHTTPintégréàPHP:

Touteslesrequêtessonttraitéesparl’exécutiond’unscriptPHParbitraireprésentdanspublic/oupardéfautpublic/index.php:URL Programme Args

http://localhost:8000/test.php public/test.php http://localhost:8000/test.php?hello public/test.php hellohttp://localhost:8000/ public/index.php http://localhost:8000/hello public/index.php hellohttp://localhost:8000/index.php?hello public/index.php hello

php-Slocalhost:8000-tpublic/

69

ApplicationPHPSymfonyInvocationdeméthodesdansuneclassepourgérerdescheminsd’accèsàdesressources.Leprogrammeurn’écritpaslepointd’entréeindex.phpLeframeworkfournituncomposantoffrantdesfonctionsderoutage:décodageducontexteHTTPpourinvoquerlabonneméthodedelabonneclasseLeprogrammeurn’aplusqu’àécrireuneclassePHP:programmationévénementielledansuncontexteobjet

70

TakeawayclientHTTPserveurHTTPmodèledecouches(3et+)

présentationtraitementaccèsauxdonnées

formatdesrequêtes/réponsesdansHTTPrequêtesGET,POST,…statuscodes:200,40x,…invocationdesprogrammesquigénèrentduHTML

71

AnnexesCf. pourdesannexesavecplusdedétails../poly.pdf

72

file:///CSC4101/cm-02/poly.pdf

Ensuite…

73

Toutdesuite,séanceTPn°2HTTPTestd’exécutiond’uneapplicationWeb«fil-rouge»enPHP,s’exécutantenlocal

74

Hors-présentield’iciauprochaincours3hàcaserdanslasemaine

75

ChoixdesbinômespourprochaineséancedeTPpourdébutduprojet

binômedanslemêmegroupenechangerapasparlasuite

76

Q/R

77

CopyrightDocumentpropriétédesesauteursetdeTélécomSudParis(saufexceptionsexplicitementmentionnées).Réservéàl’utilisationpourlaformationinitialeàTélécomSudParis.

78