So stellen Sie eine React-App mit Docker und NGINX mit API-Proxys in der Produktion bereit

In diesem Beitrag erfahren Sie, wie Sie Ihre React-Anwendungen in der Produktion bereitstellen. Wir werden Docker und NGINX verwenden, um API-Schlüssel und Proxy-Anfragen zu sichern, um Verstöße gegen Cross-Origin Resource Sharing (CORS) zu verhindern.

Sie können den Code finden und Video in der Zusammenfassung am Ende.

Was Sie in diesem Artikel lernen werden

In jedem Projektlebenszyklus kommt die Zeit, es zu veröffentlichen, und es ist nicht immer so offensichtlich, wie das geht. Die Produktionsumgebung unterscheidet sich von der Entwicklungsumgebung, und Benutzer müssen keine zusätzlichen Schritte unternehmen, um sie auszuführen. Die meisten Web-Apps verbrauchen eine Art von APIs und werden oft auf einem anderen Server gehostet.

In diesem Fall müssen wir als Entwickler Probleme mit Cross-Origin Resource Sharing (CORS) lösen. Zu oft bauen wir ein Backend auf, obwohl es nicht notwendig ist. Ich glaube, dass Entwickler ihre Anwendungen einfach halten und alle überflüssigen Teile herausschneiden sollten.

In diesem Artikel möchte ich Ihnen zeigen, wie ich meine React-Apps für die Bereitstellung in der Produktion vorbereite.

Ich könnte eine triviale React-Beispiel-App erstellen, aber das wäre nicht sehr hilfreich. Also beschloss ich, meine App in eine echte API einzubinden, die von FED St. Louis bereitgestellt wird. Die API erfordert einen Zugriffsschlüssel, um Daten abzurufen, und Endpunkte sind vor domänenübergreifenden Anfragen geschützt – keine externe Webanwendung kann Daten direkt nutzen.

Bitte beachten :Wenn Ihre Anwendung auf serverseitiges Rendering angewiesen ist das ist nicht richtig Bereitstellungsstrategie. Sie können sich inspirieren lassen, aber Sie benötigen immer noch eine Art Backend.

Voraussetzungen

Es ist wichtig, einige grundlegende Kenntnisse darüber zu haben, wie man React-Apps erstellt. Sie sollten auch einige Docker-Grundlagen kennen, bevor Sie den Anweisungen in diesem Artikel folgen.

Wenn Sie etwas verpassen, machen Sie sich keine Sorgen! Schauen Sie sich einfach diesen erstaunlichen Artikel und das YouTube-Tutorial auf FreeCodeCamp an:

• Eine anfängerfreundliche Einführung in Container, VMs und Docker von @iam_preethi
• React-App-Crashkurs erstellen

So erstellen Sie eine beispielhafte React-App

Ich habe eine einfache Web-App mit create-react-app gebootstrapt . Die einzige Aufgabe der App ist die Anzeige eines Liniendiagramms mit einer Darstellung des BIP der Vereinigten Staaten.

Die App ruft Daten nur von der folgenden API ab:

https://api.stlouisfed.org/fred/series/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456

Hier sind die Parameter:

• series_id - Die ID für eine Serie. Die GDPCA steht für das „reale BIP“.
• frequency - Die Aggregation der Daten. Der a steht für jährlich.
• observation_start - Beginn des Beobachtungszeitraums.
• observation_end - Das Ende des Beobachtungszeitraums.
• file_type - Das Format der Daten. Standard ist xml .
• api_key - Der Zugriffsschlüssel, der erforderlich ist, um Daten von dieser API abzurufen. Hier können Sie eine anfordern.

Weitere Details finden Sie in der Dokumentation.

Das Leben ist nicht immer perfekt und das API-Design ist nicht ideal. Der Entwickler muss den Zugriffsschlüssel und die erwartete Ausgabe der Daten als URL-Parameter übergeben.

Das Übergeben der Ausgabe als Parameter ist für uns kein Problem, da es nur etwas Rauschen hinzufügt - der undichte API-Schlüssel jedoch schon. Stellen Sie sich vor, jemand würde sie abfangen und die API missbrauchen, um eine verbotene Aktion auszuführen. Wir wollen es nicht riskieren.

Nehmen wir für einen Moment an, dass die API-Keys kein Problem darstellen. Dennoch ist es nicht möglich, diese API zu nutzen. Die FRED-API ist gegen domänenübergreifende Anfragen geschützt, sodass wir die folgenden Fehler erhalten, wenn wir versuchen, sie von einer externen Domäne aufzurufen:

Viele Entwickler würden vorschlagen, Middleware (ein Backend) zu bauen, um Anfragen an die API weiterzuleiten und sensible Daten zu filtern. Sie würden sagen, dass sie in Zukunft möglicherweise neue Funktionen hinzufügen müssen, und bis zu einem gewissen Grad ist dies ein fairer Ansatz.

Aber ich ziehe es vor, meine Apps mehr YAGNI-artig zu bauen (You Ain’t Gonna Need It). Damit ich es vermeiden werde, das Backend zu bauen, bis es notwendig ist - in unserem Fall werde ich es überhaupt nicht bauen.

Nutzen wir NGINX!

Ich bin ein großer Fan von NGINX, weil es Einfachheit mit sich bringt. NGINX hat alles, was Sie brauchen, um einen Webserver in Produktionsqualität vorzubereiten, wie HTTP2, Komprimierung, TLS und viele andere Funktionen.

Das Wichtigste ist, dass wir all dies erreichen können, indem wir ein paar Konfigurationszeilen definieren. Sehen Sie sich einfach das folgende Snippet an:

...

http {
    ...

    server {
        ...

        location /api {
            set         $args   $args&&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456;
            proxy_pass  https://api.stlouisfed.org/fred/series;
        }
    }
}

Diese 4 Zeilen sind alles, was ich brauchte, um unseren API-Schlüssel zu verbergen und die CORS-Fehler zu unterdrücken. Buchstäblich! Ab jetzt alle HTTP-Anfragen an /api wird an die FRED-API weitergeleitet, und nur unsere Apps können die API nutzen. Alle externen Anfragen werden mit CORS-Fehlern konfrontiert.

Um Unordnung zu beseitigen, habe ich den gesamten Standardinhalt der Datei durch ... ersetzt (drei Punkte). Die Vollversion finden Sie auf meinem GitHub oder Video (Links unten).

Und so sieht unser Endpunkt aus:

/api/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01

Wir müssen weder den api_key übergeben noch file_type Parameter zum Abrufen von Daten. Und niemand kann den Zugriffsschlüssel aus der URL lesen, also ist es sicher.

Docker liebt NGINX

Der bequemste Weg, NGINX in der Cloud auszuführen, ist die Verwendung von Docker. Für diesen Teil gehe ich davon aus, dass Sie wissen, was Docker ist (aber wenn nicht, lesen Sie bitte den in den Voraussetzungen verlinkten Artikel).

Wir müssen nur ein Dockerfile mit folgendem Inhalt erstellen:

FROM nginx

COPY container /
COPY build /usr/share/nginx/html

Und jetzt sind nur noch drei Schritte nötig, um die FRED APP auszuführen:

1. Erstellen Sie die React-Anwendung . Dieser Prozess generiert den build/ Verzeichnis mit statischen Dateien.
2. Erstellen Sie das Docker-Image . Es wird ein lauffähiges Docker-Image erstellt.
3. Veröffentlichen Sie das Docker-Image zu einem Repository oder führen Sie es auf dem lokalen Rechner aus .

Lassen Sie uns zunächst versuchen, es auf unserem Rechner auszuführen.

$ yarn install
$ yarn build
$ docker build -t msokola/fred-app:latest .
$ docker run -p 8081:80 -it msokola/fred-app:latest

Der 8081 ist ein Port auf Ihrem Rechner. Das bedeutet, dass die App unter der folgenden URL verfügbar sein wird:http://localhost:8081 .

Nach dem Öffnen dieser URL im Browser sollten Sie Protokolle wie diese in Ihrem Terminal sehen:

0.0.0.1 - - [11/Mar/2021:18:57:50 +0000] "GET / HTTP/1.1" 200 1556 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36" "-"
...
0.0.0.1 - - [11/Mar/2021:18:57:51 +0000] "GET /api/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01 HTTP/1.1" 200 404 "http://localhost:8081/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36" "-"

Achten Sie auf diese 200 s, da sie für den HTTP-Status OK stehen. Wenn Sie einen 400 sehen neben der API-Anforderung bedeutet dies, dass etwas mit Ihrem API-Schlüssel nicht stimmt. Der 304 ist auch in Ordnung (es bedeutet, dass die Daten zwischengespeichert wurden).

So stellen Sie den Container auf AWS bereit

Der Container funktioniert, also können wir ihn bereitstellen. In diesem Teil des Artikels zeige ich Ihnen, wie Sie Ihre Anwendung in Amazon Web Services (AWS) ausführen.

AWS ist eine der beliebtesten Cloud-Plattformen. Wenn Sie Microsoft Azure oder eine andere Plattform verwenden möchten, sind die Schritte ähnlich, aber die Syntax der Befehle unterscheidet sich.

Hinweis: Ich habe ein YouTube-Video aufgenommen, damit Sie mir beim gesamten Bereitstellungsprozess zusehen können. Wenn Sie nicht weiterkommen oder auf Probleme stoßen, können Sie überprüfen, ob wir bei jedem Schritt die gleichen Ergebnisse erzielen. Wenn Sie das Video ansehen möchten, klicken Sie hier oder Sie finden es eingebettet in der Zusammenfassung unten.

1. AWS CLI-Tools installieren

Bevor wir beginnen, müssen Sie die AWS CLI-Tools installieren, damit Sie Befehle in Ihrer Cloud aufrufen können.

AWS bietet Installationsassistenten für alle Betriebssysteme, daher überspringe ich diesen Abschnitt. Nach erfolgreicher Installation müssen Sie sich mit folgendem Befehl anmelden:

$ aws configure
AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Default region name [None]: us-east-2
Default output format [None]: json

Um Zugriffsschlüssel zu generieren, müssen Sie sich bei Ihrer AWS-Konsole anmelden. Klicken Sie dort auf Ihren Benutzernamen und wählen Sie „Meine Sicherheitsdaten aus ".

2. Erstellen Sie eine neue Elastic Container Registry (ECR)

Sobald die CLI-Tools eingerichtet sind, müssen wir einen Bereich erstellen, in dem wir die ausführbaren Dateien unserer Anwendung speichern können. Wir verwenden Docker, daher werden unsere ausführbaren Dateien Docker-Images sein, die wir auf virtuellen Maschinen ausführen werden.

AWS bietet einen dedizierten Service zum Speichern von Images namens Elastic Container Registry. Der folgende Befehl erstellt eine für uns:

aws ecr create-repository --repository-name react-to-aws --region us-east-2

Hier sind die Parameter:

• ecr - Die Akronyme von "Elastic Container Registry".
• repository-name - Der Name unserer Registrierung. Bitte denken Sie daran, dass wir uns später auf diesen Namen beziehen werden.
• region - Der Regionalcode. Sie können eine Region finden, die Ihrem Standort am nächsten liegt, um die Latenz zu reduzieren. Hier ist eine Liste aller Regionen.

Weitere Details finden Sie in der Dokumentation.

Und hier ist die erwartete Ausgabe:

{
    "repository": {
        "repositoryArn": "arn:aws:ecr:us-east-2:1234567890:repository/react-to-aws2",
        "registryId": "1234567890",
        "repositoryName": "react-to-aws",
        "repositoryUri": "1234567890.dkr.ecr.us-east-2.amazonaws.com/react-to-aws2",
        "createdAt": "2021-03-16T22:50:23+04:00",
        "imageTagMutability": "MUTABLE",
        "imageScanningConfiguration": {
            "scanOnPush": false
        },
        "encryptionConfiguration": {
            "encryptionType": "AES256"
        }
    }
}

3. Docker-Images in die Cloud übertragen

In diesem Schritt werden wir unsere Docker-Images in die Cloud verschieben. Wir können dies tun, indem wir die Push-Befehle aus unserer AWS-Konsole kopieren.

Öffnen wir die AWS-Konsole im Browser und klicken Sie auf Elastic Container Registry aus "Alle Dienste - Container "-Liste. Wenn Sie Ihre Region nicht geändert haben, können Sie einfach hier klicken. Sie werden die vollständige Liste Ihrer Repositories sehen:

Jetzt müssen Sie react-to-aws auswählen Repository und dann "Push-Befehle anzeigen " aus dem Menü (im Bild oben mit roten Kreisen markiert). Sie werden das folgende Fenster sehen:

Sie müssen alle Befehle aus dem Modal in Ihr Terminal kopieren. Nicht Befehle aus dem Snippet unten kopieren weil es nicht funktionieren wird.

$ aws ecr get-login-password --region us-east-2 | docker login --username AWS --password-stdin 123456789.dkr.ecr.us-east-2.amazonaws.com
Login Succeeded

$ docker build -t react-to-aws .
[+] Building 0.6s (8/8) FINISHED
...

$ docker tag react-to-aws:latest 123465789.dkr.ecr.us-east-2.amazonaws.com/react-to-aws:latest

$ docker push 123456789.dkr.ecr.us-east-2.amazonaws.com/react-to-aws:latest
The push refers to repository [123456789.dkr.ecr.us-east-2.amazonaws.com/react-to-aws:latest]
...
latest: digest: sha256:3921262a91fd85d2fccab1d7dbe7adcff84f405a3dd9c0e510a20d744e6c3f74 size: 1988

Jetzt können Sie das Modal schließen und auf den Namen des Repositorys klicken (react-to-aws ), um die Liste der verfügbaren Bilder zu durchsuchen. Sie sollten den folgenden Bildschirm sehen:

Ihre Anwendung befindet sich im Repository und ist bereit für die Bereitstellung! Klicken Sie nun auf „URI kopieren“ und behalten Sie den Inhalt Ihrer Zwischenablage (fügen Sie es in einen Notizblock oder eine Textdatei ein), da wir es ausführen müssen!

4. Konfigurieren Sie die Anwendung

Unser Image ist in der Cloud verfügbar, also müssen wir es jetzt konfigurieren.

Virtuelle Maschinen wissen nicht, wie sie Ihr Image ausführen sollen, um sicherzustellen, dass es gut funktioniert. Wir müssen einige Anweisungen wie offene Ports, Umgebungsvariablen und so weiter definieren. AWS nennt es Aufgabendefinition.

Öffnen Sie die AWS-Konsole und klicken Sie auf Elastic Container Service (ECS) aus "Alle Dienste - Container " Liste. Wenn Sie Ihre Region nicht geändert haben, können Sie hier klicken.

Wählen Sie nun Aufgabendefinitionen aus , und klicken Sie auf "Neue Aufgabendefinition erstellen " wie im Bild unten markiert:

Wir haben zwei Möglichkeiten, unseren Task auszuführen:FARGATE und EC2 . Wählen Sie FARGATE , und klicken Sie auf "Nächster Schritt ".

Im nächsten Schritt müssen Sie das Formular mit den folgenden Werten ausfüllen:

• Aufgabendefinitionsname - react-to-aws-task .
• Aufgabenrolle - none .
• Aufgabenspeicher (GB) - 0.5GB (das kleinste).
• Task-CPU (vCPU) - 0.25 vCPU (das kleinste).

Sobald Sie die "Container-Definitionen" erreicht haben Abschnitt Klicken Sie auf "Container hinzufügen" :

Füllen Sie das Formular mit den folgenden Werten aus:

• Containername - react-to-aws .
• Bild - Die URI aus Schritt 4. Sie haben sie irgendwo eingefügt.
• Speichergrenzen (MiB) - Soft limit 128 .
• Portzuordnungen - 80 - der HTTP-Port.

Andere Optionen sind für uns nicht relevant. Klicken Sie nun auf "Hinzufügen" Schaltfläche, um einen Container hinzuzufügen, und schließen Sie die Aufgabendefinition ab, indem Sie auf Erstellen klicken . Sie sollten den folgenden Bildschirm sehen und auf "Aufgabendefinition anzeigen klicken ".

5. Lass es laufen!

Schließlich können wir einen Cluster erstellen, damit wir unsere Anwendung in der Cloud ausführen können. Sie müssen "Cluster" auswählen " aus dem Menü auf der linken Seite und "Cluster erstellen ". Wie im Bild unten gezeigt:

Jetzt haben wir drei Optionen:Networking only , EC2 Linux + Networking , und EC2 Windows + Networking . Wählen Sie die erste - Networking only , und klicken Sie auf "Nächster Schritt ". Sie sollten den folgenden Bildschirm sehen:

Geben Sie den Clusternamen react-to-aws ein , und klicken Sie auf „Erstellen ". Sie sollten einen erfolgreichen Mittagsstatus sehen. Er sieht ähnlich aus wie der Bildschirm, den wir nach der Erstellung unserer Aufgabendefinition erhalten haben. Klicken Sie nun auf "Cluster anzeigen ".

Jetzt müssen Sie auf die "Aufgaben" klicken und klicken Sie auf "Neuen Task ausführen ". Herzlichen Glückwunsch! Sie haben das allerletzte auszufüllende Formular erreicht :)

Füllen Sie das Formular mit den folgenden Werten aus:

• Starttyp - FARGATE .
• Cluster-VPC - Der erste.
• Subnetz - Der erste.

Belassen Sie die anderen Werte unverändert , und klicken Sie auf „Aufgabe ausführen " Schaltfläche. Sie sollten den folgenden Bildschirm sehen:

Wir müssen etwa eine Minute warten, bis "Letzter Status" angezeigt wird " ändert sich in RUNNING. Bitte denken Sie daran, dass Sie auf "Aktualisieren" klicken müssen " Schaltfläche, um die Liste zu aktualisieren. Sobald der Aufgabenstatus ausgeführt wird, klicken Sie auf den Aufgabennamen.

Im "Netzwerk" Abschnitt finden Sie die Öffentliche IP Ihres Behälters. Sie können es in Ihrem Browser öffnen und Ihre Anwendung wird angezeigt.