Leichte Microfrontend-Entwicklung mit einem lokalen Proxyserver

Einführung

Haben Sie sich jemals gewünscht, dass Sie Ihre Back-End-Dienste nicht lokal ausführen müssen, während Sie lokal auf Ihrem Frontend entwickeln? Nun, ich habe gute Neuigkeiten für dich! Ein lokaler Proxyserver ist höchstwahrscheinlich die Lösung für Ihr Problem.

In diesem Beitrag werden wir besprechen, was ein Proxy-Service ist und wie er uns geholfen hat, dasselbe Problem für unsere Softwareingenieure zu lösen.

Was ist ein Proxy-Service?

Ein Proxydienst lauscht an einem oder mehreren Ports auf einem Computer und leitet die Kommunikation an einen anderen Computer weiter. Theoretisch kann ein Proxydienst für jeden Netzwerkdienst „einspringen“.

Das obige Bild zeigt, wie ein Proxydienst funktioniert. Die Client-Software stellt eine Verbindung zum Proxydienst her, der Daten an den Server weiterleitet. Wenn der Server mit Daten antwortet, sendet der Proxydienst die Daten zurück an den Client. Im Idealfall ist der Proxydienst so transparent wie möglich und erfordert nur geringe oder gar keine Kenntnisse über seine Existenz in der Client-Software.

Proxydienste (und Proxys im Allgemeinen) sind eine Anwendung der Indirektion Muster, mit anderen Worten, wenn Sie den Ort von etwas abstrahieren. Ein Postfach ist ein einfaches Beispiel für Umleitung: Es ermöglicht Personen, Sie über einen Vermittler zu kontaktieren. Daher können Sie Ihre Privatadresse unabhängig von Ihrer Postanschrift ändern. DNS-Dienste sind ein weiteres Beispiel für Umleitung: Sie abstrahieren IP-Adressen aus URLs.

Ein alter Software-Aphorismus besagt: „Wir können jedes Problem lösen, indem wir eine zusätzliche Ebene von einführen Indirektion.“ (Zugeschrieben Dave Wheeler). Es ist ein halber Witz, da Indirektion zu Komplexität führt und die Leistung verlangsamt, wenn sie überlastet wird; aber ansonsten ist es richtig.

Problem und Lösung

Die FloQast-Techniker ziehen es vor, nicht mehr lokale Dienste als nötig auszuführen. Insbesondere die Frontend-Plattformteams benötigen eine Möglichkeit, die Einrichtung und Ausführung von Backend-Services für jedes Produktteam, das sie unterstützen, zu vermeiden.

Wie Sie vielleicht wissen, verwenden wir eine Microfrontend (MFE) -Architektur (hier ist ein Link zum neuesten Blogbeitrag dieser Reihe). Für die lokale Entwicklung unterstützen wir zwei Ausführungsmodi für die Arbeit an MFEs: eigenständige und integriert. Zufällig haben wir zwei verschiedene Arten von Proxydiensten implementiert, die das lokale Frontend-Entwicklungsproblem für diese Anwendungsfälle separat lösen.

1. Eigenständiger Proxy

Wir beginnen mit der einfacheren der beiden Lösungen. Unser Standalone-Proxy läuft automatisch auf dem Dev-Server für jedes Microfrontend (wenn das MFE im Standalone-Modus läuft).

Wussten Sie, dass Create React App (CRA) über eine integrierte Entwicklungs-Proxy-Funktion verfügt? Du kannst alles darüber lesen in ihrer Dokumentation hier.

Tatsächlich kann die Verwendung so einfach sein wie das Hinzufügen eines „Proxy“ Schlüssel zu deinem Paket.json datei:

Um den Entwicklungsserver anzuweisen, unbekannte Anfragen an Ihren API-Server in der Entwicklung weiterzuleiten, fügen Sie Ihrer package.json ein Proxy-Feld hinzu, zum Beispiel:

„Proxy“: "http://localhost:4000 „,

Wir brauchten ein etwas aufwändigeres Setup, also entschieden wir uns für src/setupProxy.js Methode.

Wie der setupProxy.js Beispiel, das in der CRA-Dokumentation verlinkt ist, wir haben verwendet http-proxy-Middleware und verband die Proxy-Middleware direkt mit der internen Express-Instanz für einzelne MFEs. Etwas mehr Komplexität ermöglicht es unseren Ingenieuren, optional ein oder mehrere lokal gehostete Lambdas (die beim Start analysiert werden) von einem REACT_APP_PROXY_EXCLUDE Umgebungsvariable). Wenn eine Anfrage mit einem lokalen Lambda übereinstimmt, leitet der Proxy die Anfrage an den lokalen Lambda-Service statt an die Entwicklungsumgebung weiter.

Um potenziellen CORS-Problemen auszuweichen, stellen Sie sicher, dass Sie Folgendes angeben changeOrigin: wahr in deinem Proxy-Middleware erstellen anrufen. Möglicherweise müssen Sie auch Folgendes angeben CookieDomainRewrite: {'*': "}:

app.use(
    '/api',
    createProxyMiddleware({
        target: `https://your.backend.environment`,
        changeOrigin: true,
        logLevel: 'debug',
        secure: false,
        cookieDomainRewrite: { '*': '' },
    })
);

2. Proxy im integrierten Modus

Wir nennen unseren integrierten Modus-Proxy Client-Proxy. Die Kernidee ist einfach. Es ist ein node.js -Dienst, der auf jedem lokalen Port lauscht, der normalerweise einen lokalen Back-End-Dienst hostet. Es verwendet Express und http-proxy-Middleware um Back-End-Anfragen an äquivalente Dienste weiterzuleiten, die in einer Back-End-Umgebung ausgeführt werden.

Hier wird es etwas knifflig. Sie erinnern sich vielleicht daran, dass unser Microfrontend „Hub“ (wir nennen es) Kunden-Hub) ist das, was die App im Browser zusammensetzt.

Jetzt ist die „Vordertür“ unserer App, wenn sie lokal (ohne Proxy) ausgeführt wird, derselbe Hauptdienst, der in der Produktion auf Port 443 lauscht. Wenn der Browser seine erste Anfrage stellt, fordert der Monolith normalerweise intern die Stamm-HTML- und JS-Dateien von Kunden-Hub Service in der Cloud.

Aber wenn Client-Proxy proxiert den Root / Anfrage an den Backend-Monolith Bei der lokalen Entwicklung wird der Monolith zurückgegeben Kunden-Hub Ressourcen aus der Cloud — was wir nicht wollen, da wir laufen Kunden-Hub und verschiedene MFEs vor Ort.

Also anstatt die weiterzuleiten / Anfrage an das Backend, Client-Proxy fordert Ressourcen von der lokalen Seite an Kunden-Hub und gibt sie an den Browser zurück. Dieses Diagramm veranschaulicht, was vor sich geht:

Es gibt mehrere andere Tricks, die wir anwenden, um etwas anderes zurückzugeben, als das, was der Monolith zurückgeben würde — schließlich Client-ProxyBei den Diensten handelt es sich jeweils um eine Express-App, sodass viel Flexibilität verfügbar ist.

Hier ist ein vereinfachtes Diagramm, das die gesamte Architektur bei der Verwendung beschreibt Client-Proxy:

Fazit

Proxydienste sind eine hervorragende Lösung für die lokale Entwicklung im Vergleich zu Cloud-gehosteten Back-End-Diensten. In den meisten Fällen muss Ihr Code nicht einmal wissen, dass ein Proxydienst verwendet wird, da Proxydienste eine echte Umleitung und somit eine erhöhte Flexibilität bieten.

Das http-proxy-Middleware Das Node-Paket ist ein hervorragendes Tool für HTTP-Proxying und kann Ihnen bei der Behandlung von CORS-Problemen helfen Herkunft ändern und Cookie-Domain neu schreiben Konfigurationsoptionen.

Die integrierte Microfrontend-Entwicklung auf Ihrem lokalen Computer muss Sie nicht davon abhalten, einen Proxy-Service zu verwenden. Überall dort, wo ein Netzwerkport einen Listener hat, kann ein Proxydienst ersetzt werden.

Und zu guter Letzt: Bleiben Sie dran für weitere Beiträge zur Entwicklungsarchitektur! Wir stehen gerade erst am Anfang unserer Vision, Entwicklern sowohl bei der Frontend- als auch bei der Backend-Entwicklung eine erhebliche Flexibilität und Produktivität zu bieten.

Bis zum nächsten Mal! 👋