Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

React är ett populärt JavaScript-bibliotek för att bygga funktionella användargränssnitt i dynamiska webbapplikationer. Kanske har du spenderat många långa timmar på att felsöka React-kod i ett försök att bygga nästa Instagram eller Airbnb.

Oavsett vad du bygger är slutmålet alltid att visa upp ditt arbete för världen. Det är här värdplattformar som Netlify kommer väl till pass. De tillhandahåller en uppsättning verktyg som effektiviserar distributionsprocessen.

Följ med för att lära dig hur du distribuerar dina React-applikationer med Netlifys lättanvända implementeringsverktyg.

Vad är Netlify?

Netlify är en molnbaserad utvecklingsplattform med funktioner som gör det mycket enklare att hosta och distribuera applikationer på webben. Enkelt uttryckt tillhandahåller den en rad verktyg och tjänster som effektiviserar och förenklar processen så att du kan distribuera och vara värd för en webbapplikation inom några sekunder.

instagram viewer

Netlifys huvudfunktioner

Netlify har en rad funktioner som förenklar implementeringsprocessen.

  • Den tillhandahåller viktiga åtkomst- och versionskontrollfunktioner för att göra det möjligt för utvecklingsteam att samarbeta effektivt i projekt.
  • Det erbjuder säkra värdtjänster som du kan anpassa för att passa dina behov. Dessutom tillhandahåller den automatiska säkerhetskopior i händelse av dataförlust.
  • Den integreras sömlöst med populära molnutvecklingstjänster som GitHub, GitLab och Bitbucket.
  • Den tillhandahåller funktioner som gör det enkelt att konfigurera och konfigurera en anpassad domän-URL och ett SSL-certifikat för din applikation.

Skapa en Demo React-applikation

  1. För att komma igång måste du först skapa en demo React-applikation som du så småningom kommer att distribuera på Netlify. Kör kommandot nedan på din terminal för att skapa en React-applikation: 
    npx create-react-app demo-react-netlify-app
  2. Kör sedan det här terminalkommandot för att snurra upp utvecklingsservern: 
    npm start
    Gå vidare och se resultaten i din webbläsare på http://localhost: 3000.
  3. Slutligen, kör det här kommandot för att skapa en produktionsklar version av din applikation: 
    npm kör bygg
    Detta kommando genererar de nödvändiga produktionsfilerna och tillgångarna i en ny mapp i rotkatalogen som heter build. Byggmappen fångar en minifierad version av hela applikationen, som innehåller allt som krävs för att distribuera applikationen.

Distribuera React-applikationen på Netlify

Netlify tillhandahåller tre metoder som du kan använda för att distribuera din React-applikation. Du kan:

  • Importera ditt projekt från en Git-repository-värd som GitHub.
  • Använd funktionen Dra och släpp.
  • Använd kommandoradsverktyget, Netlifys CLI.

Implementera med hjälp av GitHub-importfunktionen

  1. Börja med skapa ett arkiv på GitHub för att hysa dina React-applikationsprojektfiler. Alternativt kan du också vara värd för dina projektfiler på någon annan Git-leverantör som stöds som GitLab, Bitbucket eller Azure DevOps.
  2. Därefter, registrera dig för ett konto på Netlify. När du har registrerat dig, navigera till instrumentpanelen för ditt konto och välj Webbplatser flik.
  3. Klicka på Importera från Git knapp.
  4. Välj din Preferred Git-leverantörsplattform. Netlify kommer att uppmana dig att autentisera med din Git-leverantör för att ge den åtkomst till ditt konto och arkiv.
  5. När du har gjort detta kommer Netlify att visa en lista över arkiv på din Git-leverantör. Välj React-projektförrådet som du först skickade till din Git-leverantör.
  6. Efter att ha valt förvaret måste du ange hur Netlify ska hantera distributionsprocessen. Vanligtvis, för statiska webbplatser, behöver du inte göra några ändringar, men för dynamiska webbplatser som React-applikationer måste du ställa in bygginställningarna. Lyckligtvis upptäcker Netlify som standard automatiskt ramverket som används för att bygga applikationen och fyller i fälten med de nödvändiga bygginställningarna.
  7. Klicka slutligen Implementera webbplats för att avsluta processen.

Klicka på den angivna webbadressen för att se programmet i din webbläsare. Om du har en anpassad domän-URL kan du instruera Netlify att använda den med din webbplats genom att uppdatera webbadressen från webbplatsens inställningar.

Distribuera med hjälp av dra och släpp-funktionen

Detta är den enklaste metoden för att distribuera din React-applikation på Netlify. Du behöver bara dra och släppa byggmappen i Netlifys dra-och-släpp-användargränssnitt.

  1. På Netlifys instrumentpanel väljer du Webbplats flik. Klicka sedan på Lägg till ny webbplats och välj sedan Distribuera manuellt från alternativen i rullgardinsmenyn.
  2. På dra-och-släpp-funktionssidan, välj mappen som innehåller React-byggfilerna och släpp den i det här användargränssnittet. Projektet kommer omedelbart att distribueras på Netlify. Alternativt kan du klicka på Bläddra för att ladda upp för att välja din byggmapp från filsystemet.

Implementera med hjälp av Netlifys kommandoradsgränssnitt

Med hjälp av Netlifys kommandoradsgränssnitt (CLI) kan du distribuera din React-applikation direkt från en terminal. Dessutom tillåter Netlifys CLI att du kan konfigurera kontinuerlig driftsättning så att när du genomför och skickar nya uppdateringar till ditt Git-förråd, distribueras de automatiskt.

  1. Kör kommandot nedan på din terminal för att installera Netlifys CLI: 
    npm Installera netify-cli -g
  2. Kör nu kommandot nedan för att distribuera din applikation. Se till att du är i projektets arbetskatalog innan du distribuerar. 
    netify distribuera
    Netlifys CLI kommer att uppmana dig att tillåta den att göra ändringar i ditt konto. När du har beviljat tillståndet, ange namnet på teamkontot som du gav när du registrerade dig, välj sedan om du vill länka appens katalog till en befintlig webbplats eller skapa och konfigurera en ny ett. Avsluta med att ange ett anpassat webbplatsnamn och ditt byggmappnamn.
  3. CLI kommer att distribuera en utkastversion av din applikation. Kontrollera att allt fungerar som förväntat.
  4. Slutligen, kör kommandot nedan för att distribuera din applikation till produktion. 
    netify distribuera --driva

Jämför de tre distributionsmetoderna

GitHub-importmetoden är den mest effektiva för att distribuera produktionsappar eftersom den gör att du kan länka ditt Git-förråd direkt till Netlify och håll din kod synkroniserad med deras livewebbplats eller applikation. När du begår och driver ändringar i ditt Git-förråd kommer Netlify automatiskt att uppdatera webbplatsen.

Dra-och-släpp-metoden är enklare för att distribuera statiska webbplatser, eftersom den inte kräver någon kodning eller installation. Det tillåter dock inte automatiska uppdateringar när du gör ändringar i ditt arkiv.

CLI-metoden är den mest omfattande, eftersom den ger dig full kontroll över distributionsprocessen och tillåter anpassade konfigurationer. Denna metod är bäst lämpad om du redan har en god förståelse för Netlify och är bekväm med att arbeta med kommandoraden.

Alla tre metoderna är användbara för att distribuera appar till Netlify. I slutändan kommer valet av vilken som ska användas att bero på behoven för varje enskilt projekt.

Använda Netlify för att distribuera andra applikationer

Netlify är ett kraftfullt och mångsidigt verktyg som du kan använda för att distribuera andra applikationer som bara React. Du kan använda den för att distribuera och vara värd för statiska webbplatser och dynamiska applikationer byggda med olika ramverk som Angular.

Det användarvänliga gränssnittet gör det enkelt att konfigurera, hantera och distribuera dina API: er.