Ich habe das gebaut - jetzt was? Bereitstellen einer React-App auf einem DigitalOcean-Droplet.

Foto von Thomas Kvistholt

Die meisten aufstrebenden Entwickler haben bereits statische HTML-Sites hochgeladen. Der Vorgang ist nicht zu entmutigend, da Sie im Wesentlichen nur Dateien von einem Computer auf einen anderen verschieben und dann BAM! Webseite.

Aber diejenigen, die sich mit Lernreaktionen befasst haben, investieren oft Hunderte oder sogar Tausende von Stunden in das Erlernen von Komponenten, Requisiten und Zuständen, nur um sich die Frage zu stellen: „Wie kann ich das hosten?“ Fürchte dich nicht, Mitentwickler. Die Bereitstellung Ihres neuesten Meisterwerks ist etwas gründlicher, aber nicht allzu schwierig. Hier ist wie:

Vorbereitung für die Produktion

Es gibt einige Dinge, die Sie tun möchten, um Ihre App für die Bereitstellung vorzubereiten.

Servicekräfte ausschalten

Wenn Sie zum Booten Ihres Projekts eine App wie "Erstellen-Reagieren-App" verwendet haben, möchten Sie den integrierten Service-Worker deaktivieren, wenn Sie ihn nicht speziell für die Arbeit mit Ihrer App integriert haben. Obwohl es normalerweise harmlos ist, kann es einige Probleme verursachen. Es ist daher am besten, es einfach von vorn loszuwerden. Suchen Sie diese Zeilen in Ihrer Datei src / index.js und löschen Sie sie: registerServiceWorker (); registerServiceWorker aus 'register-service-worker' importieren

Bereiten Sie Ihren Server vor

Um das Beste für Ihr Geld zu bekommen, wird der Code in einer Produktionsversion minimiert und zusätzliche Leerzeichen und Kommentare entfernt, damit der Download so schnell wie möglich erfolgt. Es wird ein neues Verzeichnis mit dem Namen / build erstellt. Wir müssen sicherstellen, dass Express angewiesen wird, es zu verwenden. Fügen Sie auf Ihrer Serverseite folgende Zeile hinzu: app.use (express.static (`$ {__ dirname} /../ build`));

Als Nächstes müssen Sie sicherstellen, dass Ihre Routen wissen, wie Sie zu Ihrer index.html-Datei gelangen. Dazu müssen wir einen Endpunkt erstellen und unter allen anderen Endpunkten in Ihrer Serverdatei platzieren. Es sollte so aussehen:

const path = require ('path')
app.get ('*', (req, res) => {
  res.sendFile (path.join (__ dirname, '../build/index.html'));
})

Erstellen Sie den Produktionsbuild

Jetzt, da Express das Verzeichnis / build verwenden kann, ist es an der Zeit, es zu erstellen. Öffnen Sie Ihr Terminal, vergewissern Sie sich, dass Sie sich in Ihrem Projektverzeichnis befinden, und verwenden Sie den Befehl npm run build

Bewahren Sie Ihre Geheimnisse gut auf

Wenn Sie API-Schlüssel oder eine Datenbankverbindungszeichenfolge verwenden, haben Sie diese hoffentlich bereits in einer ENV-Datei ausgeblendet. Alle Konfigurationen, die sich zwischen implementiert und lokal unterscheiden, sollten ebenfalls in diese Datei aufgenommen werden. Tags können nicht als Proxyserver verwendet werden. Wenn Sie den React dev-Server verwenden, müssen Sie die Back-End-Adresse fest codieren. In der Produktion sollen jedoch relative Pfade verwendet werden. Ihre resultierende .env-Datei könnte ungefähr so ​​aussehen:

REACT_APP_LOGIN = "http: // localhost: 3030 / api / auth / login"
REACT_APP_LOGOUT = "http: // localhost: 3030 / api / auth / logout"

DOMAIN = "user4234.auth0.com"
ID = "46NxlCzM0XDE7T2upOn2jlgvoS"
SECRET 0xbTbFK2y3DIMp2TdOgK1MKQ2vH2WRg2rv6jVrMhSX0T39e5_Kd4lmsFz
SUCCESS_REDIRECT = "http: // localhost: 3030 /"
FAILURE_REDIRECT = "http: // localhost: 3030 / api / auth / login"
AWS_ACCESS_KEY_ID = AKSFDI4KL343K55L3
AWS_SECRET_ACCESS_KEY = EkjfDzVrG1cw6QFDK4kjKFUa2yEDmPOVzN553kAANcy
CONNECTION_STRING = "postgres: // vuigx: k8Io13cePdUorndJAB2ijk_u0r4@stampy.db.elephantsql.com: 5432 / vuigx"
NODE_ENV = Entwicklung

Gib deinen Code ein

Testen Sie Ihre App lokal, indem Sie http: // localhost: 3030 aufrufen und 3030 durch Ihren Server-Port ersetzen, um sicherzustellen, dass alles weiterhin reibungslos funktioniert. Denken Sie daran, Ihren lokalen Server mit Node oder Nodemon zu starten, damit er beim Überprüfen funktioniert. Sobald alles gut aussieht, können wir es zu Github (oder Bit Bucket usw.) schicken.

WICHTIG! Stellen Sie zuvor sicher, dass Ihre .gitignore-Datei .env und / build enthält, damit Sie keine vertraulichen Informationen oder unnötigen Dateien veröffentlichen.

Einrichten von DigitalOcean

DigitalOcean ist eine führende Hosting-Plattform und macht die Bereitstellung von React-Sites relativ einfach und kostengünstig. Sie verwenden Droplets. Dies ist der Begriff, den sie für ihre Server verwenden. Bevor wir unser Droplet erstellen, müssen wir noch ein wenig arbeiten.

SSH-Schlüssel erstellen

Server sind Computer mit öffentlichen IP-Adressen. Aus diesem Grund müssen wir dem Server mitteilen, wer wir sind, damit wir Dinge tun können, die wir nicht möchten, dass andere Personen Änderungen an unseren Dateien vornehmen. Ihr tägliches Passwort ist nicht sicher genug und ein Passwort, das lang und komplex genug ist, um Ihr Droplet zu schützen, lässt sich kaum merken. Stattdessen verwenden wir einen SSH-Schlüssel.

Foto von Brenda Clarke

Geben Sie zum Erstellen Ihres SSH-Schlüssels den folgenden Befehl in Ihr Terminal ein: ssh-keygen -t rsa

Dies startet den Prozess der SSH-Schlüsselgenerierung. Zunächst werden Sie gefragt, wo der neue Schlüssel gespeichert werden soll. Sofern Sie noch keinen Schlüssel haben, den Sie behalten müssen, können Sie den Standardspeicherort beibehalten und einfach die Eingabetaste drücken, um fortzufahren.

Als zusätzliche Sicherheitsstufe für den Fall, dass jemand Ihren Computer in Besitz nimmt, müssen Sie ein Kennwort eingeben, um Ihren Schlüssel zu sichern. Ihr Terminal zeigt Ihre Tastatureingaben nicht an, während Sie dieses Passwort eingeben, aber es verfolgt es. Sobald Sie die Eingabetaste drücken, müssen Sie sie zur Bestätigung erneut eingeben. Wenn dies erfolgreich ist, sollten Sie jetzt Folgendes sehen:

Generieren eines öffentlichen / privaten RSA-Schlüsselpaars.
Geben Sie die Datei ein, in der der Schlüssel gespeichert werden soll (/Users/username/.ssh/id_rsa):
Passphrase eingeben (leer für keine Passphrase):
Geben Sie dieselbe Passphrase erneut ein:
Ihre Identifikation wurde in demo_rsa gespeichert.
Ihr öffentlicher Schlüssel wurde in demo_rsa.pub gespeichert.
Der Schlüsselfingerabdruck lautet:
cc: 28: 30: 44: 01: 41: 98: cf: ae: b6: 65: 2a: f2: 32: 57: b5 user@user.local
Das zufällige Bild des Schlüssels ist:
+ - [RSA 2048] ---- +
| = * +. |
| o. |
| oo |
| oo. + |
| . .... S |
| . ..E |
| . + |
| *. = |
| + Bo |
+ ----------------- +

Was ist passiert?

Auf Ihrem Computer wurden zwei Dateien erstellt - id_rsa und id_rsa.pub. Die Datei id_rsa ist Ihr privater Schlüssel und wird zum Überprüfen Ihrer Signatur verwendet, wenn Sie die Datei id_rsa.pub oder den öffentlichen Schlüssel verwenden. Wir müssen DigitalOcean unseren öffentlichen Schlüssel geben. Geben Sie dazu cat ~ / .ssh / id_rsa.pub ein. Sie sollten sich jetzt eine lange Zeichenfolge ansehen, die den Inhalt Ihrer Datei id_rsa.pub enthält. Es sieht ungefähr so ​​aus:

ssh-rsaAABC3NzaC1yc2EAAAADAQABAAABAQDR5ehyadT9unUcxftJOitl5yOXgSi2Wj / s6ZBudUS5Cex56LrndfP5Uxb8 + Qpx1D7gYNFacTIcrNDFjdmsjdDEIcz0WTV + mvMRU1G9kKQC01YeMDlwYCopuENaas5 + cZ7DP / qiqqTt5QDuxFgJRTNEDGEebjyr9wYk + mveV / acBjgaUCI4sahij98BAGQPvNS1xvZcLlhYssJSZrSoRyWOHZ / hXkLtq9CvTaqkpaIeqvvmNxQNtzKu7ZwaYWLydEKCKTAe4ndObEfXexQHOOKwwDSyesjaNc6modkZZC + anGLlfwml4IUwGv10nogVg9DTNQQLSPVmnEN3Z User@Computer.local

Das ist jetzt ein Passwort! Kopieren Sie die Zeichenfolge manuell oder verwenden Sie den Befehl pbcopy <~ / .ssh / id_rsa.pub, damit das Terminal sie für Sie kopiert.

Hinzufügen Ihres SSH-Schlüssels zu DigitalOcean

Melden Sie sich bei Ihrem DigitalOcean-Konto an oder registrieren Sie sich, falls Sie dies noch nicht getan haben. Gehen Sie zu Ihren Sicherheitseinstellungen und klicken Sie auf SSH hinzufügen. Fügen Sie den kopierten Schlüssel ein und geben Sie ihm einen Namen. Sie können einen beliebigen Namen vergeben, es empfiehlt sich jedoch, auf den Computer zu verweisen, auf dem der Schlüssel gespeichert ist, insbesondere wenn Sie regelmäßig mehrere Computer verwenden.

Erstellen eines Tropfens

Foto von M. Maddo

Mit dem Schlüssel können wir endlich unser Droplet erstellen. Klicken Sie zunächst auf Droplet erstellen. Sie werden aufgefordert, ein Betriebssystem auszuwählen, aber für unsere Zwecke funktioniert das Standard-Ubuntu einwandfrei.

Sie müssen auswählen, welche Tropfengröße Sie verwenden möchten. In vielen Fällen ist das kleinste Tröpfchen ausreichend. Überprüfen Sie jedoch die verfügbaren Optionen und wählen Sie die aus, die für Ihr Projekt am besten geeignet ist.

Wählen Sie als Nächstes ein Rechenzentrum für Ihr Droplet aus. Wählen Sie einen zentralen Ort für Ihre erwartete Besucherbasis. Die neuen Funktionen werden von DigitalOcean zu unterschiedlichen Zeiten in verschiedenen Rechenzentren eingeführt. Dies ist jedoch unerheblich, sofern Sie nicht wissen, dass Sie eine spezielle Funktion verwenden möchten, die nur an bestimmten Standorten verfügbar ist.

Wenn Sie Ihrem Droplet zusätzliche Dienste wie Backups oder private Netzwerke hinzufügen möchten, haben Sie diese Option hier. Beachten Sie, dass diese Dienste mit Kosten verbunden sind.

Stellen Sie schließlich sicher, dass Ihr SSH-Schlüssel ausgewählt ist, und geben Sie Ihrem Droplet einen Namen. Es ist möglich, mehrere Projekte auf einem einzigen Droplet zu hosten, daher möchten Sie ihm möglicherweise keinen projektspezifischen Namen geben. Senden Sie Ihre Einstellungen, indem Sie auf die Schaltfläche Erstellen unten auf der Seite klicken.

Verbindung zu Ihrem Droplet herstellen

Mit unserem erstellten Droplet können wir jetzt eine Verbindung über SSH herstellen. Kopieren Sie die IP-Adresse für Ihr Droplet und kehren Sie zu Ihrem Terminal zurück. Geben Sie ssh gefolgt von root @ youripaddress ein, wobei youripaddress die IP-Adresse für Ihr Droplet ist. Es sollte ungefähr so ​​aussehen: ssh root@123.45.67.8. Dies teilt Ihrem Computer mit, dass Sie als Root-Benutzer eine Verbindung zu Ihrer IP-Adresse herstellen möchten. Alternativ können Sie Benutzerkonten einrichten, wenn Sie sich nicht als Root anmelden möchten, dies jedoch nicht erforderlich ist.

Knoten installieren

Zum Ausführen von React benötigen wir eine aktualisierte Version von Node. Zuerst möchten wir apt-get update && apt-get dist-upgrade ausführen, um die Linux-Softwareliste zu aktualisieren. Geben Sie als Nächstes apt-get install nodejs -y, apt-get install npm -y und npm i -g n ein, um Nodejs und npm zu installieren.

Für die Abhängigkeiten Ihrer React-App ist möglicherweise eine bestimmte Version von Node erforderlich. Überprüfen Sie daher die von Ihrem Projekt verwendete Version, indem Sie den Knoten -v in Ihrem Projektverzeichnis ausführen. Sie möchten dies wahrscheinlich auf einem anderen Terminal-Tab tun, damit Sie sich nicht erneut über SSH anmelden müssen.

Wenn Sie wissen, welche Version Sie benötigen, kehren Sie zu Ihrer SSH-Verbindung zurück und führen Sie n 6.11.2 aus. Ersetzen Sie 6.11.2 durch Ihre spezifische Versionsnummer. Dies stellt sicher, dass die Version Ihres Droplets von Node mit Ihrem Projekt übereinstimmt und potenzielle Probleme minimiert.

Installieren Sie Ihre App im Droplet

Die Grundlagen wurden gelegt und es ist endlich Zeit, unsere React-App zu installieren! Stellen Sie sicher, dass Sie sich in Ihrem Home-Verzeichnis befinden, während Sie noch über SSH verbunden sind. Sie können cd ~ eingeben, um dorthin zu gelangen, wenn Sie sich nicht sicher sind.

Damit die Dateien in Ihr Droplet gelangen, klonen Sie sie von Ihrem Github-Repo. Holen Sie sich den HTTP-Klon-Link von Github und geben Sie in Ihrem Terminal git clone https://github.com/username/my-react-project.git ein. Wie bei Ihrem lokalen Projekt können Sie mit cd my-react-project eine CD in Ihren Projektordner kopieren und anschließend npm install ausführen.

Ignorieren Sie Ihre ignorierten Dateien nicht

Denken Sie daran, dass Git angewiesen wurde, die ENV-Datei zu ignorieren, damit sie nicht in den Code aufgenommen wird, den wir gerade heruntergeladen haben. Wir müssen es jetzt manuell hinzufügen. touch .env erstellt eine leere .env-Datei, die wir dann mit nano .env im Nano-Editor öffnen können. Kopieren Sie den Inhalt Ihrer lokalen .env-Datei und fügen Sie ihn in den Nano-Editor ein.

Wir haben Git außerdem angewiesen, das Build-Verzeichnis zu ignorieren. Das liegt daran, dass wir nur die Produktionsversion getestet haben, aber jetzt werden wir sie auf unserem Droplet erneut erstellen. Verwenden Sie npm run build, um diesen Prozess erneut auszuführen. Wenn Sie eine Fehlermeldung erhalten, stellen Sie sicher, dass alle Abhängigkeiten in Ihrer package.json-Datei aufgeführt sind. Wenn etwas fehlt, installiere npm diese Pakete.

Fang an!

Führen Sie Ihren Server mit dem Knoten server / index.js (oder wie auch immer Ihre Serverdatei heißt) aus, um sicherzustellen, dass alles funktioniert. Wenn ein Fehler auftritt, überprüfen Sie erneut, ob Abhängigkeiten vorhanden sind, die möglicherweise nicht im Erstellungsprozess erfasst wurden. Wenn alles startet, sollten Sie jetzt in der Lage sein, zu ipaddress: serverport zu gehen, um Ihre Site zu sehen: 123.45.67.8:3232. Wenn Ihr Server auf Port 80 ausgeführt wird, ist dies ein Standardport, und Sie können einfach die IP-Adresse verwenden, ohne eine Portnummer anzugeben: 123.45.67.8

Foto von John Baker auf Unsplash

Sie haben jetzt einen Platz im Internet, um sich selbst anzurufen! Wenn Sie einen Domainnamen erworben haben, den Sie anstelle der IP-Adresse verwenden möchten, können Sie die Anweisungen von DigitalOcean zur Einrichtung befolgen.

Lass es laufen

Ihre Site ist aktiv, aber sobald Sie das Terminal schließen, wird Ihr Server gestoppt. Da dies ein Problem ist, möchten wir weitere Software installieren, die den Server anweist, nicht anzuhalten, sobald die Verbindung beendet wird. Hierfür gibt es einige Optionen. In diesem Artikel wird jedoch der Programm-Manager 2 verwendet.

Schalten Sie Ihren Server aus, falls Sie dies noch nicht getan haben, und führen Sie npm install -g pm2 aus. Nach der Installation können wir festlegen, dass unser Server mit pm2 start server / index.js ausgeführt werden soll

Aktualisieren Sie Ihren Code

Irgendwann werden Sie wahrscheinlich Ihr Projekt aktualisieren wollen, aber zum Glück können Sie Änderungen schnell und einfach hochladen. Sobald Sie Ihren Code an Github gesendet haben, speichern Sie ssh in Ihrem Droplet und cd in Ihrem Projektverzeichnis. Da wir ursprünglich von Github geklont haben, müssen wir diesmal keine Links bereitstellen. Sie können den neuen Code einfach durch Ausführen von git pull herunterladen.

Um Änderungen am Frontend zu übernehmen, müssen Sie den Build-Prozess mit npm run build erneut ausführen. Wenn Sie Änderungen an der Serverdatei vorgenommen haben, starten Sie PM2 neu, indem Sie pm2 restart all ausführen. Das ist es! Ihre Updates sollten jetzt live sein.