Angular CLI kullanarak sunucuya bağlanmanın en iyi yolları

Angular CLI'yi kullanan herkes, ön uç geliştirme işini tamamen farklı bir seviyeye getirebilecek güçlü bir araç olduğunu biliyor. Canlı yeniden yükleme, typescript transpiling, minification ve daha fazlası gibi tüm ortak görevlere sahiptir. Ve hepsi önceden yapılandırılmış ve basit bir komutla kullanıma hazır:

inşaat, servis, test.

Ancak, uygulama sunucudan bazı verileri göstermeye hazır olduğunda, yapılandırılması gereken bir (ve çok önemli) bir görev var…

Evet, Angular çerçevesinin ne kadar büyük olduğu ve bileşenlerinin ne kadar çabuk ve performans gösterdiği önemli değildir - sonunda SPA'nın (tek sayfa uygulamasının) amacı HTTP istekleriyle sunucu ile etkileşimde bulunmaktır.

Ve işte her Angular CLI acemisinden önce görünen ilk engel: Angular projesi kendi sunucusu üzerinde çalışıyor (varsayılan olarak http: // localhost: 4200 de çalışıyor). Bu nedenle, API sunucusuna yapılan istekler etki alanları arasındadır ve bildiğiniz gibi, web tarayıcısının güvenliği etki alanları arası istekte bulunmalarına izin vermez.

Yaklaşım # 1: vekil

Tabii ki, Angular CLI'daki insanlar bu sorunu ön görüyor ve hatta bir proxy yapılandırması kullanarak bir Açısal proje yürütmek için özel bir seçenek geliştirdi:

hizmet —-proxy-config proxy.conf.json

Proxy nedir, sorabilirsiniz? Peki, tarayıcılar etki alanları arası talepte bulunmanıza izin vermez, ancak sunucular bunu yapar. Proxy seçeneğini kullanmak, Angular CLI’ya sunucusuna Angular’den gönderilen isteği işleme koymasını ve geliştirme sunucusundan tekrar göndermesini istemeniz anlamına gelir. Bu şekilde, API’nin sunucusuyla “konuşan”, Angular CLI’nin sunucusudur.

Proxy yapılandırması, proxy.conf.json dosyasının projeye eklenmesini gerektirir. Bu, bazı temel ayarlara sahip bir JSON dosyasıdır. Proxy.conf içeriğine bir örnek:

{
  "/ api / *": {
    "target": "http: // localhost: 3000",
    "güvenli": yanlış,
    "pathRewrite": {"^ / ​​api": ""}
  }
}

Bu kod, api / ile başlayan tüm isteklerin http: // localhost: 3000'e (API sunucusunun adresi olduğu) gönderileceği anlamına gelir.

Yaklaşım # 2: CORS

Tarayıcı güvenliği, sunucunun yanıtında Control-Allow-Origin başlığı bulunmadığı sürece etki alanları arası istekler yapmanıza izin vermez. API sunucunuzu bu başlık ile "cevap ver" olacak şekilde yapılandırdıktan sonra, farklı bir alandan veri alabilir ve gönderebilirsiniz.

Bu teknik Çapraz Kökenli Kaynak Paylaşımı veya CORS olarak adlandırılır. Node.js’in Express veya Java Spring Boot gibi yaygın sunucular ve sunucu çerçevelerinin çoğu, CORS’u kullanılabilir hale getirmek için kolayca yapılandırılabilir.

İşte Node.js Express sunucusunu CORS kullanacak şekilde ayarlayan bazı örnek kod:

const cors = zorunlu ('cors'); // <- 'cors' kurulumu gerekli (npm i cors - save)
const express = zorunlu ('express');
const uygulaması = express ();
app.use (CORS ()); // <- Bu kadar, daha fazla kod gerekmez!

CORS kullanırken, her HTTP isteğinin gönderilmesinden önce, CORS protokolünün anlaşılıp anlaşılmadığını görmek için kontrol eden OPTIONS isteğinden sonra (aynı URL’de) takip edeceğini unutmayın. Bu “çifte talep” performansınızı etkileyebilir.

Üretim Yaklaşımı

Tamam, Angular projeniz sunucu ile sorunsuz konuşuyor, geliştirici ortamında veri alıyor ve gönderiyor. Ancak dağıtım zamanı nihayet geldi ve güzel ve preformant Angular uygulamasına bir yerde (Papa Angular CLI'dan çok uzak) sunulması gerekiyor. Bu yüzden yine aynı problemle karşı karşıya kalıyorsunuz: sunucuya nasıl bağlanacağını.

Ancak şimdi büyük bir fark var: Üretim ortamında (build komutunu çalıştırdıktan sonra), Angular uygulaması bir grup HTML ve JavaScript dosyasından başka bir şey değil.

Aslında uygulamanın yapım sunucusunda nasıl barındırılacağına dair karar mimari bir karardır ve mimarlık bu makalenin kapsamı dışındadır. Ama düşünmeni önerdiğim bir seçenek var.

API Sunucusundan Statik Dosyaları Sunma

Evet, Angular projenizi (yalnızca HTML ve JavaScript dosyalarına sahip olduktan sonra) verilerin (API'lerin) sunulduğu sunucuda barındırabilirsiniz.

Bu stratejinin avantajlarından biri, şu anda herhangi bir “etki alanları arası” sorunla karşı karşıya kalmamanızdır, çünkü istemci ve API aslında aynı sunucudadır!

Tabii ki, bu yaklaşım API sunucusunun doğru bir şekilde yapılandırılmasını gerektirir.

Node Express sunucusunu kullanırken Açısal dosyaların barındırılabileceği “public” dizinini gösteren kod:

app.use (express.static) (kamu '); // <- tüm açısal dosyaları içeren ortak dizin

Bu durumda, uygulamanızın geliştirme ortamındaki API'ye erişme biçiminin, API'nin üretimde erişme biçiminden farklı olacağını unutmayın. Bu nedenle farklı ortamlarda farklı HTTP URL'leri kullanmanız gerekebilir (dev'de api / users / 1 ve üretimde kullanıcılar / 1 gibi). Bunu başarmak için Angular CLI’nin ortam seçeneğini kullanabilirsiniz:

// users.service.ts
const URL = 'kullanıcılar';
this.http.get (`$ {environment.baseUrl} / $ {URL}`) döndürün;
...
// environment.ts dosyası örneği:
const ortamını dışa aktar = {
  üretim: yanlış,
  baseUrl: 'api', // <- 'API /' proxy yapılandırması için gerekli önek
};
// environment.prod.ts dosyası örneği:
const ortamını dışa aktar = {
  üretim: doğru
  baseUrl: '', // <- 'API /' ön ekine gerek yok
};

Sonuç

Açısal CLI şüphesiz çok güçlü ve sağlam bir araçtır. Ön uç geliştiriciler olarak hayatımızı birçok yönden kolaylaştırıyor. Ancak, API’nin sunucusuyla bağlantı hakkında mimari bir karar vermenizi gerektirir. Bu nedenle, müşteri-sunucu iletişiminin kurulmasının çeşitli yollarını açıkça anlamanız gerekir.

Bu makalede, geliştirici ortamında bu sorunu ele alan iki yaklaşım ve ayrıca üretim mimarisi ile ilgili bir öneri listelenmiştir.
Çeşitli derlemelerle oynamaya çalışın ve hangisinin kendinize ve ekibinize daha uygun olduğunu görün.

Eğlenin ve bana nasıl gittiğini bildirin!