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

Foto af Thomas Kvistholt

De fleste håbefulde udviklere har uploadet statiske HTML-websteder 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 taget sig af læringsreaktion, hælder ofte hundreder eller endda tusinder af timer på at lære om komponenter, rekvisitter og tilstand, kun for at stå tilbage med spørgsmålet “Hvordan er jeg vært for dette?” Frygt ikke for, kollegaudvikler. At implementere 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 få din app klar til implementering.

Sluk for servicemedarbejdere

Hvis du har brugt noget som create-react-app til bootstrap af dit projekt, vil du slukke for den indbyggede servicemedarbejder, hvis du ikke specifikt har integreret den til at arbejde med din app. Selv om det normalt er ufarligt, kan det forårsage nogle problemer, så det er bedst at bare slippe af med det foran. Find disse linjer i din src / index.js-fil, og slet dem: registerServiceWorker (); import registerServiceWorker fra ‘register-service-worker’

Gør din server klar

For at få det bedst mulige antal for din sorteper, vil en produktionsopbygning mindske koden og fjerne ekstra hvid plads og kommentarer, så det er så hurtigt at downloade som muligt. Det opretter et nyt bibliotek kaldet / build, og vi er nødt til at sikre, at vi fortæller Express at bruge det. Tilføj din linje på din serverside: app.use (express.statisk (`$ {__ 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 = kræve ('sti')
app.get ('*', (req, res) => {
  res.sendFile (path.join (__ dirname, '../build/index.html'));
})

Opret produktionsbygningen

Nu hvor Express ved at bruge / build-katalogen, er det tid til at oprette det. Åbn din terminal, sørg for, at du er i dit projektmappe, og brug kommandoen npm run build

Hold dine hemmeligheder sikre

Hvis du bruger API-nøgler eller en databaseforbindelsesstreng, har du forhåbentlig allerede skjult dem i en .env-fil. Al den konfiguration, der er forskellig mellem implementeret og lokal, bør også gå ind i denne fil. Mærker kan ikke proxys, så vi er nødt til at kode i backend-adressen, når vi bruger React dev-serveren, men vi vil bruge relative stier i produktionen. Din resulterende .env-fil kan muligvis se sådan ud:

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: [email protected]: 5432 / vuigx"
NODE_ENV = udvikling

Skub din kode

Test din app lokalt ved at gå til http: // localhost: 3030 og udskifte 3030 med din serverport for at sikre dig, at alt stadig fungerer problemfrit. Husk at starte din lokale server med node eller nodemon, så den er i gang, når du kontrollerer 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 kontrollere, at din .gitignore-fil indeholder .env og / build, så du 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 let og omkostningseffektivt at implementere React-websteder. De bruger dråber, hvilket er det udtryk, de bruger til deres servere. Før vi opretter vores dråbe, 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 gør, som at foretage ændringer i vores filer. Din daglige adgangskode vil ikke være 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.

Foto af Brenda Clarke

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 specificere, hvor den nye nøgle skal gemmes. Medmindre du allerede har en nøgle, du har brug for, kan du beholde standardplaceringen og blot trykke på enter for at fortsætte.

Som et tilføjet lag af sikkerhed, hvis nogen får adgang til din computer, skal du indtaste en adgangskode for at sikre din nøgle. Din terminal viser ikke dine tastetryk, mens du indtaster denne adgangskode, men holder styr på den. Når du har ramt enter, skal du indtaste det endnu en gang for at bekræfte. Hvis det lykkes, skal du nu se noget lignende:

Genererer offentlig / privat rsa-nøglepar.
Indtast en fil, hvor nøglen skal gemmes (/Users/username/.ssh/id_rsa):
Indtast adgangskode (tom uden adgangskode):
Indtast den samme adgangssætning igen:
Din identifikation er gemt i demo_rsa.
Din offentlige nøgle er gemt i demo_rsa.pub.
Det vigtigste fingeraftryk er:
cc: 28: 30: 44: 01: 41: 98: cf: ae: b6: 65: 2a: f2: 32: 57: b5 [email protected]
Tastens tilfældige billede er:
+ - [RSA 2048] ---- +
| = * +. |
| O. |
| oo |
| oo. + |
| . .... S |
| . ..E |
| . + |
| *. = |
| + Bo |
+ ----------------- +

Hvad skete der?

Der er oprettet to filer på din computer - id_rsa og id_rsa.pub. Id_rsa-filen er din private nøgle og bruges til at bekræfte din signatur, når du bruger id_rsa.pub-filen eller den 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.pub-fil. 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 kommandoen pbcopy <~ / .ssh / id_rsa.pub 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 nøglen, du kopierede, og angiv den et navn. Du kan navngive det, hvad du vil, men det er god ide at referere til den computer, nøglen er gemt på, især hvis du bruger flere computere regelmæssigt.

Oprettelse af en dråbe

Foto af M. Maddo

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

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

Vælg derefter et datacenter til din dråbe. Vælg en placering, der er central for din forventede besøgende base. 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 det ikke noget.

Hvis du vil tilføje yderligere tjenester til din dråbe, såsom sikkerhedskopier eller privat netværk, har du denne mulighed her. Vær opmærksom på, at der er en tilknyttet omkostning 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 måske ikke ønsker at give det et projektspecifikt navn. Indsend dine indstillinger ved at klikke på knappen Opret i bunden af ​​siden.

Opretter forbindelse til din dråbe

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

Installation af knudepunkt

For at køre React, har vi brug for en opdateret version af Node. Først vil vi køre apt-get-opdatering && apt-get dist-upgrade for at opdatere Linux-softwarelisten. Indtast derefter apt-get install nodejs -y, apt-get install npm -y og npm i -g n for at installere Nodejs og npm.

Din React-app-afhængighed kræver muligvis en bestemt version af Node, så kontroller den version, som dit projekt bruger ved at køre node -v i dit projektmappe. Du vil sandsynligvis gøre dette i en anden terminalfane, så du ikke behøver at logge ind via SSH igen.

Når du ved, hvilken version du har brug for, skal du gå tilbage til din SSH-forbindelse og køre n 6.11.2 og erstatte 6.11.2 med dit specifikke versionnummer. Dette sikrer, at din dråbe version af Node matcher dit projekt og minimerer potentielle problemer.

Installer din app til Droplet

Alt grundlaget er lagt, og det er endelig tid til at installere vores React-app! Mens du stadig er tilsluttet via SSH, skal du sørge for, at du er i dit hjemmekatalog. Du kan indtaste cd ~ for at tage dig der, hvis du ikke er sikker.

For at hente filerne til din dråbe skal du klone dem fra din Github-repo. Grib HTTP-klonlinket fra Github, og indtast gitklon https://github.com/usname/my-react-project.git i din terminal. Ligesom med dit lokale projekt, cd i din projektmappe ved hjælp af cd my-react-project og kør derefter npm installation.

Ignorer ikke dine ignorerede filer

Husk, at vi bad Git om at ignorere .env-filen, så den ikke medtages i den kode, vi lige har trukket ned. Vi skal tilføje det manuelt nu. tryk på .env opretter en tom .env-fil, som vi derefter kan åbne i nano-editoren ved hjælp af nano .env. Kopier indholdet af din lokale .env-fil, og indsæt dem i nano-editoren.

Vi bad også Git om at ignorere build-biblioteket. Det skyldes, at vi lige testede produktionsbygningen, men nu skal vi bygge den igen på vores dråbe. Brug npm run build til at køre denne proces igen. Hvis du får en fejl, skal du kontrollere, at du har alle dine afhængigheder anført i din package.json-fil. Hvis der mangler nogen, skal npm installere disse pakker.

Start det op!

Kør din server med nodeserver / index.js (eller hvad din serverfil hedder) for at sikre, at alt fungerer. Hvis det kaster en fejl, skal du kontrollere igen for manglende afhængigheder, der måske ikke er blevet fanget i build-processen. Hvis alt starter, skal du nu kunne gå til ipaddress: serverport for at se dit websted: 123.45.67.8:3232. Hvis din server kører på port 80, er dette en standardport, og du kan bare bruge IP-adressen uden at angive et portnummer: 123.45.67.8

Foto af John Baker på Unsplash

Du har nu en plads på Internettet til at ringe til din egen! Hvis du har købt et domænenavn, du gerne vil bruge i stedet for IP-adressen, kan du følge DigitalOceans instruktioner om, hvordan du konfigurerer denne.

Hold det kørende

Dit websted er live, men når du lukker terminalen, stopper din server. Dette er et problem, så vi vil installere mere software, der fortæller serveren ikke at stoppe, når forbindelsen er afsluttet. Der er nogle muligheder for dette, men lad os bruge Program Manager 2 af hensyn til denne artikel.

Dræb din server, hvis du ikke allerede har gjort det, og kør npm installation -g pm2. Når den er installeret, kan vi bede den om at køre vores server ved hjælp af pm2 start server / index.js

Opdatering af din kode

På et tidspunkt vil du sandsynligvis gerne opdatere dit projekt, men det er heldigvis hurtigt og nemt at uploade ændringer. Når du skubber din kode til Github, skal du ssh ind i din dråbe og cd i dit projektmappe. Da vi oprindeligt klonede fra Github, behøver vi ikke give nogen links denne gang. Du kan trække den nye kode blot ved at køre git pull.

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