Vinkelformet - Hvordan proxy-backes serveren

At forklare, hvordan man konfigurerer en proxy til backend API-opkald med et eksempel.

Foto af Jens Herrndorff på Unsplash

I Angular-appen taler vi ofte med backend-servere i udviklingsfasen, vi vil udforske alle scenarierne i denne artikel. Her er de emner, vi dækker.

  • Hvad der nærmer sig
  • Eksempel Projekt
  • proxy.config.json indstillinger
  • Proxyopsætning med kantet CLI
  • Forskellige måder at konfigurere
  • Omskriv URL'en til stien
  • Flere appindgange til et API-slutpunkt
  • Flere appindgange med flere slutpunkter
  • Resumé

Hvad der nærmer sig

Generelt fungerer en proxy- eller proxyserver som en gateway mellem din app og internettet. Det er en mellemliggende server mellem klient og servere ved at videresende klientanmodninger til ressourcer.

I vinkel bruger vi ofte denne proxy i udviklingsmiljøet. Angular bruger webpack dev-server til at betjene appen i udviklingsfunktion. Hvis vi ser på følgende diagram, kører app UI på port 4200 og backend-server kører på port 3700. Alle opkald starter med / api vil blive omdirigeret til backend-serveren og resten falder tilbage til den samme port.

I efterfølgende sektioner vil vi se, hvordan vi også kan udføre dette og andre muligheder.

proxyer af alle URL'er starter med / api

Eksempel Projekt

Lad os følge disse kommandoer til eksempelprojektet, og du er klar til kantet CLI-proxyopsætning.

// klone projektet
git klon https://github.com/bbachi/angular-proxy-eksempel
// installere afhængigheder for nodeserver
npm installation
// cd til ui
cd appui
// installer app ui-afhængigheder
np installation

Når du har installeret alle afhængigheder, kan du starte både Angular app og node js-server på henholdsvis 4200 og 3070.

Du kan starte Angular-appen med disse kommandoer npm start eller ng serve, og her er Angular-appen der kører på 4200.

Den kantede app kører på 4200

Lad os starte serveren med denne kommando npm start og teste denne API på port 3070.

API kører på port 3070

proxy.config.json indstillinger

mål: Det er her vi er nødt til at definere backend-URL.

pathRewrite: Vi er nødt til at bruge denne indstilling til at redigere eller omskrive stien

ChangeOrigin: Hvis din backend API ikke kører på localhost, er vi nødt til at gøre dette flag sandt.

logLevel: Hvis du vil kontrollere, om proxy-konfiguration fungerer korrekt eller ikke, skal dette flag fejlsøges.

bypass: Nogle gange er vi nødt til at omgå proxy, vi kan definere en funktion med dette. Men det skal definere i proxy.config.js i stedet for proxy.config.json.

Proxyopsætning med kantet CLI

Nu kører app og server på forskellige porte. Lad os oprette en proxy til kommunikation mellem disse.

Den første ting du har brug for er denne proxy.config.json. Vi definerer målet for alle webadresserne starter med / api her.

Den anden ting er at lade Angular vide, at vi har denne proxy.config.json på plads. Vi kan gøre det ved at tilføje proxy-konfigurationsflagget, mens du starter appen som nedenfor. Når det er startet, kan vi se meddelelsen, der angiver, at alle de URL'er, der starter med / api, vil blive omdirigeret til nodejs-server, der kører på port 3070.

npm start script

Nu kan vi teste appen og se indstillingerne fra serveren

indstillinger, der kommer fra serveren

Forskellige måder at konfigurere

En anden måde at konfigurere proxy-konfiguration i Angular-projektet er at definere i angular.json.

proxyConfig i angular.json

Lad os opsummere måderne her

  • Tilføj dette ng serve - proxy-config proxy.conf.json til start-scriptet i package.json
  • Definer i vinkel.json under serverafsnit som ovenfor.

Omskriv URL'en til stien

Hver gang der sker en ændring af webadresserne, omskriver vi ofte stien til endendepunkterne til backend-servere. Vi kan gøre det med pathRewrite.

Lad os forstå pathRewrite-indstillingen. F.eks. Ændres vores backend-URL / api / indstillinger til / api / app / indstillinger, og vi vil teste under udvikling, inden den går til produktion. Vi kan opnå dette med option pathRewrite som nedenfor.

Så vi omskriver / api / indstilling til / api / app / indstillinger og / api / brugere til / brugere.

Her er konsolens output, mens du starter appen.

kantede proxy-omskrivning af URL-stier

Flere appindgange til et API-slutpunkt

Nogle gange har vi flere moduler med tjenester i vores app. Vi har muligvis et scenario, hvor flere poster eller tjenester kalder det samme API-endepunkt.

I dette tilfælde er vi nødt til at definere proxy.config.js i stedet for proxy.config.json. Glem ikke at tilføje det til angular.json.

angular.json

Flere appindgange med flere slutpunkter

Vi har set, hvordan man definerer flere poster til det samme slutpunkt. Lad os se på flere poster til flere slutpunkter.

proxy til flere API'er

For eksempel har vi tre API'er, der kører på havne 3700, 3800 og 3900, og din APP skal tale med disse API'er.

Alt hvad vi har brug for at tilføje flere poster til proxy.config.json. Her er konfigurationen for denne opsætning, og vi er nødt til at sikre, at alle API'er kører på disse porte for vellykket kommunikation.

Resumé

  • I Angular bruges proxy for det meste i udviklingsmiljøet for at lette kommunikationen mellem server og UI.
  • Vi skal have en backend-server og UI, der kører på forskellige porte.
  • Proxy.config.json er den fil, der indeholder alle oplysninger om API-adresser til backend.
  • Vi er nødt til at sikre, at Angular App og Backends kører på forskellige havne for at få en vellykket kommunikation.
  • Der er to måder at konfigurere den ene er at tilføje i vinkel.json, og en anden tilføjer et proxy-konfigurationsflag til startscriptet.
  • Vi kan omskrive stien med indstillingen pathRewrite.
  • Vi kan proxy flere poster til en backend API med proxy.config.js.
  • Vi kan også proxy flere poster til flere backends.

Tjek kommunikationsmønstrene i Angular, og find ud af, hvor mange måder du kan kommunikere på Angular.

Du kan tilføje tilpassede matchere i enhedstestning Angular. Find ud af, hvordan

Tak fordi du læste.