Nurga all - kuidas puhverserverit puhverserverile puhverserverdada

Taustprogrammi API-kõnede puhverserveri konfigureerimise selgitamine näitega.

Foto autor Jens Herrndorff saidil Unsplash

Rakenduses Nurga all räägime arendusetapis sageli taustiserveritega, uurime kõiki selle artikli stsenaariume. Siin on teemad, mida käsitleme.

  • Mis on puhverserver
  • Näidisprojekt
  • proxy.config.json suvandid
  • Puhverserveri seadistamine nurga CLI abil
  • Erinevad konfigureerimise viisid
  • Kirjutage tee URL ümber
  • Mitu rakenduse kirjet ühte API lõpp-punkti
  • Mitu rakenduse kirjet mitme lõpp-punktiga
  • Kokkuvõte

Mis on puhverserver

Üldiselt toimib puhverserver või puhverserver väravana teie rakenduse ja Interneti vahel. See on vaheiserver kliendi ja serverite vahel, edastades kliendi taotlused ressurssidele.

Nurga all kasutame seda puhverserverit sageli arengukeskkonnas. Nurk kasutab Webpack dev-serverit rakenduse arendamise režiimis teenindamiseks. Kui vaatleme järgmist diagrammi, töötab rakenduse kasutajaliides pordil 4200 ja taustiserver töötab pordil 3700. Kõik kõned, mis algavad / api-ga, suunatakse tagasi taustiserverisse ja kõik ülejäänud langevad tagasi samasse pordi.

Järgmistes osades näeme, kuidas seda ja muid võimalusi ka teostada.

kõigi URL-ide puhverserver algab / api-st

Näidisprojekt

Järgige neid käske näidisprojekti jaoks ja olete CLI-puhverserveri nurga seadistamiseks valmis.

// projekti kloonimine
git kloon https://github.com/bbachi/angular-proxy-example
// paigalda sõlmeserveri sõltuvused
npm installimine
// cd to ui
cd appui
// installige rakenduste ui sõltuvused
np install

Kui olete kõik sõltuvused installinud, saate nii nurgarakenduse kui ka sõlme js-serveri käivitada vastavalt 4200 ja 3070.

Rakenduse Nurk saate käivitada nende käskudega npm start või ng serveeri ja siin on nurkrakendus 4200.

Nurgarakendus töötab 4200-l

Alustame serverit selle käsuga npm start ja katsetage seda API-d sadamas 3070.

API töötab sadamas 3070

proxy.config.json suvandid

sihtmärk: siin peame määratlema taustaprogrammi URL-i.

pathRewrite: tee muutmiseks või ümberkirjutamiseks peame seda võimalust kasutama

changeOrigin: kui teie taustprogrammi API ei tööta localhostis, peame selle lipu tõeks tegema.

logLevel: Kui soovite kontrollida, kas puhverserveri konfiguratsioon töötab korralikult või mitte, tuleks see lipp siluda.

ümbersõit: mõnikord peame puhverserverist mööda minema, võime selle abil funktsiooni määratleda. Kuid see peaks määratlema proxy.config.jsoni asemel saidil proxy.config.js.

Puhverserveri seadistamine nurga CLI abil

Nüüd töötab rakendus ja server erinevates portides. Luuakse puhverserver nende vaheliseks suhtlemiseks.

Esimene asi, mida vajate, on see puhverserver.config.json. Me määratleme kõigi URL-ide eesmärgi, mis algab tähega / api.

Teine asi on anda Angularile teada, et meil on see proxy.config.json paigas. Saame seda teha, lisades puhverserveri konfiguratsiooni lipu, käivitades rakenduse nagu allpool. Kui see on käivitatud, näeme sõnumit, mis näitab, et kõik URL-id, mis algavad tähega / api, suunatakse ümber pordis 3070 töötavale sõlme serverile.

npm käivitusskript

Nüüd saame rakendust testida ja sätteid serverist näha

serverist tulevad seaded

Erinevad konfigureerimise viisid

Teine võimalus puhverserveri konfigureerimiseks nurgaprojektis on määratlemine lehel angular.json.

proxyConfig nurgas.json

Võtame kokku viisid siin

  • Lisage see teenus - proxy-config proxy.conf.json algskriptile paketis.json
  • Määratlege jaotises angular.json ülaltoodud jaotise all.

Kirjutage tee URL ümber

Kui URL-id muutuvad, kirjutame sageli taustaprogrammiserverite lõpp-punktide tee ümber. Me saame seda teha saidiga pathRewrite.

Saame aru marsruudi kirjutamise võimalusest. Näiteks muudetakse meie taustaprogrammi URL / api / seaded väärtuseks / api / app / seaded ja tahame arenduses enne tootmisele minekut testida. Selle saavutame valikuga pathRewrite nagu allpool.

Niisiis, kirjutame / api / seades ümber / api / app / seaded ja / api / kasutajad kasutajatele.

Siin on konsooli väljund rakenduse käivitamise ajal.

nurgalise puhverserveri URL-i teede ümberkirjutamine

Mitu rakenduse kirjet ühte API lõpp-punkti

Mõnikord on meie rakenduses mitu teenust moodulit. Meil võib olla stsenaarium, kus mitu sisestust või teenust kutsuvad sama API lõpp-punkti.

Sel juhul peame määratlema proxy.config.js proxy.config.jsoni asemel. Ärge unustage seda ka lehele angular.json lisada.

nurgeline.json

Mitu rakenduse kirjet mitme lõpp-punktiga

Oleme näinud, kuidas määratleda mitu sisestust samasse lõpp-punkti. Vaatame mitu lõppnähtuse stsenaariumi mitut sisestust.

puhverserver mitme API jaoks

Näiteks on meil kolm API-t, mis töötavad sadamates 3700, 3800 ja 3900 ning teie APP peaks nende API-dega rääkima.

Kõik, mida peame lisama proxy.config.jsonile mitu kirjet. Siin on selle seadistuse konfiguratsioon ja edukaks suhtlemiseks peame veenduma, et nendes portides töötavad kõik API-d.

Kokkuvõte

  • Nurga all kasutatakse puhverserverit enamasti arenduskeskkonnas serveri ja kasutajaliidese vahelise suhtluse hõlbustamiseks.
  • Peame olema, et erinevates sadamates töötab taustaserver ja kasutajaliides.
  • Proxy.config.json on fail, mis sisaldab kogu teavet taustprogrammi API URL-ide kohta.
  • Edukaks suhtlemiseks peame veenduma, et nurkrakendus ja taustprogrammid töötavad erinevates portides.
  • Üks konfigureerimine on kahel viisil: lisamine nurka.json ja teine ​​lisab puhverserveri konfiguratsiooni lipu skriptile.
  • Me võime selle tee ümber kirjutada valikuga pathRewrite.
  • Proxy.config.js abil saame proksida mitu sisestust ühele taustaprogrammi API-le.
  • Saame puhverserverina sisestada ka mitu taustaprogrammi.

Tutvuge nurga all olevate suhtlusharjumustega ja uurige, kui palju võimalusi nurgas suhelda saab.

Nurgaühiku testimisel saate lisada kohandatud sobitajaid. Siit saate teada, kuidas

Täname, et lugesite