Γωνιακό - Πώς να διακομιστή μεσολάβησης για διακομιστή

Εξηγώντας τον τρόπο ρύθμισης παραμέτρων ενός διακομιστή μεσολάβησης για κλήσεις API για συσκέψεις με ένα παράδειγμα.

Φωτογραφία από τον Jens Herrndorff στο Unsplash

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

  • Τι είναι το proxying
  • Παράδειγμα έργου
  • επιλογές proxy.config.json
  • Ρύθμιση μεσολάβησης με γωνιακό CLI
  • Διαφορετικοί τρόποι ρύθμισης παραμέτρων
  • Επαναδιαγράψτε τη διαδρομή URL
  • Πολλαπλές καταχωρήσεις εφαρμογών σε ένα τελικό σημείο API
  • Πολλαπλές καταχωρίσεις εφαρμογών με πολλαπλά τελικά σημεία
  • Περίληψη

Τι είναι το proxying

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

Σε Γωνιακή, χρησιμοποιούμε συχνά αυτό το proxying στο περιβάλλον ανάπτυξης. Ο γωνιακός χρησιμοποιεί το διακομιστή dev webpack για την προβολή της εφαρμογής σε κατάσταση ανάπτυξης. Αν εξετάσουμε το παρακάτω διάγραμμα, το UI της εφαρμογής εκτελείται στη θύρα 4200 και ο διακομιστής backend εκτελείται στη θύρα 3700. Όλες οι κλήσεις ξεκινούν με / api θα μεταφερθούν στο διακομιστή του backend και θα αναπαυθούν όλοι να επιστρέψουν στην ίδια θύρα.

Σε επόμενα τμήματα, θα δούμε πώς μπορούμε να επιτύχουμε αυτό και άλλες επιλογές.

μεσολάβηση όλων των διευθύνσεων URL αρχίζει με / api

Παράδειγμα έργου

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

// κλωνοποιήστε το έργο
git κλώνος https://github.com/bbachi/angular-proxy- παράδειγμα
// install dependencies for server node
npm install
// cd to ui
cd appui
// install app dependencies ui
np install

Αφού εγκαταστήσετε όλες τις εξαρτήσεις, μπορείτε να ξεκινήσετε και τον εξυπηρετητή Γωνιακών εφαρμογών και τον κόμβο node σε 4200 και 3070 αντίστοιχα.

Μπορείτε να ξεκινήσετε την εφαρμογή γωνίας με αυτές τις εντολές npm start ή ng serve και εδώ είναι η εφαρμογή γωνίας που τρέχει στο 4200.

Η γωνιακή εφαρμογή τρέχει σε 4200

Ας ξεκινήσουμε τον server με αυτή την εντολή npm start και δοκιμάζουμε αυτό το API στη θύρα 3070.

API που εκτελείται στη θύρα 3070

επιλογές proxy.config.json

στόχος: Στο σημείο αυτό πρέπει να ορίσουμε τη διεύθυνση URL του παραλήπτη.

pathRewrite: Πρέπει να χρησιμοποιήσουμε αυτήν την επιλογή για να επεξεργαστούμε ή να ξαναγράψουμε τη διαδρομή

changeOrigin: Αν το backend API δεν εκτελείται στο localhost, πρέπει να κάνουμε αυτό το flag αληθινό.

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

bypass: Μερικές φορές πρέπει να παρακάμψουμε τον πληρεξούσιο, μπορούμε να ορίσουμε μια λειτουργία με αυτό. Θα πρέπει όμως να οριστεί στο proxy.config.js αντί του proxy.config.json.

Ρύθμιση μεσολάβησης με γωνιακό CLI

Τώρα η εφαρμογή και ο διακομιστής που εκτελούνται σε διαφορετικές θύρες. Ας δημιουργήσουμε έναν πληρεξούσιο για επικοινωνία μεταξύ αυτών.

Το πρώτο πράγμα που χρειάζεστε είναι αυτό το proxy.config.json. Ορίζουμε τον στόχο για όλες τις διευθύνσεις URL που αρχίζουν με / api εδώ.

Δεύτερο πράγμα είναι να αφήσουμε το γαλλικό να γνωρίζει ότι έχουμε αυτό το proxy.config.json στη θέση του. Μπορούμε να το κάνουμε αυτό προσθέτοντας τη σημαία του proxy-config κατά την εκκίνηση της εφαρμογής όπως παρακάτω. Μόλις ξεκινήσει, μπορούμε να δούμε το μήνυμα που υποδεικνύει ότι όλες οι διευθύνσεις URL που αρχίζουν με / api θα επαναπροσανατολίσουν στον εξυπηρετητή nodejs που εκτελείται στη θύρα 3070.

npm script start

Τώρα μπορούμε να δοκιμάσουμε την εφαρμογή και να δούμε τις ρυθμίσεις από το διακομιστή

ρυθμίσεις που προέρχονται από το διακομιστή

Διαφορετικοί τρόποι ρύθμισης παραμέτρων

Ένας άλλος τρόπος για να ρυθμίσετε τη διαμόρφωση του διακομιστή μεσολάβησης στο γωνιακό έργο ορίζεται στο angular.json.

proxyConfig σε angular.json

Ας συνοψίσουμε τους τρόπους εδώ

  • Προσθέστε αυτό το ng serve - proxy.conf.json proxy-config στο σενάριο εκκίνησης στο package.json
  • Ορίστε στο angular.json κάτω από το τμήμα εξυπηρέτησης όπως παραπάνω.

Επαναδιαγράψτε τη διαδρομή URL

Κάθε φορά που υπάρχει αλλαγή στις διευθύνσεις URL, συχνά ξαναγράψουμε τη διαδρομή των τελικών σημείων των διακομιστών backend. Μπορούμε να το κάνουμε αυτό με το pathRewrite.

Ας καταλάβουμε την επιλογή pathRewrite. Για παράδειγμα, η διεύθυνση URL / api / settings της σελίδας μας έχει αλλάξει σε / api / app / settings και θέλουμε να δοκιμάσουμε την ανάπτυξη πριν ξεκινήσει η παραγωγή. Μπορούμε να το επιτύχουμε με την επιλογή pathRewrite όπως παρακάτω.

Έτσι, ξαναγράφουμε / api / set / api / app / settings και / api / users to / users.

Εδώ είναι η έξοδος της κονσόλας κατά την εκκίνηση της εφαρμογής.

γωνιακό διακομιστή μεσολάβησης που ξαναγράφει τις διαδρομές URL

Πολλαπλές καταχωρήσεις εφαρμογών σε ένα τελικό σημείο API

Μερικές φορές έχουμε στην εφαρμογή μας πολλαπλές ενότητες με υπηρεσίες. Ενδέχεται να έχουμε ένα σενάριο όπου πολλαπλές καταχωρίσεις ή υπηρεσίες θα καλέσουν το ίδιο τελικό σημείο API.

Σε αυτή την περίπτωση, πρέπει να ορίσουμε τον proxy.config.js αντί του proxy.config.json. Μην ξεχάσετε να το προσθέσετε στο angular.json.

angular.json

Πολλαπλές καταχωρίσεις εφαρμογών με πολλαπλά τελικά σημεία

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

διακομιστή μεσολάβησης για πολλά API

Για παράδειγμα, έχουμε τρία API που λειτουργούν σε θύρες 3700, 3800 και 3900 και η APP σας πρέπει να μιλήσει σε αυτά τα API.

Το μόνο που χρειάζεται είναι να προσθέσουμε πολλαπλές καταχωρήσεις στο proxy.config.json. Εδώ είναι η διαμόρφωση για αυτή τη ρύθμιση και πρέπει να βεβαιωθούμε ότι όλα τα API τρέχουν σε αυτές τις θύρες για επιτυχή επικοινωνία.

Περίληψη

  • Στο γωνιακό, ο πληρεξούσιος χρησιμοποιείται κυρίως στο αναπτυξιακό περιβάλλον για να διευκολύνει την επικοινωνία μεταξύ διακομιστή και διεπαφή χρήστη.
  • Πρέπει να διαθέτουμε έναν διακομιστή και ένα UI που λειτουργεί σε διαφορετικές θύρες.
  • Το Proxy.config.json είναι το αρχείο που περιέχει όλες τις πληροφορίες σχετικά με τις διευθύνσεις API back-end.
  • Πρέπει να βεβαιωθούμε ότι οι Γωνιακές Εφαρμογές και Backends εκτελούνται σε διαφορετικές θύρες για επιτυχή επικοινωνία.
  • Υπάρχουν δύο τρόποι διαμόρφωσης ενός είναι να προσθέσετε το angular.json και ένα άλλο προσθέτει μια σημαία proxy-config στο script εκκίνησης.
  • Μπορούμε να ξαναγράψουμε τη διαδρομή με το path pathRewrite.
  • Μπορούμε να μεσολάβουμε πολλαπλές καταχωρίσεις σε ένα API back-end με το proxy.config.js.
  • Μπορούμε επίσης να πληρώσουμε πολλαπλές καταχωρίσεις σε πολλαπλά αντίγραφα.

Ελέγξτε τα μοτίβα επικοινωνίας στο Γωνιακό και μάθετε πόσα τρόποι μπορείτε να επικοινωνήσετε στο Γωνιακό.

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

Ευχαριστούμε που το διαβάσατε.