Ich habe das gebaut - was nun? So stellen Sie eine React-App auf einem DigitalOcean-Droplet bereit.

Die meisten aufstrebenden Entwickler haben bereits statische HTML-Sites hochgeladen. Der Prozess 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 Learning React befasst haben, investieren oft Hunderte oder sogar Tausende von Stunden in das Erlernen von Komponenten, Requisiten und Zuständen, um dann die Frage zu stellen: "Wie hoste ich das?" Fürchte dich nicht, Mitentwickler. Die Bereitstellung Ihres neuesten Meisterwerks ist etwas ausführlicher, 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.

Servicemitarbeiter ausschalten

Wenn Sie zum Erstellen Ihres Projekts eine App zum Erstellen und Reagieren verwendet haben, möchten Sie den integrierten Servicemitarbeiter deaktivieren, wenn Sie ihn nicht speziell für die Arbeit mit Ihrer App integriert haben. Während es normalerweise harmlos ist, kann es einige Probleme verursachen, daher ist es am besten, es einfach im Voraus loszuwerden. Suchen Sie diese Zeilen in Ihrer src/index.jsDatei und löschen Sie sie:registerServiceWorker();import registerServiceWorker from ‘register-service-worker’

Bereiten Sie Ihren Server vor

Um das Beste für Ihr Geld zu bekommen, wird der Code durch einen Produktions-Build 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 erstellt /build, und wir müssen sicherstellen, dass Express angewiesen wird, es zu verwenden. Fügen Sie auf Ihrer Serverseite diese 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 Produktionsaufbau

Nachdem Express das /buildVerzeichnis verwenden kann, ist es Zeit, es zu erstellen. Öffnen Sie Ihr Terminal, stellen Sie sicher, dass Sie sich in Ihrem Projektverzeichnis befinden, und verwenden Sie den Befehlnpm run build

Bewahren Sie Ihre Geheimnisse sicher auf

Wenn Sie API-Schlüssel oder eine Datenbankverbindungszeichenfolge verwenden, haben Sie diese hoffentlich bereits in einer .envDatei versteckt . Alle Konfigurationen, die sich zwischen bereitgestellt und lokal unterscheiden, sollten ebenfalls in diese Datei aufgenommen werden. Tags können nicht als Proxy verwendet werden, daher müssen wir bei Verwendung des React Dev-Servers die Backend-Adresse fest codieren, möchten jedoch relative Pfade in der Produktion verwenden. Ihre resultierende .envDatei könnte ungefähr so ​​aussehen:

REACT_APP_LOGIN="//localhost:3030/api/auth/login"REACT_APP_LOGOUT="//localhost:3030/api/auth/logout"DOMAIN="user4234.auth0.com"ID="46NxlCzM0XDE7T2upOn2jlgvoS"SECRET="0xbTbFK2y3DIMp2TdOgK1MKQ2vH2WRg2rv6jVrMhSX0T39e5_Kd4lmsFz"SUCCESS_REDIRECT="//localhost:3030/"FAILURE_REDIRECT="//localhost:3030/api/auth/login"
AWS_ACCESS_KEY_ID=AKSFDI4KL343K55L3AWS_SECRET_ACCESS_KEY=EkjfDzVrG1cw6QFDK4kjKFUa2yEDmPOVzN553kAANcy
CONNECTION_STRING="postgres://vuigx:[email protected]:5432/vuigx"NODE_ENV=development

Schieben Sie Ihren Code

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

WICHTIG! Bevor Sie dies tun, überprüfen Sie, dass Ihre .gitignoreDatei enthält .envund /buildso dass Sie keine vertraulichen Informationen oder unnötige Dateien zu 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, den 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 können, wer wir sind, damit wir Dinge tun können, die niemand anderes tun soll, z. B. Ä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, ist kaum zu merken. Stattdessen verwenden wir einen SSH-Schlüssel.

Geben Sie diesen Befehl in Ihr Terminal ein, um Ihren SSH-Schlüssel zu erstellen: ssh-keygen -t rsa

Dies startet den Prozess der SSH-Schlüsselgenerierung. Zunächst werden Sie aufgefordert, anzugeben, wo der neue Schlüssel gespeichert werden soll. Sofern Sie nicht bereits einen 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 Sicherheitsebene für den Fall, dass jemand Ihren Computer in die Hand nimmt, müssen Sie ein Kennwort eingeben, um Ihren Schlüssel zu sichern. Ihr Terminal zeigt Ihre Tastenanschläge nicht an, während Sie dieses Passwort eingeben, aber es verfolgt es. Sobald Sie die Eingabetaste drücken, müssen Sie es zur Bestätigung noch einmal eingeben. Wenn Sie erfolgreich sind, sollten Sie jetzt Folgendes sehen:

Generating public/private rsa key pair.Enter file in which to save the key (/Users/username/.ssh/id_rsa):Enter passphrase (empty for no passphrase):Enter same passphrase again:Your identification has been saved in demo_rsa.Your public key has been saved in demo_rsa.pub.The key fingerprint is:cc:28:30:44:01:41:98:cf:ae:b6:65:2a:f2:32:57:b5 [email protected] key's randomart image is:+--[ RSA 2048]----+|=*+. ||o. || oo || oo .+ || . ....S || . ..E || . + ||*.= ||+Bo |+-----------------+

Was ist passiert?

Auf Ihrem Computer wurden zwei Dateien erstellt - id_rsaund id_rsa.pub. Die id_rsaDatei ist Ihr privater Schlüssel und wird verwendet, um Ihre Signatur zu überprüfen, wenn Sie die id_rsa.pubDatei oder den öffentlichen Schlüssel verwenden. Wir müssen DigitalOcean unseren öffentlichen Schlüssel geben. Um es zu bekommen, geben Sie ein cat ~/.ssh/id_rsa.pub. Sie sollten sich jetzt eine lange Zeichenfolge ansehen, die den Inhalt Ihrer id_rsa.pubDatei darstellt. Es sieht ungefähr so ​​aus:

ssh-rsaAABC3NzaC1yc2EAAAADAQABAAABAQDR5ehyadT9unUcxftJOitl5yOXgSi2Wj/s6ZBudUS5Cex56LrndfP5Uxb8+Qpx1D7gYNFacTIcrNDFjdmsjdDEIcz0WTV+mvMRU1G9kKQC01YeMDlwYCopuENaas5+cZ7DP/qiqqTt5QDuxFgJRTNEDGEebjyr9wYk+mveV/acBjgaUCI4sahij98BAGQPvNS1xvZcLlhYssJSZrSoRyWOHZ/hXkLtq9CvTaqkpaIeqvvmNxQNtzKu7ZwaYWLydEKCKTAe4ndObEfXexQHOOKwwDSyesjaNc6modkZZC+anGLlfwml4IUwGv10nogVg9DTNQQLSPVmnEN3Z [email protected]

Nun , das ist 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 melden Sie sich an, 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 es beliebig benennen, es empfiehlt sich jedoch, auf den Computer zu verweisen, auf dem der Schlüssel gespeichert ist, insbesondere wenn Sie regelmäßig mehrere Computer verwenden.

Ein Tröpfchen erstellen

Mit dem Schlüssel können wir endlich unser Tröpfchen 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.

You’ll need to select which size Droplet you want to use. In many cases, the smallest Droplet will do. However, review the available options and choose the one that will work best for your project.

Next, select a data center for your Droplet. Choose a location central to your expected visitor base. New features are rolled out by DigitalOcean in different data centers at different times, but unless you know you want to use a special feature that’s only available in specific locations, this won’t matter.

If you want to add additional services to your Droplet such as backups or private networking, you have that option here. Be aware, there is an associated cost for these services.

Finally, make sure your SSH key is selected and give your Droplet a name. It is possible to host multiple projects on a single Droplet, so you may not want to give it a project-specific name. Submit your settings by clicking the Create button at the bottom of the page.

Connecting to your Droplet

With our Droplet created, we can now connect to it via SSH. Copy the IP address for your Droplet and go back to your terminal. Enter ssh followed by [email protected], where youripaddress is the IP address for your Droplet. It should look something like this: ssh [email protected]. This tells your computer that you want to connect to your IP address as the root user. Alternatively, you can set up user accounts if you don’t want to login as root, but it’s not necessary.

Installing Node

To run React, we’ll need an updated version of Node. First we want to run apt-get update && apt-get dist-upgrade to update the Linux software list. Next, enter apt-get install nodejs -y, apt-get install npm -y, and npm i -g n to install Nodejs and npm.

Your React app dependencies might require a specific version of Node, so check the version that your project is using by running node -v in your projects directory. You’ll probably want to do this in a different terminal tab so you don’t have to log in through SSH again.

Once you know what version you need, go back to your SSH connection and run n 6.11.2, replacing 6.11.2 with your specific version number. This ensures your Droplet’s version of Node matches your project and minimizes potential issues.

Install your app to the Droplet

All the groundwork has been laid, and it’s finally time to install our React app! While still connected through SSH, make sure you’re in your home directory. You can enter cd ~ to take you there if you’re not sure.

To get the files to your Droplet, you’re going to clone them from your Github repo. Grab the HTTP clone link from Github and in your terminal enter git clone //github.com/username/my-react-project.git. Just like with your local project, cd into your project folder using cd my-react-project and then run npm install.

Don’t ignore your ignored files

Remember that we told Git to ignore the .env file, so it won’t be included in the code we just pulled down. We need to add it manually now. touch .env will create an empty .env file that we can then open in the nano editor using nano .env. Copy the contents of your local .env file and paste them into the nano editor.

We also told Git to ignore the build directory. That’s because we were just testing the production build, but now we’re going to build it again on our Droplet. Use npm run build to run this process again. If you get an error, check to make sure you have all of your dependencies listed in your package.json file. If there are any missing, npm install those packages.

Start it up!

Run your server with node server/index.js (or whatever your server file is named) to make sure everything is working. If it throws an error, check again for any missing dependencies that might not have been caught in the build process. If everything starts up, you should now be able to go to ipaddress:serverport to see your site: 123.45.67.8:3232. If your server is running on port 80, this is a default port and you can just use the IP address without specifying a port number: 123.45.67.8

You now have a space on the internet to call your own! If you have purchased a domain name you’d like to use in place of the IP address, you can follow DigitalOcean’s instructions on how to set this up.

Keep it running

Your site is live, but once you close the terminal, your server will stop. This is a problem, so we’ll want to install some more software that will tell the server not to stop once the connection is terminated. There are some options for this, but let’s use Program Manager 2 for the sake of this article.

Kill your server if you haven’t already and run npm install -g pm2. Once installed, we can tell it to run our server using pm2 start server/index.js

Updating your code

At some point, you’ll probably want to update your project, but luckily uploading changes is quick and easy. Once you push your code to Github, ssh into your Droplet and cd into your project directory. Because we cloned from Github initially, we don’t need to provide any links this time. You can pull down the new code simply by running git pull.

To incorporate frontend changes, you will need to run the build process again with npm run build. If you’ve made changes to the server file, restart PM2 by running pm2 restart all. That’s it! Your updates should be live now.