Најбољи начини повезивања са сервером помоћу Ангулар ЦЛИ

Сви који су користили Ангулар ЦЛИ знају да је то моћан алат који напредни развојни посао може подићи на потпуно другачији ниво. Има све уобичајене задатке попут поновног учитавања уживо, превођења писаних текстова, минификације и још много тога. И све је то унапред конфигурисано и спремно за употребу помоћу једне једноставне команде:

ng build, ng serve, ng test.

Али постоји један (и веома важан) задатак који треба конфигурисати када апликација буде спремна за почетак приказивања неких података са сервера ...

Да, без обзира на то колико је Ангулар фрамеворк сјајан и колико су брзе и ефикасне његове компоненте - на крају је сврха СПА (апликација на једној страници) интеракција са сервером путем ХТТП захтева.

И ево прве препреке која се појављује пред сваким почетником Ангулар ЦЛИ-а: пројекат Ангулар ради на сопственом серверу (који се подразумевано покреће на // лоцалхост: 4200). Према томе, захтеви за АПИ сервер су међудоменски и, као што можда знате, безбедност веб прегледача онемогућава прављење захтева за више домена.

Приступ бр. 1: прокси

Наравно, људи у Ангулар ЦЛИ-у су предвидели овај проблем и чак су изградили посебну опцију за покретање Ангулар пројекта користећи проки конфигурацију:

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

Шта је прокси, можете питати? Па, прегледачи вам не дозвољавају да подносите захтеве за више домена, али сервери дозвољавају. Употреба проки опције значи да поручујете серверу Ангулар ЦЛИ-а да обрађује захтев послат из Ангулар-а и поново га пошаље са развојног сервера. На овај начин, онај ко „разговара” са АПИ сервером је сервер Ангулар ЦЛИ-а.

Конфигурација прокија захтева проки.цонф.јсондатотека која се додаје пројекту. Ово је ЈСОН датотека са неким основним подешавањима. Ево примера садржаја проки.цонф :

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

Овај код значи да ће сви захтеви који почињу са апи / бити поново послати // лоцалхост: 3000(која је адреса АПИ сервера)

Приступ бр. 2: ЦОРС

Сигурност прегледача вам не дозвољава да упућујете захтеве за више домена уколико Control-Allow-Originзаглавље не постоји на одговор сервера. Једном када сте конфигурисали свој АПИ сервер да '' одговара '' са овим заглављем, можете да преузмете и објавите податке са другог домена.

Ова техника се назива Цросс Оригин Ресоурце Схаринг (ЦОРС). Већина уобичајених сервера и серверских оквира попут Ноде.јс 'Екпресс или Јава Спринг Боот могу се лако конфигурисати тако да ЦОРС буду доступни.

Ево неколико примера кода који поставља сервер Ноде.јс Екпресс да користи ЦОРС:

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!

Имајте на уму да ће приликом коришћења ЦОРС-а, пре него што се пошаље сваки ХТТП захтев, следити након захтева ОПТИОНС (на истој УРЛ-у) који проверава да ли се ЦОРС протокол разуме. Овај „двоструки захтев“ може утицати на ваше перформансе.

Производни приступ

Ок, ваш Ангулар пројекат глатко „разговара“ са сервером, прима и шаље податке у окружењу програмера. Али време примене је коначно дошло и треба вам да ваша лепа и преформантна апликација Ангулар буде негде хостована (далеко од Папа Ангулар ЦЛИ). Дакле, опет се суочавате са истим проблемом: како то учинити да се повеже са сервером.

Тек сада постоји велика разлика: у производном окружењу (након покретања ng buildкоманде) апликација Ангулар није више од гомиле ХТМЛ и ЈаваСцрипт датотека.

Заправо одлука о томе како хостовати апликацију на производном серверу је архитектонска одлука, а архитектура је далеко изван делокруга овог чланка. Али постоји једна опција коју препоручујем да узмете у обзир.

Послужујте статичке датотеке са АПИ сервера

Да, свој Ангулар пројекат можете сместити (када има само ХТМЛ и ЈаваСцрипт датотеке) на истом серверу одакле се пружају подаци (АПИ-ји).

Једна од предности ове стратегије је што се сада не суочавате са проблемима са „више домена“, јер су клијент и АПИ заправо на истом серверу!

Наравно, овај приступ захтева да АПИ сервер буде правилно конфигурисан.

Ево кода који излаже „јавни“ директоријум у коме се могу хостовати Ангулар датотеке када се користи Ноде Екпресс сервер:

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

Имајте на уму да ће се у овом случају начин на који апликација приступа АПИ-ју у развојном окружењу разликовати од начина на који му је АПИ приступио у производњи. Стога ћете можда морати да користите различите ХТТП УРЛ адресе у различитим окружењима (попут апи / усерс / 1 на дев-у и усерс / 1 на продукцији). Можете да користите опцију окружења Ангулар ЦЛИ да бисте то постигли:

// 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};

Закључак

Угаона ЦЛИ је без сумње врло моћан и робустан алат. То нам на много начина олакшава живот развојних програмера. Али такође захтева да донесете архитектонску одлуку о вези са АПИ сервером. Због тога вам је потребно јасно разумевање различитих начина на које се комуникација клијент-сервер може успоставити.

Овај чланак наводи два приступа решавања овог проблема у развојном окружењу и такође једну препоруку о производној архитектури.

Покушајте да се играте са разним компилацијама и погледајте која се вама више допада и вама и вашем тиму.

Забавите се и јавите ми како то иде!