Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

React er et populært JavaScript-bibliotek til opbygning af funktionelle brugergrænseflader i dynamiske webapplikationer. Måske har du brugt mange og lange timer på at fejlsøge React-kode i et forsøg på at bygge den næste Instagram eller Airbnb.

Uanset hvad du bygger, er slutmålet altid at fremvise dit arbejde for verden. Det er her hostingplatforme som Netlify kommer til nytte. De tilbyder en række værktøjer, der strømliner implementeringsprocessen.

Følg med for at lære, hvordan du implementerer dine React-applikationer ved hjælp af Netlifys brugervenlige implementeringsværktøjer.

Hvad er Netlify?

Netlify er en cloud-baseret udviklingsplatform med funktioner, der gør hosting og implementering af applikationer på nettet meget nemmere. Kort sagt giver det en række værktøjer og tjenester, der strømliner og forenkler processen, så du kan implementere og hoste en webapplikation på få sekunder.

instagram viewer

Netlifys hovedfunktioner

Netlify har en række funktioner, der forenkler implementeringsprocessen.

  • Det giver vigtige adgangs- og versionskontrolfunktioner for at gøre det muligt for udviklingsteams at samarbejde effektivt om projekter.
  • Det tilbyder sikre hostingtjenester, som du kan justere, så de passer til dine behov. Derudover giver det automatiske sikkerhedskopier i tilfælde af datatab.
  • Det integreres problemfrit med populære cloud-udviklingstjenester såsom GitHub, GitLab og Bitbucket.
  • Det giver funktioner, der gør det nemt at opsætte og konfigurere en brugerdefineret domæne-URL og et SSL-certifikat til din applikation.

Opret en Demo React-applikation

  1. For at komme i gang skal du først oprette en demo React-applikation som du til sidst vil implementere på Netlify. Kør kommandoen nedenfor på din terminal for at oprette en React-applikation: 
    npx create-react-app demo-react-netlify-app
  2. Kør derefter denne terminalkommando for at skrue udviklingsserveren op: 
    npm start
    Gå videre og se resultaterne i din browser på http://localhost: 3000.
  3. Kør endelig denne kommando for at oprette en produktionsklar version af din applikation: 
    npm køre build
    Denne kommando genererer de nødvendige produktionsfiler og aktiver i en ny mappe i rodmappen kaldet build. Byg-mappen fanger en minificeret version af hele applikationen, der indeholder alt det nødvendige for at implementere applikationen.

Implementer React-applikationen på Netlify

Netlify tilbyder tre metoder, som du kan bruge til at implementere din React-applikation. Du kan:

  • Importer dit projekt fra en Git-lagervært som GitHub.
  • Brug træk og slip-funktionen.
  • Brug kommandolinjeværktøjet, Netlifys CLI.

Implementer ved hjælp af GitHub-importfunktion

  1. Start med oprettelse af et lager på GitHub til at huse dine React-applikationsprojektfiler. Alternativt kan du også hoste dine projektfiler på enhver anden understøttet Git-udbyder såsom GitLab, Bitbucket eller Azure DevOps.
  2. Tilmeld dig derefter en konto på Netlify. Når du har tilmeldt dig, skal du navigere til dit kontokontrolpanel og vælge Websteder fanen.
  3. Klik på Importer fra Git knap.
  4. Vælg din foretrukne Git-udbyderplatform. Netlify vil bede dig om at autentificere med din Git-udbyder for at give den adgang til din konto og lagre.
  5. Når du har gjort dette, viser Netlify en liste over repositories på din Git-udbyder. Vælg det React-projektlager, du oprindeligt sendte til din Git-udbyder.
  6. Når du har valgt lageret, skal du angive, hvordan Netlify skal håndtere implementeringsprocessen. Normalt, for statiske websteder, behøver du ikke at foretage nogen ændringer, men for dynamiske websteder såsom React-applikationer, skal du indstille build-indstillingerne. Heldigvis registrerer Netlify som standard automatisk den ramme, der bruges til at bygge applikationen, og udfylder felterne med de nødvendige byggeindstillinger.
  7. Klik til sidst Implementer websted for at afslutte processen.

Klik på den angivne URL for at se applikationen i din browser. Hvis du har en brugerdefineret domæne-URL, kan du instruere Netlify om at bruge den med dit websted ved at opdatere URL'en fra webstedets indstillinger.

Implementer ved hjælp af træk og slip-funktionen

Dette er den enkleste metode til at implementere din React-applikation på Netlify. Du behøver kun at trække og slippe build-mappen i Netlifys træk-og-slip brugergrænseflade.

  1. På Netlifys dashboard skal du vælge websted fanen. Klik derefter på Tilføj nyt websted og vælg derefter Implementer manuelt fra valgmulighederne i rullemenuen.
  2. På træk-og-slip-funktionssiden skal du vælge mappen, der indeholder React-byggefilerne, og slippe den i denne brugergrænseflade. Projektet vil øjeblikkeligt implementeres på Netlify. Alternativt kan du klikke på Gennemse for at uploade for at vælge din build-mappe fra filsystemet.

Implementer ved hjælp af Netlifys kommandolinjegrænseflade

Ved at bruge Netlifys kommandolinjegrænseflade (CLI) kan du implementere din React-applikation direkte fra en terminal. Derudover giver Netlifys CLI dig mulighed for at konfigurere kontinuerlig implementering, så når du forpligter og skubber nye opdateringer til dit Git-lager, bliver de automatisk implementeret.

  1. Kør kommandoen nedenfor på din terminal for at installere Netlifys CLI: 
    npm installere netify-cli -g
  2. Kør nu kommandoen nedenfor for at implementere din applikation. Sørg for, at du er i projektets arbejdsmappe, før du implementerer. 
    netify-implementering
    Netlifys CLI vil bede dig om at tillade den at foretage ændringer på din konto. Når du har givet tilladelsen, skal du angive navnet på den teamkonto, du gav ved tilmelding, vælg derefter, om du vil linke appens bibliotek til en eksisterende hjemmeside eller oprette og konfigurere en ny en. Afslut ved at angive et brugerdefineret webstedsnavn og dit byggemappenavn.
  3. CLI'en vil implementere et udkast til din applikation. Tjek at alt fungerer som forventet.
  4. Kør endelig kommandoen nedenfor for at implementere din applikation til produktion. 
    netify-implementering --prod

Sammenligning af de tre implementeringsmetoder

GitHub-importmetoden er den mest effektive til at implementere produktionsapps, da den giver dig mulighed for at linke dit Git-lager direkte til Netlify og hold din kode synkroniseret med deres live-websted eller -applikation. Når du forpligter og pusher ændringer til dit Git-lager, vil Netlify automatisk opdatere hjemmesiden.

Træk-og-slip-metoden er enklere til implementering af statiske websteder, da den ikke kræver nogen kodning eller opsætning. Det tillader dog ikke automatiske opdateringer, når du foretager ændringer i dit lager.

CLI-metoden er den mest omfattende, da den giver dig fuld kontrol over implementeringsprocessen og giver mulighed for brugerdefinerede konfigurationer. Denne metode er bedst egnet, hvis du allerede har en stærk forståelse af Netlify og er fortrolig med at arbejde med kommandolinjen.

Alle tre metoder er nyttige til at implementere apps til Netlify. I sidste ende vil valget af, hvad der skal bruges, afhænge af behovene for hvert enkelt projekt.

Brug af Netlify til at implementere andre applikationer

Netlify er et kraftfuldt og alsidigt værktøj, som du kan bruge til at implementere andre programmer end React. Du kan bruge det til at implementere og hoste statiske websteder og dynamiske applikationer bygget med forskellige rammer som Angular.

Den brugervenlige grænseflade gør det nemt at konfigurere, administrere og implementere dine API'er.