So erstellen Sie eine React-Anwendung mit Docker vs. NGINX

Blog

So erstellen Sie eine React-Anwendung mit Docker vs. NGINX

So erstellen Sie eine React-Anwendung mit Docker vs. NGINX

In diesem Beitrag werden wir die Details und die Implementierung von Build React Application mit Docker vs. NGINX sehen. Wir werden es Schritt für Schritt anhand eines Beispiels durchgehen.

Beispielprojekt

Dies ist ein einfaches Projekt, das die Bereitstellung einer statischen React-Anwendung mit NGINX und Docker demonstriert. Wir haben eine einfache App mit Kopf- und Fußzeile und mit einer Nachricht.

Hier ist das Beispielprojekt, in dem Sie auf Ihrem Computer klonen und ausführen können

// clone the project git clone https://github.com/bbachi/react-nginx-docker // install and start the dependencies npm install npm start // build the docker image docker build -t react-ui . // run the app docker run -d --name reactui -p 80:80 react-ui

Dies ist eine einfache React-App, die die Kopfzeile, Fußzeile und eine Nachricht auf dem Dashboard enthält. Hier sind die Header.js-, Footer.js- und App.js-Dateien

import React from 'react'; const Header = () => { return ( Simple React App ) }; export default Header

Header.js

import React from 'react'; const Footer = () => { return ( 2020 ) }; export default Footer

Footer.js

Wie viel ist eine leckere Münze wert?
import React from 'react'; import Header from './header/header' import Footer from './footer/footer' import './App.css'; function App() { return ( ); } export default App;

App.js

HTML und CSS üben

Gerade genug NGINX für dieses Projekt

Wir gehen hier nicht alles über NGINX durch und wir gehen gerade genug für dieses Projekt durch. Wenn Sie damit bereits vertraut sind, können Sie zum nächsten Abschnitt übergehen.

NGINX-Prozesse sind in einen Master-Prozess und mehrere Worker-Prozesse unterteilt. Der Master-Prozess kümmert sich um die Auswertung der Konfiguration und die Pflege von Worker-Prozessen und die Worker-Prozesse kümmern sich um die eigentlichen Requests. In der Konfigurationsdatei können wir die Anzahl der Worker-Prozesse definieren, die im Verzeichnis |_+_| . abgelegt werden können |_+_| oder |_+_|

Die Konfigurationsdatei besteht aus Direktiven, die die Module oder Kontexte bilden. Es gibt zwei Arten von Direktiven: einfache Direktiven und Blockdirektiven. Eine einfache Direktive hat Namen und Parameter, die durch ein Leerzeichen getrennt sind und endet mit einem Semikolon wie diesem |_+_| . Eine Blockdirektive ist gleich, hat aber zusätzliche Informationen und ist von geschweiften Klammern wie dieser umgeben |_+_|

Lassen Sie uns die NGINX-Konfigurationsdatei verstehen, die wir in diesem Projekt verwendet haben. Unten ist die nginx.conf Datei, die sich unter Ordner befindet .nginx am Stammort des Projekt.

Alles ist ein Kontext in der Konfigurationsdatei. Wir haben einen hierarchischen Kontext, der mit dem Hauptkontext beginnt. Zum Beispiel, worker_processes und Veranstaltungen werden im Hauptkontext definiert und ein anderer Kontext beginnt mit http. Wir haben einen anderen Kontext im Inneren http namens Server die auf Port 80 lauscht und statische Assets vom Root-Standort aus bereitstellt |_+_|

Wir können mehrere Deklarationen der . haben Server innerhalb der http Kontext und wir können mehrere Deklarationen von . haben Lage innerhalb der Server Kontext.

/usr/local/etc/nginx,

nginx.conf

Implementierung

Wir verwenden Docker als Container-Laufzeit für dieses Projekt. Wir verwenden mehrstufige Builds, um das Docker-Image zu erstellen. Hier ist das Dockerfile für das Projekt.

/etc/nginx

Dockerfile *

Stufe 1

Wir verwenden |_+_| als Basisbild für die Bühne1 und das Kopieren von |_+_| um alle Abhängigkeiten zu installieren. Das restliche Projekt kopieren wir dann später, sodass wir bei jeder Änderung der Dateien die Installation von Abhängigkeiten überspringen können. Docker verwendet einen Cache, um das Image aus vorhandenen Ebenen zu erstellen, wenn keine Änderung erfolgt.

123.hp.com/setup 2600

Wir bauen das Projekt mit dem reagieren-Skripte und alle erstellten statischen Dateien werden im /bauen Mappe.

Stufe 2

Stufe 2 beginnt mit dem Basisbild |_+_| und kopieren Sie die Datei nginx.conf, entfernen Sie die Indexdatei vom Stammverzeichnis und kopieren Sie schließlich alle Dateien von Stufe 1 an das Stammverzeichnis, von dem aus der Inhalt bereitgestellt werden kann.

Erstellen Sie das Image und führen Sie das Projekt aus

Lassen Sie uns das Projekt mit diesem Befehl erstellen |_+_| und Sie können das Projekt mit diesem Befehl ausführen |_+_| . Sie können die App auf |_+_| . ausführen

Projekt läuft auf localhost

Wichtige Dinge zu beachten

Der Container-Port und der nginx-Listen-Port sollten gleich sein, was sonst 80 ist ERR_EMPTY_RESPONSE wenn Sie das Projekt ausführen.

/usr/local/nginx/conf.

Wir sollten diese Direktive in die Datei nginx.conf aufnehmen, sonst werden alle Stile im Browser als Klartext gerendert.

listen 80;

Exec in den laufenden Container

Während sich der Container im laufenden Zustand befindet, können wir ihn ausführen und den Inhalt des Dateisystems sehen.

Spring Boot vs Django
{ listen 80; root /usr/share/nginx/html; }.

Wir können eigentlich alle Inhalte unter |_+_| . sehen

Dateisystem im Docker

Zusammenfassung

  • NGINX kann als Webserver oder Reverse-Proxy verwendet werden, um den statischen Inhalt bereitzustellen.
  • Die gesamte NGINX-Konfiguration kann in dieser Datei abgelegt werden |_+_| .
  • Wir müssen die React-App erstellen und alle statischen Dateien im Stammverzeichnis von NGINX platzieren, um das Web zu bedienen.
  • Als Container-Laufzeit wird Docker verwendet.
  • Wir verwenden mehrstufige Builds, um die endgültige Bildgröße zu reduzieren und unnötige Dateien aus der Produktionsumgebung zu entfernen.
  • Docker-Image kann mit |_+_| . erstellt werden
  • Führen Sie den Container mit diesem Befehl aus |_+_|
  • Es ist sehr wichtig, die Ports beim Ausführen des Containers und den Listen-Port in der Datei nginx.conf abzugleichen. Sonst bekommst du ein ERR_EMPTY_RESPONSE Error**.**
  • Sie können in den Container ausführen, um das Dateisystem mit diesem Befehl zu erkunden |_+_|

Abschluss

NGINX ist ein leistungsstarker Webserver, der der Bereitstellung von Inhalten und Anwendungen dient, die Sicherheit verbessert, die Verfügbarkeit und Skalierbarkeit der Web-Apps erleichtert. Wenn Sie die Erstellung von UI-Apps mit Java oder der Knoten-js-Serverlaufzeit vermeiden möchten oder nicht erforderlich sind, können Sie die UI-App erstellen und die statischen Dateien mit NGINX in großem Maßstab bereitstellen. Vielen Dank fürs Lesen!

#reagieren #docker #javascript #nginx #entwicklung