Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

React on populaarne JavaScripti teek funktsionaalsete kasutajaliideste loomiseks dünaamilistes veebirakendustes. Võib-olla olete kulutanud palju pikki tunde Reacti koodi silumisele, et luua järgmine Instagram või Airbnb.

Sõltumata sellest, mida te ehitate, on lõppeesmärk alati oma tööd maailmale tutvustada. Siin tulevad kasuks sellised hostimisplatvormid nagu Netlify. Need pakuvad tööriistakomplekti, mis lihtsustab juurutamisprotsessi.

Järgige teksti, et õppida, kuidas Netlify hõlpsasti kasutatavaid juurutustööriistu kasutades oma Reacti rakendusi juurutada.

Mis on Netlify?

Netlify on pilvepõhine arendusplatvorm, mille funktsioonid muudavad veebis rakenduste hostimise ja juurutamise palju lihtsamaks. Lihtsamalt öeldes pakub see mitmesuguseid tööriistu ja teenuseid, mis muudavad protsessi sujuvamaks ja lihtsustavad, võimaldades teil mõne sekundi jooksul veebirakenduse juurutada ja hostida.

instagram viewer

Netlify põhifunktsioonid

Netlifyl on mitmeid funktsioone, mis lihtsustavad juurutamisprotsessi.

  • See pakub olulisi juurdepääsu- ja versioonihaldusfunktsioone, mis võimaldavad arendusmeeskondadel projektide kallal tõhusalt ja tulemuslikult koostööd teha.
  • See pakub turvalisi hostimisteenuseid, mida saate oma vajadustele vastavaks kohandada. Lisaks pakub see andmete kadumise korral automaatseid varukoopiaid.
  • See integreerub sujuvalt populaarsete pilvearendusteenustega, nagu GitHub, GitLab ja Bitbucket.
  • See pakub funktsioone, mis muudavad teie rakenduse jaoks kohandatud domeeni URL-i ja SSL-sertifikaadi seadistamise ja konfigureerimise lihtsaks.

Looge Demo React rakendus

  1. Alustamiseks peate esmalt tegema looge demorakendus React mille lõpuks Netlifysse juurutate. Reacti rakenduse loomiseks käivitage oma terminalis allolev käsk: 
    npx create-react-app demo-react-netlify-app
  2. Järgmisena käivitage arendusserveri käivitamiseks see terminalikäsk: 
    npm start
    Jätkake ja vaadake tulemusi oma brauseris aadressil http://localhost: 3000.
  3. Lõpuks käivitage see käsk, et luua oma rakendusest tootmisvalmis versioon: 
    npm run build
    See käsk genereerib vajalikud tootmisfailid ja varad juurkataloogi uues kaustas nimega build. Ehitamise kaust jäädvustab kogu rakenduse minimeeritud versiooni, mis sisaldab kõike rakenduse juurutamiseks vajalikku.

Juurutage Netlify'is rakendus React

Netlify pakub kolme meetodit, mida saate oma Reacti rakenduse juurutamiseks kasutada. Sa saad:

  • Importige oma projekt Giti hoidla hostist, näiteks GitHubist.
  • Kasutage pukseerimisfunktsiooni.
  • Kasutage käsurea tööriista Netlify CLI.

Juurutage GitHubi importimise funktsiooni abil

  1. Alusta sellest hoidla loomine GitHubis teie Reacti rakenduse projektifailide majutamiseks. Teise võimalusena saate oma projektifaile majutada ka mis tahes muus toetatud Giti pakkujas, nagu GitLab, Bitbucket või Azure DevOps.
  2. Järgmisena registreerige konto Netlify. Kui olete registreerunud, liikuge oma konto juhtpaneelile ja valige saidid sakk.
  3. Klõpsake nuppu Import Gitist nuppu.
  4. Valige eelistatud Giti pakkuja platvorm. Netlify palub teil oma Giti teenusepakkujaga autentida, et anda talle juurdepääs teie kontole ja hoidlatele.
  5. Kui olete seda teinud, kuvab Netlify teie Giti pakkuja hoidlate loendi. Valige Reacti projekti hoidla, mille algselt oma Giti pakkujale edastasite.
  6. Pärast hoidla valimist peate määrama, kuidas Netlify peaks juurutamisprotsessi käsitlema. Tavaliselt ei pea te staatiliste veebisaitide puhul muudatusi tegema, kuid dünaamiliste veebisaitide (nt Reacti rakendused) puhul peate määrama järgu seaded. Õnneks tuvastab Netlify vaikimisi automaatselt rakenduse koostamiseks kasutatud raamistiku ja täidab väljad vajalike ehitussätetega.
  7. Lõpuks klõpsake Saidi juurutamine protsessi lõpetamiseks.

Rakenduse vaatamiseks brauseris klõpsake esitatud URL-il. Kui teil on kohandatud domeeni URL, saate anda Netlifyle käsu seda teie saidiga kasutada, värskendades URL-i saidi seadetes.

Rakendage pukseerimisfunktsiooni abil

See on lihtsaim viis oma Reacti rakenduse Netlifys juurutamiseks. Peate vaid lohistama ehituskausta Netlify pukseerimisliidese.

  1. Valige Netlify armatuurlaual Sait sakk. Järgmisena klõpsake nuppu Lisa uus sait ja seejärel valige Käivitage käsitsi rippmenüü valikutest.
  2. Valige pukseerimisfunktsioonide lehel kaust, mis sisaldab Reacti ehitusfaile, ja pukseerige see sellesse kasutajaliidese. Projekt juurutatakse koheselt Netlifys. Teise võimalusena võite klõpsata Sirvige üleslaadimiseks et valida failisüsteemist oma ehituse kaust.

Kasutage Netlify käsurea liidest

Netlify käsurea liidest (CLI) kasutades saate oma Reacti rakenduse juurutada otse terminalist. Lisaks võimaldab Netlify CLI teil konfigureerida pidevat juurutamist, nii et kui kinnitate ja edastate oma Giti hoidlasse uusi värskendusi, juurutatakse need automaatselt.

  1. Käivitage oma terminalis allolev käsk, et installida Netlify CLI: 
    npm installida netlify-cli -g
  2. Nüüd käivitage oma rakenduse juurutamiseks allolev käsk. Enne juurutamist veenduge, et olete projekti töökataloogis. 
    netlify juurutada
    Netlify CLI palub teil lubada oma kontol muudatusi teha. Pärast loa andmist sisestage registreerumisel antud meeskonnakonto nimi, seejärel valige, kas linkida rakenduse kataloog olemasoleva veebisaidiga või luua ja konfigureerida uus üks. Lõpetage, sisestades kohandatud veebisaidi nime ja oma järgu kausta nime.
  3. CLI juurutab teie rakenduse mustandversiooni. Kontrollige, kas kõik toimib ootuspäraselt.
  4. Lõpuks käivitage allolev käsk, et juurutada oma rakendus tootmisse. 
    netlify juurutada --toode

Kolme kasutuselevõtumeetodi võrdlemine

GitHubi importimismeetod on tootmisrakenduste juurutamiseks kõige tõhusam, kuna see võimaldab teil linkida teie Giti hoidla otse Netlifysse ja hoidke oma koodi sünkroonis nende reaalajas veebisaidi või rakendusega. Kui teete oma Giti hoidlas muudatusi ja edastate selle, värskendab Netlify veebisaiti automaatselt.

Pukseerimismeetod on staatiliste saitide juurutamiseks lihtsam, kuna see ei nõua kodeerimist ega seadistamist. Kuid see ei võimalda hoidlas muudatuste tegemisel automaatseid värskendusi.

CLI-meetod on kõige põhjalikum, kuna see annab teile täieliku kontrolli juurutusprotsessi üle ja võimaldab kohandatud konfiguratsioone. See meetod sobib kõige paremini, kui tunnete Netlifyt juba hästi ja tunnete käsurealt hästi.

Kõik kolm meetodit on kasulikud rakenduste juurutamiseks Netlifysse. Lõppkokkuvõttes sõltub valik, millist kasutada, iga üksiku projekti vajadustest.

Netlify kasutamine muude rakenduste juurutamiseks

Netlify on võimas ja mitmekülgne tööriist, mida saate kasutada muude rakenduste juurutamiseks, mis lihtsalt React. Saate seda kasutada staatiliste veebisaitide ja dünaamiliste rakenduste juurutamiseks ja hostimiseks, mis on loodud erinevate raamistikega, nagu Angular.

Kasutajasõbralik liides muudab API-de konfigureerimise, haldamise ja juurutamise lihtsaks.