8 ingyenes React alkalmazástárhely szolgáltatás13 min read

Tehát elkészített egy React alkalmazást, de nem tudja, hogyan és hol tárolja. Ebben a cikkben végigvezetjük a 8 ingyenes React tárhelyszolgáltatáson, és bemutatjuk, hogyan telepítettük ezt a React alkalmazást mindegyiket használja, és elmondja, mit tanultunk a folyamat során.

Alkalmazásunkat Figma-ben építettük meg a Anima beépülő modul, amely lehetővé tette számunkra, hogy funkcionalitást, reszponzív viselkedést és multimédiát adjunk hozzá exportálja a fejlesztőready React kódot a teljes felhasználói felületre. Egy napba telt a tervezés és a telepítés.

Hol tárolhatja ingyenesen a React alkalmazást

A komponensalapú keretrendszerek, például a React térnyerésének köszönhetően egyre több szerver nélküli hosting megoldás létezik. Jelenleg az Amazon AWS, a Microsoft Azure és a Google Cloud a domináns platformok. Mindazonáltal egyre nagyobb az elmozdulás a dedikált előtér-tárhelyszolgáltatások irányába, amelyek kevesebb erőfeszítést igényelnek, és pillanatok alatt üzembe helyezhetik Önt – és a legtöbb tartalmaz CI/CD-t. Íme az általunk tesztelt 8 ingyenes React alkalmazástárhely szolgáltatás:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. GitHub oldalak

6. GitLab oldalak

7. Render

8. Túlfeszültség

Vessen egy pillantást ezekre az ingyenes React alkalmazástárolási szolgáltatásokra részletesebben, és mutassuk be, hogyan telepítettük a React alkalmazást mindegyik használatával. 

Netlify

Háttér

A Netlify-t 2014-ben alapították, és kezdettől fogva statikus webhelyek tárolására összpontosított. Sok fejlesztőt vonzott a nagyvonalú ingyenes szintje miatt. Néhány évvel később a Netlify az egyik legnépszerűbb JAMstack és statikus webhely-tárhelyté nőtte ki magát.

Hogyan kell használni

1. Ideális esetben a GitHub használatával regisztrál vagy jelentkezik be. Ez biztosítja, hogy hozzáférjen a profiljában található tárolókhoz, és gyorsan telepítse azokat.
2. Miután bejelentkezett, kattintson az „Új webhely hozzáadása” gombra, és válassza a „Meglévő projekt importálása” lehetőséget.
3. Ezután kattintson a GitHub szolgáltatóra.
4. Válassza ki a „bank-webhelyet” vagy bármi mást, ami a projekt neve.
5. Finomítsa a telepítési beállításokat (webhelyünk esetében az alapértelmezések tökéletesen működnek), majd kattintson a „Webhely telepítése” gombra.
6. A telepítés után megtekintheti egy nyilvános URL-en, amelyet megoszthat a világgal. Jaj!

Íme a Netlify-on telepített élő alkalmazás.

Pro és kontra

A Netlify beállítása és üzembe helyezése egyszerű, arról nem is beszélve, hogy ez az egyik leggyorsabb szolgáltatás, amelyet itt teszteltünk. Az egyik hátránya, hogy ha munkatársakra és/vagy csapatra van szüksége, akkor fizetős csomagra kell váltania.

Vercel

Háttér

A Vercel (eredeti nevén Zeit) 2015-ben alakult, és gyorsan hírnevet szerzett. Ők a Next.js karbantartói, amely egy népszerű React keretrendszer webhelyek készítésére. Ingyenes szintet kínálnak a nem kereskedelmi webhelyekhez, valamint módokat kínálnak Edge-hálózatuk szerver nélküli funkciókhoz.

Hogyan kell használni

1. Jelentkezzen be vagy regisztráljon a GitHub fiókkal.
2. Kattintson az „Új hozzáadása…” legördülő menüre, és válassza a „Projekt” lehetőséget.                                                             
3. Válassza ki a „bank webhelyét” vagy kedvenc React projektjét.
4. A telepítési beállítások alapértelmezett beállításait választottuk, majd rákattintunk a „Bevezetés” gombra.
5. Egy idő után bevezettük a weboldalt.

Íme az élő URL.

Pro és kontra

A Vercel-nek némi időre van szüksége a telepítési folyamat telepítési részének gyorsítótárazásához, de ezt követően ez az egyik leggyorsabb szolgáltatás. Megjeleníti az előzetes telepítéseket minden egyes lenyomott ághoz, és a gyorsítótárazás miatt gyorsan megteszi.

AWS Amplify

Háttér

Az AWS felhőtermékek hatalmas gyűjteménye, és az Amplify-t úgy hirdetik, hogy egyszerű módja annak, hogy néhányat megszerezzen. Az AWS Amplify segítségével gyorsan építhet, szállíthat és tárolhat teljes stack alkalmazásokat AWS-en, és rugalmasan kihasználhatja az AWS-szolgáltatások széles skáláját, ahogy a használati esetek fejlődnek.

Hogyan kell használni

1. Regisztráljon vagy jelentkezzen be az AWS-be, majd keresse meg az AWS Amplify kifejezést, és kattintson a „Kezdés” gombra.
2. Válassza a GitHub lehetőséget, és engedélyezze (csak a „bank-webhely” repo esetében engedélyeztem).
3. Válassza ki a repót a „Nemrég frissített adattárak” részben.
   1. Az összeállítási beállításban módosítanunk kell a baseDirectory hogy alkalmazásunk legyen ker így: Ezután az összeállítási beállításoknak így kell kinézniük:
4. A következő lépésben kattintson a „Mentés és telepítés” gombra.
5. Egy idő után a webhely üzembe kerül, és készen áll a használatra.

És élünk! Íme a URL.

Pro és kontra

Szerkeszteni kell a baseDirectory a telepítési specifikációban – a rendszer nem ismeri fel. A felhasználói felület kissé macerásnak tűnik, de ez személyes preferencia. Hatalmas lehetőségek rejlenek az AWS Amplifyban, mert sok más AWS webszolgáltatás karnyújtásnyira van.

Firebase

Háttér

A Firebase egy Google-szolgáltatás, amely leginkább valós idejű tárolási platformként ismert. De rendelkezik tárhelyszolgáltatással is statikus webhelyekhez és Express.js mikroszolgáltatásokhoz vagy API-ekhez, és támogatja a URL előnézeti verzióját azon fióktelepeken, amelyeken a csapata dolgozik. Akárcsak a Netlify, a Vercel és mások, ez is CDN-hálózaton keresztül szolgálja ki a telepített tartalmat.

Hogyan kell használni

1. Telepítés firebase-eszközök -val npm install -g firebase-tools.
2. Jelentkezzen be a Firebase-be a következővel: firebase bejelentkezés. Miután bejelentkezett, egy ehhez hasonló üzenetet kell látnia:
3. Lépjen be a projektkönyvtárba, és futtassa firebase init, valami ilyesmit kell látnod: Válassza ki a Firebase Hosting fájlok konfigurálását az opcionális GitHub Action telepítésekkel. Ezután létrehozhat egy projektet közvetlenül a parancssori felületről, vagy használhatja a Firebase UI-t, és később csatlakoztathatja. A projektet parancssorból hoztuk létre, és így válaszoltunk a felmerülő kérdésekre:                                                                        Utána jönnek létre az egyszerű j `fi és c.
4. Aztán fuss Firebase telepítése hogy ténylegesen telepítse a fájlokat a kerkönyvtárat. Ha a könyvtár hiányzik, feltétlenül futtassa npm run build először generál fájlokat. A Firebase telepítése parancsnak az alábbi példához hasonló kimenetet kell generálnia:

Most megteheti nézze meg a weboldalt a mellékelt URL-en. Jaj! 

Pro és kontra

A Firebase meglehetősen egyszerű, de amikor beállítja a projekten belül, a megválaszolandó kérdések kissé zavaróak. Szerencsére a fenti részben válaszoltunk rájuk, de a folytatás előtt meg kell érteniük a Firebase tényleges funkcióit. Ettől eltekintve a Firebase gyorsan telepíthető, és létrehozhat egy URL-et, ahol megtekintheti a telepített fájlok előnézetét. Könnyedén automatizálhatja is a GitHub Action telepítésekkel a CLI-vel, ami ügyes.

GitHub oldalak

Háttér

A GitHub Pages már jó ideje létezik, és ez egy egyszerű módja annak, hogy közvetlenül a GitHub-ről tegyen közzé dokumentumokat vagy személyes webhelyeket. Statikus tartalomhoz nagyszerű, és sokan használják egyszerű webhelyek telepítésére minimális befektetéssel. Használata ingyenes, ha a projektje nyilvános, és gyors és olcsó módja a webhely üzemeltetésének.

Hogyan kell használni

Kérjük, vegye figyelembe, hogy szerkesztenie kell a App.jsx ahová hívjuk Router és add hozzá alapnév hogy megfeleljen a repo nevének. Tehát ez hogyan App.jsx nézni kell:                                                                                        Változtatni kell a alapnév mert a GitHub oldalak a webhelyet a `https://GITHUB_USERNAME.gitlab.io/REPO_NAME` formátumú URL-re telepítik. A webhely nem fog megfelelően működni a következőhöz beállított alapnév nélkül react-router-dom.

1. A kód változása után telepítenünk kell gh-oldalak csomag a következővel:
2. És add hozzá a előre telepíteni és a telepíteni forgatókönyvet package.json:
3. Aztán egyszerűen futunk npm run deploy. Ki fog váltani npm run build és használni fogja gh-oldalak tartalmának közzétételére ker a GitHub külön elágazásába gh-oldalak.
4. Végül ellenőrizze, hogy a gh-oldalak az alábbi GitHub oldalakhoz használatos:

Íme az élő URL.

Pro és kontra

Ha olyan projektet telepít, amely eltér a felhasználónevétől, akkor azt a GitHub ingyenes tartományunk egyik alkönyvtárában telepítjük. Ezután extra kódot kell írnia, hogy támogassa az alkönyvtárban való tartózkodás logikáját.

Használati esetünkben nem támogatja a folyamatos üzembe helyezést, de beállítható. A beállítás után gyorsan telepítheti a változtatásokat.

GitLab oldalak

Háttér

A GitHub-hez hasonlóan a GitLab is saját tárhelymegoldással rendelkezik, és GitLab Pages-nek hívják. Meg kell adnom nekik, egyszerűbb beállítani a folyamatos telepítést a GitLab Pagesre, mint a GitHub Pagesre.

Hogyan kell használni

1. Regisztráljon vagy jelentkezzen be a GitLab-ba
2. Adjon hozzá repót a GitLabhoz, ha még nincs ott. Megteheti villát, amit oda tettem 
   A GitHub oldalakhoz hasonlóan szerkesztenie kell a App.jsx ahová hívjuk Router és add hozzá  alapnév hogy megfeleljen a repo nevének. Tehát ez a végső változtatás:                                                               Változtatni kell a alapnév mert a GitLab oldalak a webhelyet a következő űrlap URL-re telepítik: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. A webhely nem fog megfelelően működni a következőhöz beállított alapnév nélkül react-router-dom.
3. Miután szerkesztette és átküldte a projektet a GitLabba, lépjen a Beállítások > Oldalak menüpontra, és egy négylépcsős varázsló fogadja, amellyel telepítheti a repót a GitLab oldalakra. 
4. A varázsló első lépése az összeállítási lemezkép megadása. A Node.js LTS-t fogjuk használni.
5. Ezután beírjuk a pre-build parancsot. A npm ci elég lesz itt.
6. Most következzen az építési lépés. Át kell mennünk — –dist-dir public mert a GitLab Pages elvárja, hogy a webhelyet a nyilvános könyvtárat. Nem tudsz megúszni semmilyen más könyvtárat, sajnálom.
7. Végezze el az újonnan generált .gitlab-ci.yml fájl, amely megmondja a GitLabnak, hogyan telepítse webhelyét.
8. Most lépjen a repo CI/CD -> Pipelines szakaszába, és figyelje meg az újonnan hozzáadott folyamat működését.
9. Egy idő után a folyamat befejeződik, és a webhely üzembe kerül a GitLab oldalakon.

Itt van az eredmény.

Pro és kontra

A csomagok telepítése lassú, és további kódot kell hozzáadnia a működéshez, de a varázsló rendkívül intuitív, mindössze négy lépésből áll a telepítéshez.

Render

Háttér

A Render egy új gyerek a blokkban, amelyet 2019-ben vezetnek be. Megpróbálja megzavarni a szolgáltatásaik (beleértve a statikus webhelyeket) bevezetését. Egyelőre jól teljesítenek, és számuk növekszik.

Hogyan kell használni

1. Regisztráljon vagy jelentkezzen be a Renderbe.
2. Hozzon létre egy új statikus webhelyet az „Új” gomb megnyomásával és a „Statikus webhely” kiválasztásával.
3. Válassza ki a telepíteni kívánt repót.
4. Tartsa meg a fonal; fonal épít build parancs a build beállításban. Sajnos nem működik vele npm ci; npm run build mint a többi szolgáltatás. Módosítsa a „Közzétételi könyvtár” értéket ker és kattintson a „Statikus webhely létrehozása” gombra.
5. Egy idő után a Render telepíti a kódot.

Íme az élő URL a Rendertől.

Pro és kontra

Nagyon gyors, de nem működik jól a projektünkben az `npm ci` és az `npm run build` parancsokkal. Úgy tűnik, csak a „fonal” működik.

Túlfeszültség

Háttér

A túlfeszültség már egy ideje létezik. Őszintén szólva, szolgáltatásuk egyszerűen használható, és mindössze egy vagy két parancsra van szükség a statikus webhely üzembe helyezéséhez. Ingyenes, de havi 30 dolláros fizetős csomagot kínál. A szerszám sztoicizmusa az, amitől ragyog. Nincs szükség bonyolult beállításra, csak telepítse a „surge”-t, és futtassa a „surge”-vel.

Hogyan kell használni

1. A felkészüléshez fuss npm run build belül statikus fájlok létrehozásához ker könyvtárat. A hullámzás ezeket fogja használni a telepítéshez.
2. Fuss npm install –global surrge
3. Aztán fuss hullámzás.

Néhány megjegyzés:
Ha először használja, létre kell hoznia egy fiókot a Surge-nál. Ne aggódj, ez könnyű. Csak adja meg e-mail címét és kívánt jelszavát.

Ezután a rendszer felkéri, hogy adja meg a „projektet”, aminek az elérési útnak kell lennie ker könyvtárat. Csak hozzáfűzheted ker a megadott útvonalra, ha túlfeszültséget futott a telepített repóban.

Ezután adja meg webhelye jövőbeli URL-jét. Próbálj ki valami egyedit, mert mit hullámzás a felajánlott nekem nem vált be.

A URL bemenet után a hullámzás innen telepíti a tartalmat ker át a megadott URL-re. Íme, amit kaptam:

Pro és kontra

Gyors és egyszerű, és nem igényel külön felületet, de nem javasol egy elérhető URL-et az alkalmazáshoz.

Ideje telepíteni az egyes tárhelyszolgáltatásokat

A legjobb 3 ingyenes React hosting szolgáltatásunk

1. Netlify
2. Vercel
3. Túlfeszültség

Kulcs elvitelek

Az ingyenes React alkalmazástárhely-szolgáltatások mindegyikének tesztelése után úgy gondoljuk, hogy a Netlify a legjobb a csoportból. Gyors üzembe helyezést biztosít számos olyan funkcióval, amelyekre szüksége lehet. Közvetlenül ezután jön a Vercel, amely számos funkcióval rendelkezik, és a kezdeti üzembe helyezés után meglehetősen gyors. Ezután van a Surge, amely egy minimális telepítési eszköz, amely meglehetősen olcsó lehet, ha úgy dönt, hogy frissít.

Automatizálja a frontend felépítését, és 10-szer gyorsabban küldje el az alkalmazást. További információ.