Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

React je priljubljena knjižnica JavaScript za gradnjo funkcionalnih uporabniških vmesnikov v dinamičnih spletnih aplikacijah. Morda ste porabili veliko ur za odpravljanje napak v kodi React, da bi zgradili naslednji Instagram ali Airbnb.

Ne glede na to, kaj gradite, je končni cilj vedno predstaviti svoje delo svetu. Tu pridejo prav platforme za gostovanje, kot je Netlify. Zagotavljajo nabor orodij, ki poenostavijo postopek uvajanja.

Sledite, če želite izvedeti, kako uvesti svoje aplikacije React z orodji za uvajanje Netlify, ki so preprosta za uporabo.

Kaj je Netlify?

Netlify je razvojna platforma v oblaku s funkcijami, ki močno olajšajo gostovanje in uvajanje aplikacij v spletu. Preprosto povedano, ponuja nabor orodij in storitev, ki racionalizirajo in poenostavijo postopek ter vam omogočajo uvajanje in gostovanje spletne aplikacije v nekaj sekundah.

Glavne funkcije Netlifyja

Netlify ima vrsto funkcij, ki poenostavijo postopek uvajanja.

  • Zagotavlja bistvene funkcije dostopa in nadzora različic, ki razvojnim ekipam omogočajo učinkovito in uspešno sodelovanje pri projektih.
  • Ponuja varne storitve gostovanja, ki jih lahko prilagodite svojim potrebam. Poleg tega zagotavlja samodejno varnostno kopiranje v primeru izgube podatkov.
  • Brezhibno se integrira s priljubljenimi storitvami za razvoj v oblaku, kot so GitHub, GitLab in Bitbucket.
  • Ponuja funkcije, ki olajšajo nastavitev in konfiguracijo URL-ja domene po meri in potrdila SSL za vašo aplikacijo.

Ustvarite aplikacijo Demo React

  1. Če želite začeti, boste morali najprej ustvarite demo aplikacijo React ki jih boste na koncu namestili na Netlify. Zaženite spodnji ukaz na svojem terminalu, da ustvarite aplikacijo React: 
    npx create-react-app demo-react-netlify-app
  2. Nato zaženite ta terminalski ukaz, da zavrtite razvojni strežnik: 
    npm začetek
    Oglejte si rezultate v brskalniku na http://localhost: 3000.
  3. Nazadnje zaženite ta ukaz, da ustvarite produkcijsko pripravljeno različico vaše aplikacije: 
    npm zaženi gradnjo
    Ta ukaz ustvari potrebne produkcijske datoteke in sredstva v novi mapi v korenskem imeniku, imenovanem build. Mapa za gradnjo zajema pomanjšano različico celotne aplikacije, ki vsebuje vse, kar je potrebno za uvedbo aplikacije.

Razmestite aplikacijo React na Netlify

Netlify ponuja tri metode, ki jih lahko uporabite za namestitev vaše aplikacije React. Ti lahko:

  • Uvozite svoj projekt iz gostitelja repozitorija Git, kot je GitHub.
  • Uporabite funkcijo povleci in spusti.
  • Uporabite orodje ukazne vrstice, Netlifyjev CLI.

Razmesti s funkcijo uvoza GitHub

  1. Začni z ustvarjanje repozitorija na GitHubu za shranjevanje projektnih datotek vaše aplikacije React. Druga možnost je, da svoje projektne datoteke gostite pri katerem koli drugem podprtem ponudniku Git, kot je GitLab, Bitbucket ali Azure DevOps.
  2. Nato se prijavite za račun na Netlify. Ko se prijavite, se pomaknite na nadzorno ploščo računa in izberite Spletna mesta zavihek.
  3. Kliknite na Uvoz iz Git gumb.
  4. Izberite prednostno platformo ponudnika Git. Netlify vas bo pozval, da preverite pristnost pri svojem ponudniku Git, da mu omogočite dostop do vašega računa in repozitorijev.
  5. Ko to storite, bo Netlify prikazal seznam repozitorijev pri vašem ponudniku Git. Izberite repozitorij projekta React, ki ste ga prvotno potisnili svojemu ponudniku Git.
  6. Ko izberete repozitorij, morate določiti, kako naj Netlify obravnava postopek uvajanja. Običajno vam za statična spletna mesta ni treba narediti nobenih sprememb, vendar pa boste za dinamična spletna mesta, kot so aplikacije React, morali nastaviti nastavitve gradnje. Na srečo Netlify privzeto samodejno zazna ogrodje, uporabljeno za izdelavo aplikacije, in izpolni polja z zahtevanimi nastavitvami gradnje.
  7. Na koncu kliknite Namestite spletno mesto da končate postopek.

Kliknite navedeni URL, da si ogledate aplikacijo v brskalniku. Če imate URL domene po meri, lahko Netlifyju naročite, naj ga uporabi z vašim spletnim mestom, tako da URL posodobite v nastavitvah spletnega mesta.

Razmestite s funkcijo povleci in spusti

To je najpreprostejša metoda za namestitev vaše aplikacije React na Netlify. Gradbeno mapo morate samo povleči in spustiti v uporabniški vmesnik Netlify za povleci in spusti.

  1. Na nadzorni plošči Netlifyja izberite Spletno mesto zavihek. Nato kliknite na Dodajte novo spletno mesto in nato izberite Namestite ročno iz možnosti spustnega menija.
  2. Na strani s funkcijami povleci in spusti izberite mapo, ki vsebuje datoteke za gradnjo React, in jo spustite v ta uporabniški vmesnik. Projekt bo takoj uveden na Netlify. Lahko pa kliknete na Prebrskajte za nalaganje da izberete svojo gradbeno mapo iz datotečnega sistema.

Razmestite z vmesnikom ukazne vrstice Netlify

Z Netlifyjevim vmesnikom ukazne vrstice (CLI) lahko aplikacijo React namestite neposredno s terminala. Poleg tega vam Netlifyjev CLI omogoča, da konfigurirate neprekinjeno uvajanje, tako da se te samodejno uvedejo, ko potrdite in potisnete nove posodobitve v svoje skladišče Git.

  1. Zaženite spodnji ukaz na vašem terminalu, da namestite Netlifyjev CLI: 
    npm namestite netlify-cli -g
  2. Zdaj zaženite spodnji ukaz, da razmestite svojo aplikacijo. Pred uvedbo se prepričajte, da ste v delovnem imeniku projekta. 
    uvedba netlify
    Netlifyjev CLI vas bo pozval, da mu dovolite spreminjanje vašega računa. Ko podelite dovoljenje, vnesite ime računa ekipe, ki ste ga navedli ob prijavi, nato izberite, ali želite povezati imenik aplikacije z obstoječim spletnim mestom ali ustvariti in konfigurirati novo eno. Končajte tako, da navedete ime spletnega mesta po meri in ime mape za gradnjo.
  3. CLI bo uvedel osnutek vaše aplikacije. Preverite, ali vse deluje po pričakovanjih.
  4. Na koncu zaženite spodnji ukaz, da svojo aplikacijo uvedete v produkcijo. 
    uvedba netlify --prod

Primerjava treh načinov uvajanja

Metoda uvoza GitHub je najučinkovitejša za uvajanje proizvodnih aplikacij, saj vam omogoča povezovanje vaše Git repozitorij neposredno na Netlify in ohranite svojo kodo sinhronizirano z njihovim aktivnim spletnim mestom ali aplikacijo. Ko potrdite in potisnete spremembe v svoje Git repozitorij, bo Netlify samodejno posodobil spletno stran.

Metoda povleci in spusti je preprostejša za uvajanje statičnih spletnih mest, saj ne zahteva kodiranja ali nastavitve. Vendar pa ne omogoča samodejnih posodobitev, ko spremenite svoje skladišče.

Metoda CLI je najobsežnejša, saj vam daje popoln nadzor nad postopkom uvajanja in omogoča konfiguracije po meri. Ta metoda je najprimernejša, če že dobro razumete Netlify in vam je udobno delo z ukazno vrstico.

Vse tri metode so uporabne za uvajanje aplikacij v Netlify. Končno bo izbira, katero uporabiti, odvisna od potreb vsakega posameznega projekta.

Uporaba Netlifyja za uvajanje drugih aplikacij

Netlify je zmogljivo in vsestransko orodje, ki ga lahko uporabite za uvajanje drugih aplikacij, ki so samo React. Uporabite ga lahko za uvajanje in gostovanje statičnih spletnih mest in dinamičnih aplikacij, izdelanih z različnimi okviri, kot je Angular.

Uporabniku prijazen vmesnik olajša konfiguracijo, upravljanje in uvajanje vaših API-jev.