Οι καλύτεροι τρόποι σύνδεσης στο διακομιστή χρησιμοποιώντας το Angular CLI

Όλοι όσοι έχουν χρησιμοποιήσει το Angular CLI γνωρίζουν ότι είναι ένα ισχυρό εργαλείο που μπορεί να μεταφέρει μια αναπτυξιακή εργασία σε ένα εντελώς διαφορετικό επίπεδο. Έχει όλες τις κοινές εργασίες όπως ζωντανή φόρτωση, μεταγραφή κειμένου, ελαχιστοποίηση και άλλα. Και είναι όλα προρυθμισμένο και έτοιμο για χρήση με μία απλή εντολή:

ng build, ng serve, ng test.

Αλλά υπάρχει μία (και πολύ σημαντική) εργασία που πρέπει να διαμορφωθεί μόλις η εφαρμογή είναι έτοιμη να αρχίσει να εμφανίζει ορισμένα δεδομένα από το διακομιστή…

Ναι, ανεξάρτητα από το πόσο μεγάλο είναι το γωνιακό πλαίσιο και πόσο γρήγορα και αποτελεσματικά τα στοιχεία του - στο τέλος ο σκοπός του SPA (εφαρμογή μιας σελίδας) είναι να αλληλεπιδρά με τον διακομιστή μέσω αιτημάτων HTTP.

Και εδώ είναι το πρώτο εμπόδιο που εμφανίζεται πριν από κάθε αρχάριο Angular CLI: το έργο Angular τρέχει στον δικό του διακομιστή (ο οποίος τρέχει από προεπιλογή στο // localhost: 4200). Επομένως, τα αιτήματα προς τον διακομιστή API είναι μεταξύ τομέων και, όπως ίσως γνωρίζετε, η ασφάλεια του προγράμματος περιήγησης ιστού δεν επιτρέπει την υποβολή αιτημάτων μεταξύ τομέων.

Προσέγγιση # 1: διακομιστής μεσολάβησης

Φυσικά, οι άνθρωποι στο Angular CLI προέβλεπαν αυτό το ζήτημα και ακόμη και δημιούργησαν μια ειδική επιλογή για την εκτέλεση ενός έργου Angular χρησιμοποιώντας μια διαμόρφωση διακομιστή μεσολάβησης:

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

Τι είναι ένας πληρεξούσιος, μπορείτε να ρωτήσετε; Λοιπόν, τα προγράμματα περιήγησης δεν σας επιτρέπουν να κάνετε αιτήματα μεταξύ τομέων, αλλά οι διακομιστές το κάνουν Η χρήση της επιλογής μεσολάβησης σημαίνει ότι λέτε στον διακομιστή του Angular CLI να χειριστεί το αίτημα που στάλθηκε από το Angular και να το στείλει ξανά από τον διακομιστή ανάπτυξης. Με αυτόν τον τρόπο, αυτός που «μιλάει» με τον διακομιστή του API είναι ο διακομιστής του Angular CLI.

Η διαμόρφωση διακομιστή μεσολάβησης απαιτεί το proxy.conf.jsonαρχείο που θα προστεθεί στο έργο. Αυτό είναι ένα αρχείο JSON με ορισμένες βασικές ρυθμίσεις. Ακολουθεί ένα παράδειγμα των περιεχομένων του proxy.conf :

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

Αυτός ο κωδικός σημαίνει ότι όλα τα αιτήματα που ξεκινούν με api / θα αποσταλούν εκ νέου στο // localhost: 3000(που είναι η διεύθυνση του διακομιστή API)

Προσέγγιση # 2: CORS

Η ασφάλεια του προγράμματος περιήγησης δεν σας επιτρέπει να κάνετε αιτήματα μεταξύ τομέων, εκτός εάν η Control-Allow-Originκεφαλίδα υπάρχει στην απάντηση του διακομιστή. Μόλις διαμορφώσετε τον διακομιστή API σας για να "απαντήσετε" με αυτήν την κεφαλίδα, μπορείτε να ανακτήσετε και να δημοσιεύσετε δεδομένα από διαφορετικό τομέα.

Αυτή η τεχνική ονομάζεται Cross Origin Resource Sharing ή CORS. Τα περισσότερα από τα κοινά πλαίσια διακομιστών και διακομιστών όπως το Node.js 'Express ή το Java Spring Boot μπορούν εύκολα να διαμορφωθούν για να κάνουν το CORS διαθέσιμο.

Ακολουθεί ένα παράδειγμα κώδικα που ορίζει τον διακομιστή Node.js Express να χρησιμοποιεί 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!

Λάβετε υπόψη ότι όταν χρησιμοποιείτε το CORS, πριν από την αποστολή κάθε αιτήματος HTTP, θα ακολουθήσει μετά το αίτημα OPTIONS (στην ίδια διεύθυνση URL) που ελέγχει αν είναι κατανοητό το πρωτόκολλο CORS . Αυτό το "διπλό αίτημα" μπορεί να επηρεάσει την απόδοσή σας.

Προσέγγιση παραγωγής

Εντάξει, το γωνιακό έργο σας "μιλάει" ομαλά με το διακομιστή, λαμβάνει και στέλνει δεδομένα στο περιβάλλον προγραμματιστή. Αλλά έφτασε η ώρα της ανάπτυξης και χρειάζεστε την όμορφη και προσχηματισμένη γωνιακή εφαρμογή σας για να φιλοξενείται κάπου (μακριά από το Papa Angular CLI) Έτσι και πάλι αντιμετωπίζετε το ίδιο πρόβλημα: πώς να το κάνετε για σύνδεση με διακομιστή.

Μόνο τώρα υπάρχει μεγάλη διαφορά: στο περιβάλλον παραγωγής (μετά την εκτέλεση της ng buildεντολής), η εφαρμογή Angular δεν είναι παρά μια δέσμη αρχείων HTML και JavaScript.

Στην πραγματικότητα, η απόφαση για το πώς να φιλοξενήσει την εφαρμογή στον διακομιστή παραγωγής είναι μια αρχιτεκτονική απόφαση και η αρχιτεκτονική είναι πολύ πέρα ​​από το πεδίο αυτού του άρθρου. Αλλά υπάρχει μια επιλογή που προτείνω να λάβετε υπόψη.

Προβολή στατικών αρχείων από το διακομιστή του API

Ναι, μπορείτε να φιλοξενήσετε το γωνιακό έργο σας (αφού έχει μόνο αρχεία HTML και JavaScript) στον ίδιο διακομιστή από τον οποίο εξυπηρετούνται τα δεδομένα (API).

Ένα από τα πλεονεκτήματα αυτής της στρατηγικής είναι ότι τώρα δεν αντιμετωπίζετε προβλήματα "μεταξύ τομέων", καθώς ο πελάτης και το API βρίσκονται στην πραγματικότητα στον ίδιο διακομιστή!

Φυσικά, αυτή η προσέγγιση απαιτεί ο διακομιστής του API να ρυθμιστεί σωστά.

Εδώ είναι ο κώδικας που εκθέτει τον "δημόσιο" κατάλογο όπου μπορούν να φιλοξενηθούν γωνιακά αρχεία κατά τη χρήση του διακομιστή Node Express:

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

Λάβετε υπόψη ότι σε αυτήν την περίπτωση, ο τρόπος με τον οποίο η εφαρμογή σας αποκτά πρόσβαση στο API στο περιβάλλον ανάπτυξης θα είναι διαφορετικός από τον τρόπο πρόσβασης του API σε αυτό κατά την παραγωγή. Επομένως, ίσως χρειαστεί να χρησιμοποιήσετε διαφορετικές διευθύνσεις URL HTTP σε διαφορετικά περιβάλλοντα (Όπως api / users / 1 στο dev και users / 1 κατά την παραγωγή). Μπορείτε να χρησιμοποιήσετε την επιλογή περιβάλλοντος του Angular CLI για να το πετύχετε:

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

συμπέρασμα

Το γωνιακό CLI είναι αναμφίβολα ένα πολύ ισχυρό και στιβαρό εργαλείο. Διευκολύνει τη ζωή μας ως προγραμματιστές διεπαφής με πολλούς τρόπους. Αλλά απαιτεί επίσης να λάβετε μια αρχιτεκτονική απόφαση σχετικά με τη σύνδεση με το διακομιστή του API. Επομένως, χρειάζεστε μια σαφή κατανόηση των διαφόρων τρόπων δημιουργίας επικοινωνίας πελάτη-διακομιστή.

Αυτό το άρθρο παραθέτει δύο προσεγγίσεις για τη διαχείριση αυτού του ζητήματος στο περιβάλλον προγραμματιστή και επίσης μια πρόταση σχετικά με την αρχιτεκτονική παραγωγής.

Προσπαθήστε να παίξετε με διάφορες συλλογές και δείτε ποια είναι πιο βολική για εσάς και την ομάδα σας.

Καλή διασκέδαση και επιτρέψτε μου να ξέρω πώς πηγαίνει!