Angular CLI-dan foydalanib serverga ulanishning eng yaxshi usullari

Angular CLI-dan foydalangan har bir kishi bu juda kuchli darajadagi vosita ekanligini biladi, bu rivojlanish ishini butunlay boshqacha darajaga ko'tarishi mumkin. U jonli qayta yuklash, stsenariylarni ko'chirish, minifikatsiya qilish va boshqalar kabi umumiy vazifalarga ega. Va barchasi oldindan tuzilgan va bitta oddiy buyruq bilan foydalanishga tayyor:

ng qurish, xizmat qilish, ng sinov.

Lekin bitta (va juda muhim) vazifa bor, u dastur ba'zi ma'lumotlarni serverdan namoyish qilishni boshlashga tayyor bo'lgandan keyin sozlanishi kerak ...

Ha, burchak burchagi qanchalik katta bo'lmasin va uning tarkibiy qismlari qanchalik tez va sifatli bajariladi - oxirida SPA (bitta sahifali dastur) maqsadi HTTP so'rovlari orqali server bilan o'zaro aloqa qilishdir.

Va har bir Angular CLI yangi kelganida paydo bo'lgan birinchi to'siq: burchak loyihasi o'z serverida ishlaydi (u odatiy ravishda http: // localhost: 4200 da ishlaydi). Shuning uchun, API-serverga yuboriladigan so'rovlar o'zaro domen bo'lib, siz bilganingizdek, veb-brauzerning xavfsizligi o'zaro domen bo'yicha so'rovlar o'tkazishni taqiqlaydi.

1-yondashuv: ishonchli vakil

Albatta, Angular CLI-dagi odamlar bu masalani oldindan bilishgan va hatto proksi konfiguratsiyasidan foydalanib, burchakli loyihani amalga oshirish uchun maxsus imkoniyatni yaratishgan:

ng xizmatiga - proksi-konfiguratsiya proksi.conf.json

Ishonchli vakil nima o'zi? Xo'sh, brauzerlar sizga domenlararo domen so'rovlarini o'tkazishga ruxsat bermaydilar, ammo serverlar buni amalga oshiradilar. Proksi-ni ishlatish Angular CLI-ning serveriga Angular-dan yuborilgan so'rovni bajarishni va uni ishlab chiqish serveridan qayta yuborishni aytyapsiz degan ma'noni anglatadi. Shunday qilib, API serveri bilan "gaplashadigan" kishi Angular CLI serveridir.

Proksi konfiguratsiyasi proxy.conf.json faylini loyihaga qo'shishni talab qiladi. Bu ba'zi bir asosiy sozlamalarga ega JSON fayli. Proxy.conf tarkibiga misol:

{
  "/ api / *": {
    "target": "http: // localhost: 3000",
    "xavfsiz": noto'g'ri,
    "pathRewrite": {"^ / ​​api": ""}
  }
}

Ushbu kod api / bilan boshlanadigan barcha so'rovlar http: // localhost: 3000 (API server manzili) manziliga yuborilishini anglatadi.

2-yondashuv: CORS

Agar server javobida Control-Allow-Origin sarlavhasi mavjud bo'lmasa, brauzer xavfsizligi sizga domen so'rovlarini o'tkazishga imkon bermaydi. Ushbu sarlavha bilan API serveringizni '' Javob berish 'ga sozlaganingizdan so'ng, siz boshqa domendagi ma'lumotlarni olish va joylashtirishingiz mumkin.

Ushbu usul Cross Source Resurs Sharing yoki CORS deb nomlanadi. Node.js 'Express yoki Java Spring Boot kabi umumiy serverlar va serverlarning ko'pgina tuzilmalari CORS mavjudligi uchun oson sozlanishi.

Node.js Express serverini CORS-dan foydalanishga o'rnatadigan ba'zi bir misol kodi:

const cors = demand ('cors'); // <- "cors" ni o'rnatish zarur (npm i cors --save)
const express = zarur ('express');
const app = express ();
app.use (cors ()); // <- Bu shunchaki kod kerak emas!

E'tibor bering, CORS-dan foydalanganda, HTTP-ning har bir so'rovi yuborilishidan oldin, u OPTIONS so'rovidan keyin (xuddi shu URL-manzilda) CORS protokoli tushunilganligini tekshiradi. Ushbu "ikki tomonlama so'rov" sizning ishingizga ta'sir qilishi mumkin.

Ishlab chiqarish yondashuvi

Ok, sizning burchakli loyihangiz server bilan muammosiz "gaplashmoqda", ishlab chiqaruvchi muhitida ma'lumotlarni olish va yuborish. Ammo joylashtirish vaqti nihoyasiga yetdi va sizga chiroyli va o'zgaruvchan burchakli ilovangizni biron bir joyda (Papa Angular CLI-dan uzoqroq joyda) joylashtirilishini xohlaysiz. Shunday qilib, yana bir xil muammoga duch kelasiz: uni serverga ulanish uchun qanday qilish kerak.

Faqatgina hozirda katta farq bor: ishlab chiqarish muhitida (ng build buyrug'ini ishlatgandan so'ng), burchakli ilova HTML va JavaScript fayllaridan iborat.

Aslida dasturni ishlab chiqarish serverida qanday joylashtirish to'g'risida qaror me'moriy qaror bo'lib, arxitektura ushbu maqola doirasidan tashqarida. Ammo bitta variant bor, men sizga ko'rib chiqishni maslahat beraman.

Statik fayllarni API serveridan foydalaning

Ha, siz o'zingizning burchakli loyihangizni (faqat HTML va JavaScript fayllari mavjud bo'lsa) ma'lumotlar (API) taqdim etiladigan serverda joylashtirasiz.

Ushbu strategiyaning afzalliklaridan biri shundaki, endi siz hech qanday "domen" muammosiga duch kelmaysiz, chunki mijoz va API aslida bitta serverda!

Albatta, bu yondashuv API serverini to'g'ri sozlashni talab qiladi.

Node Express serveridan foydalanganda burchakli fayllar joylashtiriladigan "ommaviy" katalog ochilgan kod:

app.use (express.static ('public')); // <- barcha burchakli fayllarni o'z ichiga olgan umumiy katalog

Shuni yodda tutingki, bu holda, sizning ilovangizning ishlab chiqish muhitidagi API-ga kirish usuli, uni API ishlab chiqarishda unga kirish usulidan farq qiladi. Shunday qilib, turli xil muhitlarda turli xil HTTP URL-larni ishlatishingiz kerak bo'lishi mumkin (api / users / 1-da dev va foydalanuvchilar / ishlab chiqarishda 1). Bunga erishish uchun siz Angular CLI-ning atrof-muhit parametrlaridan foydalanishingiz mumkin:

// users.service.ts
const URL = 'foydalanuvchilar';
return this.http.get (`$ {environment.baseUrl} / $ {URL}`);
...
// environment.ts fayliga misol:
eksport const muhiti = {
  ishlab chiqarish: yolg'on,
  baseUrl: 'api', // <- 'API /' prefiksi proksi konfiguratsiyasi uchun kerak
};
// environment.prod.ts faylining namunasi:
eksport const muhiti = {
  ishlab chiqarish: haqiqiy,
  baseUrl: '', // <- no 'API /' prefiksi kerak emas
};

Xulosa

Burchakli CLI shubhasiz juda kuchli va mustahkam vositadir. Bu bizning hayotimizni oldingi ishlab chiqaruvchilar sifatida ko'p jihatdan osonlashtiradi. Shu bilan birga, sizdan API serveriga ulanish to'g'risida me'moriy qaror qabul qilishingizni talab qiladi. Shuning uchun siz mijoz-server aloqasini o'rnatishning turli usullarini aniq tushunishingiz kerak.

Ushbu maqolada ishlab chiqaruvchi muhitida ushbu muammoni hal qilishning ikkita yondashuvi va shuningdek ishlab chiqarish arxitekturasi bo'yicha bitta tavsiyalar keltirilgan.
Turli xil kompilyatsiyalar bilan o'ynashga harakat qiling va qaysi biri sizga va jamoangizga ko'proq qulayroq ekanligini ko'ring.

Xursand bo'ling va menga qanday o'tishini ayting!