Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

„React“ yra populiari „JavaScript“ biblioteka, skirta funkcinėms vartotojo sąsajoms kurti dinaminėse žiniatinklio programose. Galbūt praleidote daug valandų, derindami „React“ kodą, bandydami sukurti kitą „Instagram“ ar „Airbnb“.

Nepriklausomai nuo to, ką kuriate, galutinis tikslas visada yra parodyti savo darbą pasauliui. Čia praverčia prieglobos platformos, tokios kaip „Netlify“. Jie pateikia įrankių rinkinį, kuris supaprastina diegimo procesą.

Sekite toliau ir sužinokite, kaip įdiegti „React“ programas naudojant paprastus „Netlify“ diegimo įrankius.

Kas yra Netlify?

„Netlify“ yra debesies pagrindu sukurta kūrimo platforma su funkcijomis, kurios labai palengvina programų prieglobą ir diegimą žiniatinklyje. Paprasčiau tariant, jame yra daugybė įrankių ir paslaugų, kurios supaprastina ir supaprastina procesą, leidžiantį per kelias sekundes įdiegti ir priglobti žiniatinklio programą.

instagram viewer

Pagrindinės „Netlify“ funkcijos

„Netlify“ turi daugybę funkcijų, kurios supaprastina diegimo procesą.

  • Tai suteikia esmines prieigos ir versijų valdymo funkcijas, leidžiančias kūrėjų komandoms efektyviai ir efektyviai bendradarbiauti įgyvendinant projektus.
  • Jis siūlo saugias prieglobos paslaugas, kurias galite pritaikyti pagal savo poreikius. Be to, ji teikia automatines atsargines kopijas duomenų praradimo atveju.
  • Jis sklandžiai integruojamas su populiariomis debesų kūrimo paslaugomis, tokiomis kaip „GitHub“, „GitLab“ ir „Bitbucket“.
  • Jame yra funkcijų, kurios leidžia lengvai nustatyti ir konfigūruoti pasirinktinį domeno URL ir SSL sertifikatą jūsų programai.

Sukurkite demonstracinę reagavimo programą

  1. Norėdami pradėti, pirmiausia turėsite sukurti demonstracinę React programą kurį galiausiai įdiegsite „Netlify“. Paleiskite toliau pateiktą komandą savo terminale, kad sukurtumėte „React“ programą: 
    npx create-react-app demo-react-netlify-app
  2. Tada paleiskite šią terminalo komandą, kad sukurtumėte kūrimo serverį: 
    npm pradžia
    Eikite į priekį ir peržiūrėkite rezultatus savo naršyklėje adresu http://localhost: 3000.
  3. Galiausiai paleiskite šią komandą, kad sukurtumėte gamybai paruoštą programos versiją: 
    npm paleisti statyti
    Ši komanda sugeneruoja reikiamus gamybos failus ir išteklius naujame šakninio katalogo aplanke, vadinamame build. Sukūrimo aplankas užfiksuoja sumažintą visos programos versiją, kurioje yra viskas, ko reikia programai įdiegti.

Įdiekite „React“ programą „Netlify“.

„Netlify“ pateikia tris metodus, kuriuos galite naudoti norėdami įdiegti „React“ programą. Tu gali:

  • Importuokite projektą iš „Git“ saugyklos pagrindinio kompiuterio, pvz., „GitHub“.
  • Naudokite „Drag and Drop“ funkciją.
  • Naudokite komandinės eilutės įrankį „Netlify“ CLI.

Įdiekite naudodami „GitHub“ importavimo funkciją

  1. Pradėkite nuo sukurti saugyklą „GitHub“. kad būtų saugomi jūsų „React“ programos projekto failai. Arba taip pat galite priglobti savo projekto failus bet kuriame kitame palaikomame „Git“ teikėje, pvz., „GitLab“, „Bitbucket“ arba „Azure DevOps“.
  2. Tada prisiregistruokite gauti paskyrą Netlify. Kai prisiregistruosite, eikite į savo paskyros informacijos suvestinę ir pasirinkite Svetainės skirtuką.
  3. Spustelėkite ant Importuoti iš Git mygtuką.
  4. Pasirinkite pageidaujamą Git teikėjo platformą. „Netlify“ paragins jus autentifikuoti „Git“ teikėją, kad suteiktų jam prieigą prie jūsų paskyros ir saugyklų.
  5. Kai tai padarysite, „Netlify“ parodys „Git“ teikėjo saugyklų sąrašą. Pasirinkite „React“ projekto saugyklą, kurią iš pradžių persiuntėte „Git“ teikėjui.
  6. Pasirinkę saugyklą, turite nurodyti, kaip „Netlify“ turėtų tvarkyti diegimo procesą. Paprastai statinėse svetainėse jums nereikia atlikti jokių pakeitimų, tačiau dinamiškose svetainėse, pvz., „React“ programose, turėsite nustatyti kūrimo nustatymus. Laimei, Netlify pagal numatytuosius nustatymus automatiškai aptinka sistemą, naudojamą kuriant programą, ir užpildo laukus reikiamais kūrimo parametrais.
  7. Galiausiai spustelėkite Įdiegti svetainę užbaigti procesą.

Spustelėkite pateiktą URL, kad peržiūrėtumėte programą savo naršyklėje. Jei turite tinkintą domeno URL, galite nurodyti „Netlify“ naudoti jį jūsų svetainėje, atnaujindami URL iš svetainės nustatymų.

Įdiekite naudodami vilkimo ir numetimo funkciją

Tai paprasčiausias būdas įdiegti „React“ programą „Netlify“. Jums tereikia nuvilkti kūrimo aplanką į „Netlify“ nuvilkimo vartotojo sąsają.

  1. Netlify prietaisų skydelyje pasirinkite Svetainė skirtuką. Toliau spustelėkite Pridėti naują svetainę ir tada pasirinkite Įdiegti rankiniu būdu iš išskleidžiamojo meniu parinkčių.
  2. Nuvilkimo funkcijos puslapyje pasirinkite aplanką, kuriame yra „React“ kūrimo failai, ir įmeskite jį į šią vartotojo sąsają. Projektas bus nedelsiant įdiegtas „Netlify“. Arba galite spustelėti Naršykite, kad įkeltumėte kad pasirinktumėte savo kūrimo aplanką iš failų sistemos.

Įdiekite naudodami „Netlify“ komandų eilutės sąsają

Naudodami „Netlify“ komandų eilutės sąsają (CLI), galite įdiegti „React“ programą tiesiai iš terminalo. Be to, „Netlify“ CLI leidžia konfigūruoti nuolatinį diegimą, kad kai įpareigojate ir siunčiate naujus „Git“ saugyklos naujinimus, jie būtų automatiškai įdiegti.

  1. Paleiskite toliau pateiktą komandą savo terminale, kad įdiegtumėte „Netlify“ CLI: 
    npm diegti netlify-cli -g
  2. Dabar paleiskite toliau pateiktą komandą, kad įdiegtumėte programą. Prieš diegdami įsitikinkite, kad esate projekto darbo kataloge. 
    netlify dislokuoti
    „Netlify“ CLI paragins jus leisti atlikti paskyros pakeitimus. Suteikę leidimą, nurodykite komandos paskyros pavadinimą, kurią nurodėte prisiregistruodami, tada pasirinkite, ar susieti programos katalogą su esama svetaine, ar sukurti ir konfigūruoti naują vienas. Užbaikite nurodydami tinkintą svetainės pavadinimą ir kūrimo aplanko pavadinimą.
  3. CLI įdiegs jūsų programos juodraščio versiją. Patikrinkite, ar viskas veikia taip, kaip tikėtasi.
  4. Galiausiai paleiskite toliau pateiktą komandą, kad įdiegtumėte programą gamybinėje versijoje. 
    netlify dislokuoti --prod

Trijų diegimo metodų palyginimas

„GitHub“ importavimo metodas yra efektyviausias diegiant gamybines programas, nes jis leidžia susieti savo Git saugyklą tiesiai į Netlify ir sinchronizuokite savo kodą su jų tiesiogine svetaine ar programa. Kai įpareigosite ir pateiksite pakeitimus savo „Git“ saugykloje, „Netlify“ automatiškai atnaujins svetainę.

Nuvilkimo metodas yra paprastesnis diegiant statines svetaines, nes nereikia koduoti ar nustatyti. Tačiau ji neleidžia automatiškai atnaujinti, kai atliekate saugyklos pakeitimus.

CLI metodas yra pats išsamiausias, nes jis suteikia jums visišką diegimo proceso kontrolę ir leidžia atlikti pasirinktines konfigūracijas. Šis metodas geriausiai tinka, jei jau gerai išmanote „Netlify“ ir jums patogu dirbti su komandine eilute.

Visi trys metodai yra naudingi diegiant programas „Netlify“. Galiausiai pasirinkimas, kurį naudoti, priklausys nuo kiekvieno atskiro projekto poreikių.

„Netlify“ naudojimas kitoms programoms diegti

„Netlify“ yra galingas ir universalus įrankis, kurį galite naudoti diegdami kitas programas, kurios tik „React“. Jį galite naudoti statinėms svetainėms ir dinaminėms programoms, sukurtoms naudojant skirtingas sistemas, pvz., „Angular“, diegti ir priglobti.

Patogi sąsaja leidžia lengvai konfigūruoti, valdyti ir įdiegti API.