Jeg byggede dette - hvad nu? Sådan implementeres en React-app på en DigitalOcean-dråbe.

De fleste håbende udviklere har uploadet statiske HTML-sider før. Processen er ikke for skræmmende, da du i det væsentlige bare flytter filer fra en computer til en anden og derefter BAM! Internet side.

Men de, der har tacklet læring React, hælder ofte hundreder eller endda tusinder af timer i at lære om komponenter, rekvisitter og tilstand, for kun at være tilbage med spørgsmålet "Hvordan er jeg vært for dette?" Frygt ikke, medudvikler. Implementering af dit seneste mesterværk er lidt mere dybtgående, men ikke alt for svært. Sådan gør du:

Forberedelse til produktion

Der er et par ting, du vil gøre for at gøre din app klar til implementering.

Sluk for servicearbejdere

Hvis du har brugt noget som create-react-app til at starte dit projekt, skal du slå den indbyggede servicearbejder fra, hvis du ikke specifikt har integreret det til at arbejde med din app. Selvom det normalt er harmløst, kan det forårsage nogle problemer, så det er bedst bare at slippe af med det foran. Find disse linjer i din src/index.jsfil, og slet dem:registerServiceWorker();import registerServiceWorker from ‘register-service-worker’

Gør din server klar

For at få mest muligt ud af pengene, vil en produktionsopbygning minimere koden og fjerne ekstra hvidt mellemrum og kommentarer, så det er så hurtigt at downloade som muligt. Det opretter en ny mappe kaldet /build, og vi skal sørge for, at vi beder Express om at bruge det. På din serverside skal du tilføje denne linje:app.use( express.static( `${__dirname}/../build` ) );

Derefter skal du sørge for, at dine ruter ved, hvordan du kommer til din index.html-fil. For at gøre dette skal vi oprette et slutpunkt og placere det under alle andre slutpunkter i din serverfil. Det skal se sådan ud:

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

Opret produktionsbygningen

Nu da Express ved at bruge /buildbiblioteket, er det tid til at oprette det. Åbn din terminal, sørg for at du er i dit projektmappe, og brug kommandoennpm run build

Hold dine hemmeligheder sikre

Hvis du bruger API-nøgler eller en databaseforbindelsesstreng, forhåbentlig har du allerede skjult dem i en .envfil. Al konfiguration, der er forskellig mellem distribueret og lokal, skal også gå ind i denne fil. Mærker kan ikke proxieres, så vi skal hardkode i backend-adressen, når vi bruger React dev-serveren, men vi vil bruge relative stier i produktionen. Din resulterende .envfil kan se sådan ud:

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

Skub din kode

Test din app lokalt ved at gå til //localhost:3030og erstatte 3030 med din serverport for at sikre, at alt stadig kører problemfrit. Husk at starte din lokale server med node eller nodemon, så den kører, når du tjekker den. Når alt ser godt ud, kan vi skubbe det til Github (eller Bit Bucket osv.).

VIGTIG! Før du gør det, skal du dobbelttjekke, at din .gitignorefil indeholder, .envog at /builddu ikke offentliggør følsomme oplysninger eller unødvendige filer.

Opsætning af DigitalOcean

DigitalOcean er en førende hostingplatform og gør det relativt nemt og omkostningseffektivt at implementere React-websteder. De bruger dråber, hvilket er det udtryk, de bruger til deres servere. Før vi opretter vores Droplet, har vi stadig lidt arbejde at gøre.

Oprettelse af SSH-nøgler

Servere er computere, der har offentlige IP-adresser. På grund af dette har vi brug for en måde at fortælle serveren, hvem vi er, så vi kan gøre ting, som vi ikke ønsker, at nogen anden skal gøre, som at foretage ændringer i vores filer. Din daglige adgangskode er ikke sikker nok, og en adgangskode, der er lang og kompleks nok til at beskytte din dråbe, ville være næsten umulig at huske. I stedet bruger vi en SSH-nøgle.

For at oprette din SSH-nøgle skal du indtaste denne kommando i din terminal: ssh-keygen -t rsa

Dette starter processen med generering af SSH-nøgler. Først bliver du bedt om at angive, hvor den nye nøgle skal gemmes. Medmindre du allerede har en nøgle, du skal beholde, kan du beholde standardplaceringen og blot trykke på enter for at fortsætte.

Som et ekstra sikkerhedslag, hvis nogen får fat i din computer, skal du indtaste en adgangskode for at sikre din nøgle. Din terminal viser ikke dine tastetryk, når du skriver denne adgangskode, men den holder styr på den. Når du har trykket på enter, skal du indtaste det igen for at bekræfte. Hvis det lykkes, skal du nu se noget som dette:

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 |+-----------------+

Hvad skete der?

To filer er oprettet på din computer - id_rsaog id_rsa.pub. Den id_rsafil er din private nøgle og bruges til at verificere din signatur, når du bruger den id_rsa.pubfil, eller offentlige nøgle. Vi er nødt til at give vores offentlige nøgle til DigitalOcean. For at få det skal du indtaste cat ~/.ssh/id_rsa.pub. Du skal nu se på en lang række tegn, som er indholdet af din id_rsa.pubfil. Det ser sådan ud:

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

Nu er det en adgangskode! Kopier strengen manuelt, eller brug kommandopuben pbcopy < ~/.ssh/id_rsa.til at få terminalen til at kopiere den til dig.

Tilføjelse af din SSH-nøgle til DigitalOcean

Log ind på din DigitalOcean-konto, eller tilmeld dig, hvis du ikke allerede har gjort det. Gå til dine sikkerhedsindstillinger, og klik på Tilføj SSH. Indsæt den nøgle, du kopierede, og giv den et navn. Du kan navngive det, hvad du vil, men det er en god ide at henvise til den computer, nøglen er gemt på, især hvis du bruger flere computere regelmæssigt.

Oprettelse af en dråbe

Med nøglen på plads kan vi endelig oprette vores dråbe. For at komme i gang skal du klikke på Opret dråbe. Du bliver bedt om at vælge et operativsystem, men til vores formål fungerer standard Ubuntu fint.

Du bliver nødt til at vælge, hvilken størrelse dråbe, du vil bruge. I mange tilfælde vil den mindste dråbe gøre. Gennemgå dog de tilgængelige muligheder, og vælg den, der fungerer bedst til dit projekt.

Vælg derefter et datacenter til din Droplet. Vælg en placering centralt for din forventede besøgende. Nye funktioner rulles ud af DigitalOcean i forskellige datacentre på forskellige tidspunkter, men medmindre du ved, at du vil bruge en speciel funktion, der kun er tilgængelig på bestemte placeringer, betyder dette ikke noget.

Hvis du vil tilføje yderligere tjenester til din dråbe, f.eks. Sikkerhedskopier eller private netværk, har du denne mulighed her. Vær opmærksom på, at der er en tilknyttet pris for disse tjenester.

Endelig skal du sørge for, at din SSH-nøgle er valgt og give din dråbe et navn. Det er muligt at være vært for flere projekter på en enkelt dråbe, så du vil måske ikke give det et projektspecifikt navn. Indsend dine indstillinger ved at klikke på knappen Opret nederst på siden.

Opretter forbindelse til din dråbe

Med vores Droplet oprettet kan vi nu oprette forbindelse til det via SSH. Kopier IP-adressen til din dråbe og gå tilbage til din terminal. Indtast ssh efterfulgt af root @ din adresse, hvor din adresse er IP-adressen til din dråbe. Det skal se nogenlunde sådan her: ssh [email protected]. Dette fortæller din computer, at du vil oprette forbindelse til din IP-adresse som rodbruger. Alternativt kan du oprette brugerkonti, hvis du ikke vil logge ind som root, men det er ikke nødvendigt.

Installation af 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.

For at inkorporere frontendændringer skal du køre byggeprocessen igen med npm run build. Hvis du har foretaget ændringer i serverfilen, skal du genstarte PM2 ved at køre pm2 restart all. Det er det! Dine opdateringer skal være live nu.