de Moshe Vilner

Cele mai bune moduri de conectare la server utilizând Angular CLI

Cele mai bune moduri de conectare la server utilizand Angular

Toată lumea care a folosit CLI unghiular știe că este un instrument puternic care poate duce un job de dezvoltare front-end la un nivel complet diferit. Are toate sarcinile obișnuite, cum ar fi reîncărcarea live, transpunerea dactilografiilor, minificarea și multe altele. Și totul este preconfigurat și gata de utilizare cu o singură comandă simplă:

ng build, ng serve, ng test.

Dar există o sarcină (și una foarte importantă) care trebuie configurată odată ce aplicația este gata să înceapă să afișeze unele date de pe server …

Da, indiferent cât de mare este cadrul angular și cât de rapid și performant este componentele sale – la final scopul SPA (aplicația cu o singură pagină) este de a interacționa cu serverul prin cereri HTTP.

Iată primul obstacol care apare înaintea fiecărui începător Angular CLI: proiectul Angular rulează pe propriul server (care rulează implicit la http: // localhost: 4200). Prin urmare, solicitările către serverul API sunt între domenii, și, după cum s-ar putea să știți, securitatea browserului web nu permite efectuarea de cereri pe mai multe domenii.

Abordarea nr. 1: proxy

Desigur, oamenii de la Angular CLI au prevăzut această problemă și chiar au construit o opțiune specială pentru rularea unui proiect Angular utilizând o configurație proxy:

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

Ce este un proxy, s-ar putea să întrebați? Ei bine, browserele nu vă permit să faceți cereri pe mai multe domenii, dar serverele o fac. Utilizarea opțiunii proxy înseamnă că îi spuneți serverului Angular CLI să gestioneze solicitarea trimisă de la Angular și să o retransmită de pe serverul de dezvoltare. În acest fel, cel care „vorbește” cu serverul API este serverul Angular CLI.

Configurarea proxy necesită proxy.conf.json fișier care trebuie adăugat la proiect. Acesta este un fișier JSON cu câteva setări de bază. Iată un exemplu al conținutului proxy.conf:

{  "/api/*": {    "target": "http://localhost:3000",    "secure": false,    "pathRewrite": {"^/api" : ""}  }}

Acest cod înseamnă că toate cererile care încep cu api / va fi resentit la http: // localhost: 3000 (care este adresa serverului API)

Abordarea nr. 2: CORS

Securitatea browserului nu vă permite să faceți cereri pe mai multe domenii decât dacă Control-Allow-Origin antetul există la răspunsul serverului. Odată ce v-ați configurat serverul API pentru a „răspunde” cu acest antet, puteți prelua și posta date dintr-un domeniu diferit.

Această tehnică se numește partajarea resurselor încrucișate sau CORS. Majoritatea serverelor și cadrelor de servere comune, cum ar fi Node.js Expres, sau Java Spring Boot poate fi configurat cu ușurință pentru a face CORS disponibil.

Iată câteva exemple de cod care setează serverul Node.js Express să utilizeze CORS:

const cors = require('cors'); //<-- required installing 'cors' (npm i cors --save)const express = require('express');const app = express();app.use(cors()); //<-- That`s it, no more code needed!

Rețineți că, atunci când utilizați CORS, înainte ca fiecare dintre solicitările HTTP să fie trimise, va urma după solicitarea OPȚIUNI (la aceeași adresă URL) care verifică dacă CORS protocolul este înțeles. Această „cerere dublă” vă poate afecta performanța.

Cele mai bune moduri de conectare la server utilizand Angular

Abordarea producției

Ok, proiectul dvs. Angular „vorbește” ușor cu serverul, obține și trimite date în mediul dezvoltator. Dar momentul implementării a venit în sfârșit și aveți nevoie ca aplicația dvs. angulară frumoasă și preformantă să fie găzduită undeva (departe de Papa Angular CLI). Deci, din nou, vă confruntați cu aceeași problemă: cum să faceți conectarea la server.

Abia acum există o mare diferență: în mediul de producție (după alergare ng build comandă), aplicația Angular nu este mai mult decât o grămadă de fișiere HTML și JavaScript.

De fapt, decizia cu privire la modul de găzduire a aplicației pe serverul de producție este o decizie arhitecturală, iar arhitectura depășește cu mult domeniul de aplicare al acestui articol. Dar există o opțiune pe care vă recomand să o luați în considerare.

Serviți fișiere statice de pe serverul API

Da, vă puteți găzdui proiectul Angular (odată ce are numai fișiere HTML și JavaScript) pe același server de unde sunt servite datele (API-urile).

Unul dintre avantajele acestei strategii este că acum nu vă confruntați cu probleme de „domenii multiple”, deoarece clientul și API-ul sunt de fapt pe același server!

Desigur, această abordare necesită configurarea corectă a serverului API.

Iată codul care expune directorul „public” unde pot fi găzduite fișiere angulare atunci când se utilizează serverul Node Express:

app.use(express.static('public'));  //<-- public directory that contains all angular files

Rețineți că, în acest caz, modul în care aplicația dvs. accesează API-ul în mediul de dezvoltare va fi diferit de modul în care API-ul l-a accesat la producție. Astfel, este posibil să fie nevoie să utilizați diferite adrese URL HTTP în medii diferite (cum ar fi api / utilizatori / 1 la dev și utilizatori / 1 la producție). Puteți utiliza opțiunea de mediu a Angular CLI pentru a realiza acest lucru:

// users.service.ts
const URL = 'users';return this.http.get(`${environment.baseUrl}/${URL}`);...
// example of environment.ts file:export const environment = {  production: false,  baseUrl: 'api',//<-- 'API/' prefix needed for proxy configuration };
// example of environment.prod.ts file:export const environment = {  production: true,  baseUrl: '', //<-- no 'API/' prefix needed};

Concluzie

CLI angular este fără îndoială un instrument foarte puternic și robust. Ne face viața de dezvoltatori front-end mai ușoară din multe puncte de vedere. Dar vă solicită, de asemenea, să luați o decizie arhitecturală cu privire la conexiunea la serverul API. Prin urmare, aveți nevoie de o înțelegere clară a diferitelor moduri de comunicare client-server.

Acest articol enumeră două abordări de gestionare a acestei probleme în mediul dezvoltatorului și, de asemenea, o recomandare despre arhitectura de producție.
Încercați să jucați cu diverse compilații și să vedeți care dintre ele vi se pare mai convenabilă pentru dvs. și echipa dvs.

Distrează-te și anunță-mă cum merge!