Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A React egy népszerű JavaScript-könyvtár funkcionális felhasználói felületek létrehozására dinamikus webes alkalmazásokban. Lehet, hogy sok hosszú órát töltöttél a React kód hibakeresésével a következő Instagram vagy Airbnb létrehozása érdekében.

Függetlenül attól, hogy mit épít, a végső cél mindig az, hogy bemutassa munkáját a világnak. Itt jönnek jól az olyan hosting platformok, mint a Netlify. Olyan eszközöket biztosítanak, amelyek leegyszerűsítik a telepítési folyamatot.

Kövesse a lépést, hogy megtudja, hogyan telepítheti React alkalmazásait a Netlify könnyen használható telepítési eszközeivel.

Mi az a Netlify?

A Netlify egy felhőalapú fejlesztői platform, amelynek funkciói nagyban megkönnyítik az alkalmazások webes tárolását és telepítését. Egyszerűen fogalmazva, számos eszközt és szolgáltatást kínál, amelyek leegyszerűsítik és leegyszerűsítik a folyamatot, lehetővé téve a webalkalmazások másodpercek alatti üzembe helyezését és üzemeltetését.

instagram viewer

A Netlify főbb funkciói

A Netlify számos olyan funkcióval rendelkezik, amelyek leegyszerűsítik a telepítési folyamatot.

  • Alapvető hozzáférési és verziókezelési funkciókat biztosít, amelyek lehetővé teszik a fejlesztőcsapatok számára, hogy hatékonyan és eredményesen működjenek együtt a projekteken.
  • Biztonságos hosting szolgáltatásokat kínál, amelyeket igényeinek megfelelően állíthat be. Ezenkívül automatikus biztonsági mentést biztosít adatvesztés esetén.
  • Zökkenőmentesen integrálható olyan népszerű felhőfejlesztő szolgáltatásokkal, mint a GitHub, a GitLab és a Bitbucket.
  • Olyan funkciókat kínál, amelyek megkönnyítik az egyéni tartomány URL-címének és SSL-tanúsítványának beállítását és konfigurálását az alkalmazáshoz.

Hozzon létre egy Demo React alkalmazást

  1. Az induláshoz először meg kell tennie hozzon létre egy demó React alkalmazást amelyet végül telepíteni fog a Netlify-on. Futtassa az alábbi parancsot a terminálon egy React alkalmazás létrehozásához: 
    npx create-react-app demo-react-netlify-app
  2. Ezután futtassa ezt a terminálparancsot a fejlesztői kiszolgáló felpörgetéséhez: 
    npm start
    Tekintse meg az eredményeket böngészőjében a következő címen: http://localhost: 3000.
  3. Végül futtassa ezt a parancsot az alkalmazás élesre kész verziójának létrehozásához: 
    npm run build
    Ez a parancs létrehozza a szükséges éles fájlokat és eszközöket egy új mappában a build nevű gyökérkönyvtárban. A build mappa a teljes alkalmazás kicsinyített verzióját rögzíti, amely mindent tartalmaz, ami az alkalmazás üzembe helyezéséhez szükséges.

Telepítse a React alkalmazást a Netlify-on

A Netlify három módszert kínál a React alkalmazás üzembe helyezéséhez. Tudsz:

  • Importálja projektjét egy Git-tárhelyről, például a GitHubról.
  • Használja a Drag and Drop funkciót.
  • Használja a parancssori eszközt, a Netlify CLI-jét.

Telepítse a GitHub importálási funkciójával

  1. Kezdje ezzel tároló létrehozása a GitHubon a React alkalmazásprojekt fájljainak tárolására. Alternatív megoldásként a projektfájlokat bármely más támogatott Git-szolgáltatón, például a GitLabon, a Bitbucket-en vagy az Azure DevOps-on is tárolhatja.
  2. Ezután regisztráljon egy fiókot a webhelyen Netlify. A regisztráció után lépjen a fiókja irányítópultjára, és válassza ki a Webhelyek lapon.
  3. Kattintson a Importálás a Gitből gomb.
  4. Válassza ki a preferált Git szolgáltatói platformot. A Netlify felkéri Önt, hogy hitelesítsen Git-szolgáltatót, hogy hozzáférést biztosítson fiókjához és adattáraihoz.
  5. Miután ezt megtette, a Netlify megjeleníti a Git-szolgáltató adattárainak listáját. Válassza ki azt a React projekt tárházat, amelyet eredetileg a Git-szolgáltatóhoz továbbított.
  6. A tárhely kiválasztása után meg kell adnia, hogy a Netlify hogyan kezelje a telepítési folyamatot. A statikus webhelyeken általában nem kell változtatásokat végrehajtania, azonban a dinamikus webhelyeknél, például a React alkalmazásoknál, meg kell adnia az összeállítási beállításokat. Szerencsére a Netlify alapértelmezés szerint automatikusan felismeri az alkalmazás felépítéséhez használt keretrendszert, és kitölti a mezőket a szükséges összeállítási beállításokkal.
  7. Végül kattintson Telepítse a webhelyet hogy befejezze a folyamatot.

Kattintson a megadott URL-re az alkalmazás megtekintéséhez a böngészőben. Ha rendelkezik egyéni domain URL-lel, utasíthatja a Netlify-t, hogy használja azt az Ön webhelyén, ha frissíti az URL-t a webhely beállításaiból.

Telepítse a Drag and Drop funkcióval

Ez a legegyszerűbb módszer a React alkalmazás telepítésére a Netlify-on. Csak át kell húznia a build mappát a Netlify fogd és vidd felhasználói felületére.

  1. A Netlify irányítópultján válassza ki a Webhely lapon. Ezután kattintson a gombra Új webhely hozzáadása majd válassza ki Kézi telepítés a legördülő menü opciói közül.
  2. A fogd és vidd funkció oldalán válassza ki a React build fájlokat tartalmazó mappát, és dobja be erre a felhasználói felületre. A projekt azonnal megjelenik a Netlify-on. Alternatív megoldásként rákattinthat Böngésszen a feltöltéshez hogy válassza ki a build mappát a fájlrendszerből.

Telepítés a Netlify parancssori felületével

A Netlify parancssori felületének (CLI) segítségével közvetlenül egy terminálról telepítheti a React alkalmazást. Ezenkívül a Netlify parancssori felülete lehetővé teszi a folyamatos üzembe helyezés konfigurálását, így amikor véglegesít, és új frissítéseket küld a Git-tárhelyre, azok automatikusan telepítésre kerülnek.

  1. Futtassa az alábbi parancsot a terminálján a Netlify CLI-jének telepítéséhez: 
    npm telepítés netlify-cli -g
  2. Most futtassa az alábbi parancsot az alkalmazás üzembe helyezéséhez. Üzembe helyezés előtt győződjön meg arról, hogy a projekt munkakönyvtárában van. 
    netlify telepíteni
    A Netlify CLI-je felkéri, hogy engedélyezze, hogy módosítsa a fiókját. Az engedély megadása után adja meg a regisztrációkor megadott csapatfiók nevét, majd válassza ki, hogy az alkalmazás könyvtárát egy meglévő webhelyhez szeretné-e kapcsolni, vagy újat hoz létre és konfigurál egy. Fejezze be egy egyéni webhelynév és a buildmappa nevének megadásával.
  3. A CLI telepíti az alkalmazás vázlatos verzióját. Ellenőrizze, hogy minden a várt módon működik-e.
  4. Végül futtassa az alábbi parancsot az alkalmazás éles üzembe helyezéséhez. 
    netlify telepíteni -- prod

A három telepítési módszer összehasonlítása

A GitHub importálási módszere a leghatékonyabb az éles alkalmazások üzembe helyezéséhez, mivel lehetővé teszi az összekapcsolást a Git-táradat közvetlenül a Netlify-hoz, és tartsa szinkronban kódját az élő webhelyükkel vagy alkalmazásukkal. Amikor elfogadja és módosítja a Git-tárházat, a Netlify automatikusan frissíti a webhelyet.

A drag and drop módszer egyszerűbb statikus helyek telepítéséhez, mivel nem igényel kódolást vagy beállítást. Azonban nem teszi lehetővé az automatikus frissítést, amikor módosítja a tárat.

A CLI módszer a legátfogóbb, mivel teljes ellenőrzést biztosít a telepítési folyamat felett, és lehetővé teszi az egyéni konfigurációkat. Ez a módszer akkor a legalkalmasabb, ha már alaposan ismeri a Netlify-t, és kényelmesen dolgozik a parancssorral.

Mindhárom módszer hasznos az alkalmazások Netlify rendszerbe történő telepítéséhez. Végső soron a felhasználási mód kiválasztása az egyes projektek igényeitől függ.

A Netlify használata más alkalmazások telepítéséhez

A Netlify egy hatékony és sokoldalú eszköz, amellyel más, csak React alkalmazásokat is telepíthet. Használhatja statikus webhelyek és dinamikus alkalmazások üzembe helyezésére és tárolására, amelyek különböző keretrendszerekkel, például az Angularral készültek.

A felhasználóbarát felület megkönnyíti az API-k konfigurálását, kezelését és üzembe helyezését.