ReactJS Container-Deployment: Anleitung für Entwickler

back4app containers ist eine leistungsstarke plattform zum hosten von react anwendungen mit der fähigkeit, dockerisierte react apps automatisch bereitzustellen, können sie ihr projekt in einer skalierbaren und flexiblen umgebung mit leichtigkeit starten in diesem leitfaden führen wir sie durch den prozess der vorbereitung und bereitstellung ihrer react anwendung auf back4app containers, wobei wir alles von einfachen projekten bis hin zu komplexeren setups abdecken wir beginnen mit den notwendigen vorbereitungen, gehen dann zur dockerisierung der anwendung über, testen sie lokal, pushen das projekt zu github, richten das projekt auf back4app containers ein, überwachen die bereitstellung und beheben häufige probleme wenn sie fragen oder kommentare haben, können sie gerne an der diskussion im #containers kanal auf der back4app community auf slack teilnehmen, um spezifische diskussionen zu react auf back4app containers zu führen sie können uns jederzeit auch unter community\@back4app com kontaktieren wenn sie jederzeit ein funktionierendes beispielprojekt für react auf back4app containers überprüfen möchten, gehen sie zu https //github com/templates back4app/containers react sample 1 vorbereiten sie ihre react anwendung a projektstruktur überprüfen sie, ob ihre react anwendung eine ordnungsgemäße verzeichnisstruktur aufweist, mit allen notwendigen dateien und ordnern, wie src , public , components , und assets , die angemessen organisiert sind der haupteinstiegspunkt für ihre anwendung sollte die src/index js oder src/index jsx datei sein b abhängigkeiten überprüfen sie, ob alle erforderlichen abhängigkeiten in der package json datei aufgeführt sind, einschließlich ihrer korrekten versionen stellen sie sicher, dass sie alle abhängigkeiten mit npm install oder yarn install installiert haben, um eine package lock json oder yarn lock datei zu generieren c build prozess für komplexere projekte, die einen build prozess beinhalten, stellen sie sicher, dass ihre build skripte und konfigurationen (z b webpack, babel oder create react app) ordnungsgemäß eingerichtet sind sie sollten in der lage sein, den build prozess lokal ohne probleme auszuführen d umgebungsvariablen wenn ihre anwendung auf umgebungsvariablen angewiesen ist, stellen sie sicher, dass sie eine env datei mit den erforderlichen variablen definiert haben bei der bereitstellung in back4app containern müssen sie diese umgebungsvariablen in den bereitstellungseinstellungen konfigurieren e servereinrichtung (falls zutreffend) wenn ihre react anwendung einen benutzerdefinierten server (z b express) enthält, stellen sie sicher, dass er korrekt eingerichtet und konfiguriert ist, um ihre react anwendung bereitzustellen testen sie ihren server lokal, um sicherzustellen, dass er wie erwartet funktioniert f anwendungsoptimierung optimieren sie ihre react anwendung, indem sie die bundle größen minimieren, code splitting verwenden und bewährte verfahren zur leistungsoptimierung implementieren verwenden sie tools wie lighthouse, um ihre anwendung zu überprüfen und etwaige leistungs oder zugänglichkeitsprobleme zu beheben g cross browser kompatibilität testen sie ihre anwendung in mehreren browsern und auf verschiedenen geräten, um eine ordnungsgemäße darstellung und funktionalität sicherzustellen nachdem sie ihre react anwendung gründlich überprüft und vorbereitet haben, können sie zum nächsten schritt übergehen, der darin besteht, ein dockerfile für ihr projekt zu erstellen 2 dockerisierung die dockerisierung einer react anwendung umfasst die erstellung eines dockerfiles im stammverzeichnis ihres projekts das dockerfile enthält anweisungen zum erstellen eines docker images ihrer anwendung, das dann in back4app containern bereitgestellt werden kann hier ist eine detaillierte erklärung, wie sie ein dockerfile für eine reguläre react anwendung erstellen 1 erstellen sie eine neue datei mit dem namen dockerfile (ohne dateierweiterung) im stammverzeichnis ihrer react anwendung 2 definieren sie das basis image beginnen sie das dockerfile, indem sie ein basis image mit dem from befehl angeben für eine typische react anwendung sollte das basis image ein node js image sein, z b node 14 oder node 16 from node 14 3 setzen sie das arbeitsverzeichnis verwenden sie den workdir befehl, um das arbeitsverzeichnis für ihre anwendung innerhalb des docker containers festzulegen hier werden ihre anwendungsdateien gespeichert und ausgeführt workdir /app 3 kopieren sie package json und package lock json kopieren sie die dateien package json und package lock json von ihrem lokalen computer in den docker container mit dem copy befehl diese dateien sind erforderlich, um die abhängigkeiten ihrer anwendung zu installieren copy package json / 4 abhängigkeiten installieren verwenden sie den run befehl, um die abhängigkeiten ihrer anwendung aus der package json datei zu installieren dies geschieht normalerweise mit npm ci, das die genauen abhängigkeitsversionen installiert, die in der package lock json datei angegeben sind run npm ci 5 kopieren sie die restlichen projektdateien verwenden sie erneut den copy befehl, um die verbleibenden dateien und ordner von ihrem lokalen computer in den docker container zu kopieren copy 6 bauen sie die react anwendung fügen sie einen run befehl hinzu, um ihre react anwendung mit ihrem build skript zu erstellen, normalerweise npm run build dies erzeugt eine produktionsbereite version ihrer react anwendung im build ordner run npm run build 7 konfigurieren sie den server sie benötigen einen server, um ihre erstellte react anwendung bereitzustellen eine gängige wahl ist serve zuerst installieren sie es global im docker container mit dem run befehl run npm install g serve 8 öffnen sie den serverport verwenden sie den expose befehl, um den port anzugeben, auf dem ihr server im docker container läuft zum beispiel können sie port 5000 verwenden expose 5000 9 starten sie den server verwenden sie den cmd befehl, um den befehl anzugeben, der den server startet, um ihre gebaute react anwendung bereitzustellen mit serve können sie das s flag für eine single page anwendung und den build ordner als quelle angeben cmd \["serve", " s", "build", " l", "5000"] das vollständige dockerfile für eine reguläre react anwendung sollte so aussehen from node 14 workdir /app copy package json / run npm ci copy run npm run build run npm install g serve expose 5000 cmd \["serve", " s", "build", " l", "5000"] weitere dockerfile beispiele, die sie als referenz verwenden können beispiel 1 grundlegende react anwendung dieses dockerfile ist für eine einfache react anwendung es installiert die erforderlichen pakete aus der package json datei, kopiert die projektdateien und stellt die react anwendung mit nginx bereit, wobei port 80 exponiert wird der cmd befehl gibt den befehl an, um den nginx server zu starten \# stage 1 build the react application from node 14 as build workdir /app copy package json / run npm install copy run npm run build \# stage 2 serve the react application using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html \# copy the default nginx conf provided by the docker image copy nginx/nginx conf /etc/nginx/conf d/default conf expose 80 cmd \["nginx", " g", "daemon off;"] beispiel 2 react anwendung mit einem benutzerdefinierten server dieses dockerfile ist für eine komplexere react anwendung, die einen benutzerdefinierten server (z b express) verwendet es installiert die erforderlichen pakete aus der package json datei, kopiert die projektdateien und exponiert port 8000 für den benutzerdefinierten server der cmd befehl gibt den befehl an, um den benutzerdefinierten server zu starten \# base image from node 14 \# working directory workdir /app \# copy package json and package lock json and install dependencies copy package json / run npm ci \# copy the rest of the project files copy \# expose the server port expose 8000 \# command to start the server cmd \["npm", "run", "server"] 4 testen sie ihr projekt lokal bevor sie ihre react anwendung auf back4app containern bereitstellen, ist es wichtig, sie lokal mit docker zu testen dies hilft sicherzustellen, dass ihre anwendung wie erwartet funktioniert und hilft ihnen, probleme zu identifizieren und zu beheben, bevor sie mit der bereitstellung fortfahren bauen sie das docker image für ihre react anwendung navigieren sie in ihrem terminal zum stammverzeichnis ihres projekts und führen sie den folgenden befehl aus, wobei sie your app name durch den namen ihrer anwendung ersetzen docker build t your app name führen sie den docker container lokal aus führen sie als nächstes den folgenden befehl aus, um den docker container lokal zu starten dieser befehl mappt den exponierten port des containers (z b 3000) auf einen port auf ihrem lokalen computer (z b 3000) docker run p 3000 3000 your app name testen sie ihre anwendung öffnen sie einen webbrowser und navigieren sie zu http //localhost 3000 http //localhost 3000 , um ihre react anwendung anzuzeigen stellen sie sicher, dass alles wie erwartet funktioniert wenn sie auf probleme stoßen, beheben sie diese, bevor sie mit dem nächsten schritt fortfahren 5 pushen sie ihr projekt zu github erstellen sie eine gitignore datei im stammverzeichnis ihres projekts, um unnötige oder sensible dateien aus ihrem repository auszuschließen (z b node modules , env , build , usw ) initialisieren sie ein git repository, committen sie ihre projektdateien und pushen sie sie zu einem remote repository (z b auf github) git add git commit m "initial commit" git remote add origin \<your remote repo url> git push u origin master``` 6 deployen sie ihre anwendung auf back4app containern nachdem sie ihr back4app konto erstellt haben, können sie die in den docs aufgeführten schritte befolgen 1 verbinden sie ihr github repo mit back4app 2 bereiten sie ihr projekt für die bereitstellung vor zusammenfassend werden container den anweisungen in ihrer dockerfile folgen und beginnen, ihre app zu erstellen 7 überwachen sie die bereitstellung und beheben sie mögliche fehler behalten sie die bereitstellungsprotokolle und den status im back4app containers dashboard im auge beheben sie alle fehler oder probleme, die während der bereitstellung auftreten bei komplexeren projekten stellen sie sicher, dass alle erforderlichen dienste (wie datenbanken oder externe apis) korrekt konfiguriert und zugänglich sind 8 fehlerbehebung bei häufigen problemen häufige bereitstellungsfehler beim ausführen einer react app auf back4app containern sind aufgeführt hier weitere mögliche häufige fehler beim bereitstellen einer react anwendung sind npm start anstelle von npm run build verwenden npm start wird empfohlen, wenn sie ein entwicklungsszenario haben, aber für produktionsumgebungen ist es angemessener, npm run build zu verwenden auch dieser build befehl führt zu einem geringeren speicherverbrauch statische dateien mit nginx bereitstellen eine weitere gute praxis ist es, statische dateien mit einem anwendungsserver wie nginx bereitzustellen falsche portkonfiguration react anwendungen sollten so konfiguriert werden, dass sie auf einem bestimmten port ausgeführt werden, wenn sie auf back4app containern bereitgestellt werden wenn die anwendung weiterhin nicht zugänglich ist, überprüfen sie die dockerfile, um sicherzustellen, dass der richtige port freigegeben ist (z b expose 5000 für port 5000) inkompatible oder fehlende abhängigkeiten stellen sie sicher, dass alle erforderlichen abhängigkeiten in der package json datei aufgeführt sind und dass ihre versionen miteinander und mit ihrem anwendungscode kompatibel sind fehlende oder inkompatible abhängigkeiten können zu laufzeitfehlern führen ungültige umgebungsvariablen oder konfiguration überprüfen sie, ob ihre anwendung auf bestimmte umgebungsvariablen oder konfigurationsdateien angewiesen ist, und stellen sie sicher, dass diese im back4app container umfeld korrekt eingerichtet sind setzen sie alle erforderlichen umgebungsvariablen in ihrer dockerfile mit dem befehl env anwendungsabstürze oder unbehandelte ausnahmen unbehandelte ausnahmen oder abstürze in ihrem react anwendungscode können zu bereitstellungsfehlern oder unerwartetem verhalten führen überprüfen sie die anwendungsprotokolle auf fehlermeldungen und beheben sie alle probleme in ihrem code überprüfen sie die containerprotokolle, indem sie docker logs your app name ausführen, um zu sehen, ob fehler oder ausnahmen auftreten verwenden sie ein tool wie sentry, um fehler in ihrer anwendung zu verfolgen und zu überwachen konfiguration des serverseitigen renderings wenn ihre react anwendung serverseitiges rendering (ssr) verwendet, stellen sie sicher, dass ihre ssr konfiguration in ihrer docker datei korrekt eingerichtet ist und dass sie ihre anwendung mit dem richtigen einstiegspunkt startet wenn sie beim bereitstellen ihrer react anwendung auf back4app containern auf andere probleme stoßen, wenden sie sich an das back4app support team unter community\@back4app com 9 skalieren sie ihre anwendung für komplexere projekte, die zusätzliche ressourcen oder horizontale/vertikale skalierung erfordern, sollten sie in betracht ziehen, ihren back4app containerplan zu aktualisieren, um erhöhten verkehr und last zu bewältigen 10 beispielanwendung für ein beispielprojekt einer django anwendung können sie gehen zu https //github com/templates back4app/containers python flask sample