De beste måtene å koble til serveren ved å bruke Angular CLI

Alle som har brukt Angular CLI vet at det er et kraftig verktøy som kan ta en front-end utviklingsjobb til et helt annet nivå. Det har alle de vanlige oppgavene som live reload, typeskriving, minifisering og mer. Og det hele er forhåndskonfigurert og klar til bruk med en enkel kommando:

ng build, ng serve, ng test.

Men det er en (og en veldig viktig) oppgave som må konfigureres når applikasjonen er klar til å begynne å vise data fra serveren ...

Ja, uansett hvor flott Angular-rammeverket er, og hvor raskt og performant dets komponenter - på slutten er SPAs (applikasjon på én side) hensikten å samhandle med serveren gjennom HTTP-forespørsler.

Og her er det første hinderet som dukker opp foran hver Angular CLI-nybegynner: Angular-prosjektet kjøres på sin egen server (som kjøres som standard på http: // localhost: 4200). Derfor er forespørslene til API-serveren tvers av domener, og som du kanskje vet, tillater sikkerheten til nettleseren ikke å lage forespørsler på tvers av domener.

Tilnærming nr. 1: fullmektig

Folkene på Angular CLI forutså selvfølgelig dette problemet og bygde til og med et spesielt alternativ for å kjøre et Angular-prosjekt ved hjelp av en proxy-konfigurasjon:

ng serve —- proxy-config proxy.conf.json

Hva er en fullmakt, kan du spørre? Nettlesere lar deg ikke sende forespørsler på tvers av domener, men servere gjør det. Å bruke proxy-alternativet betyr at du ber Angular CLI-serveren om å håndtere forespørselen sendt fra Angular og sende den videre fra utviklingsserveren. På denne måten er den som "snakker" med API-serveren Angular CLIs server.

Proxy-konfigurasjonen krever at proxy.conf.json-filen legges til prosjektet. Dette er en JSON-fil med noen grunnleggende innstillinger. Her er et eksempel på innholdet i proxy.conf:

{
  "/ api / *": {
    "target": "http: // localhost: 3000",
    "sikker": falsk,
    "pathRewrite": {"^ / ​​api": ""}
  }
}

Denne koden betyr at alle forespørsler som starter med api / vil bli sendt på nytt til http: // localhost: 3000 (som er API-serverens adresse)

Tilnærming nr. 2: CORS

Nettlesersikkerhet tillater deg ikke å sende forespørsler på tvers av domener med mindre kontroll-tillat-opphavstittelen finnes på serverens svar. Når du har konfigurert API-serveren til ‘svar’ med denne overskriften, kan du hente og legge ut data fra et annet domene.

Denne teknikken kalles Cross Origin Resource Sharing, eller CORS. De fleste vanlige servere og serverrammer som Node.js 'Express eller Java Spring Boot kan enkelt konfigureres for å gjøre CORS tilgjengelig.

Her er noen eksempelkode som setter Node.js Express-serveren til å bruke CORS:

const cors = krever ('cors'); // <- påkrevd å installere 'cors' (npm i cors - lagre)
const express = kreve ('express');
const app = express ();
app.use (kor ()); // <- Det er det, det trengs ikke mer kode!

Merk at når du bruker CORS, før hver av HTTP-forespørslene blir sendt, vil den følge etter OPTIONS-forespørselen (på samme URL) som kontrollerer om CORS-protokollen er forstått. Denne "doble forespørselen" kan påvirke resultatene dine.

Produksjonsmetode

OK, Angular-prosjektet ditt "snakker" jevnt med serveren, henter og sender data i utviklermiljøet. Men tidspunktet for distribusjon er endelig kommet, og du trenger at den vakre og preformante Angular-appen din skal være vert et sted (langt borte fra Papa Angular CLI). Så igjen står du overfor det samme problemet: hvordan få det til å koble til serveren.

Bare nå er det en stor forskjell: i produksjonsmiljøet (etter å ha kjørt ng build-kommando) er Angular-appen ikke mer enn en haug med HTML- og JavaScript-filer.

Avgjørelsen om hvordan du skal være vert for applikasjonen på produksjonsserveren er faktisk en arkitektonisk beslutning, og arkitektur er langt utenfor omfanget av denne artikkelen. Men det er ett alternativ jeg anbefaler at du vurderer.

Server statiske filer fra API-serveren

Ja, du kan være vert for ditt Angular-prosjekt (når det bare har HTML- og JavaScript-filer) på den samme serveren der data (APIer) blir servert fra.

En av fordelene med denne strategien er at du nå ikke møter noen "tverr-domene" -problemer, siden klienten og API faktisk er på samme server!

Denne tilnærmingen krever selvfølgelig at APIens server er konfigurert riktig.

Her er koden som viser "den offentlige" katalogen der Angular-filer kan være vert når du bruker Node Express-serveren:

app.use (express.static ( 'offentlige')); // <- offentlig katalog som inneholder alle kantfiler

Merk at i dette tilfellet vil appen din få tilgang til API i utviklingsmiljøet være forskjellig fra måten APIen fikk tilgang til den ved produksjon. Dermed kan det hende du må bruke forskjellige HTTP-URL-er i forskjellige miljøer (som api / brukere / 1 på dev og brukere / 1 i produksjonen). Du kan bruke Angular CLIs miljøalternativ for å oppnå dette:

// brukere.service.ts
const URL = 'brukere';
returner dette.http.get (`$ {miljø.baseUrl} / $ {URL}`);
...
// eksempel på miljø.ts-fil:
eksport konst miljø = {
  produksjon: falsk,
  baseUrl: 'api', // <- 'API /' prefiks som trengs for proxy-konfigurasjon
};
// eksempel på miljø.prod.ts-fil:
eksport konst miljø = {
  produksjon: sant,
  baseUrl: '', // <- ingen 'API /' prefiks nødvendig
};

Konklusjon

Angular CLI er uten tvil et veldig kraftig og robust verktøy. Det gjør livene våre som frontend-utviklere enklere på mange måter. Men det krever også at du tar en arkitektonisk beslutning om tilkoblingen til API-serveren. Derfor trenger du en klar forståelse av de forskjellige måtene klient-server kommunikasjon kan etableres.

Denne artikkelen lister opp to fremgangsmåter for å håndtere dette problemet i utviklermiljøet, og også en anbefaling om produksjonsarkitektur.
Prøv å spille med forskjellige samlinger og se hvilken som føles mer praktisk for deg og laget ditt.

Ha det gøy og la meg få vite hvordan det går!