Hogyan telepítsen egy React alkalmazást a Netlify-ra

Megtanítom, hogyan telepítse és üzemeltesse a React alkalmazást a Netlify segítségével.

A Netlify egy olyan szolgáltatás, amely automatizálja a webhelyek összeállítását, telepítését és kezelését. Ez manapság az egyik leggyorsabb és legegyszerűbb telepítési megoldás.

A Netlify ingyenes tervet kínál. Tehát az első, akkor jelentkezzen be a Netlify bármilyen egyik lehetőség (GitHub, Gitlab, Bitbucket, e-mail), mivel a bejelentkezési oldalon.

Kezdjük azzal, hogy létrehozzuk az alkalmazás buildjét a következő parancs futtatásával:

npm run build

Tehát most elkészül a build mappánk, amely tartalmazza az összes gyártásra kész fájlt.

Most van két módon telepíteni a kérelmet Netlify.

Fogd és vidd

A Netifly olyannyira megkönnyítette, hogy csak húzzuk és húzzuk az építési mappát az online alkalmazásukba (a jobb szélső kép fent), és alkalmazásunk élő URL-re kerül.

Megjegyzés: A Netlify online alkalmazás az a képernyő, amely megjelenik, miután bejelentkezett a netlify-fiókjába.

Netlify CLI

A Netifly parancssori felületet is biztosít, amely lehetővé teszi az alkalmazás telepítését közvetlenül a parancssorból. Most ezt fogjuk tenni.

Tehát először a következő parancs segítségével telepítjük a CLI-t:

npm install netlify-cli -g

Most készen állunk a telepítésre. Az alkalmazás telepítéséhez meg kell győződnünk arról, hogy a projekt mappában vagyunk, majd futtatjuk ezt a parancsot:

netlify deploy

Előfordulhat, hogy megjelenik egy előugró ablak, amely megkéri, hogy jelentkezzünk be a Netlify-val, és hozzáférést adjunk a Netlify CLI-hez .

Most kattintson az Engedélyezés gombra. Most, hogy engedélyt kaptunk, követhetjük a parancssor utasításait az alkalmazás telepítéséhez.

Parancssoros felszólítások

  1. A konzolban ez áll: „ Ez a mappa még nincs összekapcsolva egy webhelykel. Mit szeretnél csinálni?" Meg akarja tudni, hogy ezt a könyvtárat egy meglévő webhelyhez akarjuk-e kapcsolni, vagy új webhelyet szeretnénk létrehozni és konfigurálni. Mivel ez egy új webhely, kiválasztjuk az Új webhely létrehozása és konfigurálása lehetőséget.

2. Lehetőséget ad arra, hogy nevet adjunk webhelyünknek. Majd írja tárca netlify (beírhat minden rendelkezésre álló név, amelyet tetszés szerint).

3. Most meg fogja kérni a használni kívánt Netlify fiókot, ezért én választom ki a fiókomat (Abhishek Jakhar) , te választhatod ki a sajátodat .

4. Most telepítési útként meg kell adnunk projektünk build könyvtárát, amely tartalmazza a telepítéshez szükséges eszközöket. Szóval, beírjuk az építést , és megnyomjuk az Enter billentyűt.

5. Most webhelyünk létrejön, és először egy URL-vázlatra telepítjük, amelyet megtekinthetünk az URL másolásával és beillesztésével a böngészőbe.

Most, vissza a konzolba, azt mondja: "Ha minden jól néz ki az URL-vázlatán, vigye azt a --prod zászlóval együtt élni" .

Tehát az alkalmazás élőképessé tétele érdekében futtatjuk a parancssorban látható parancsot

netlify deploy --prod

Még egyszer megkér minket, hogy adjuk meg az élő build telepítési útvonalát, amely ismét a build mappánk.

A konzol kimenetében két URL-t kapunk. A Unique telepítése URL, amely az egyedi URL-t minden egyes telepítés, és egy élő URL amely mindig megjeleníti a legfrissebb telepítését.

Tehát minden alkalommal, amikor frissíti és telepíti webhelyét, egyedi URL-t fog kapni a telepítéshez. Alapvetően, ha többször telepítjük, akkor több egyedi URL-címmel rendelkezünk, így a felhasználókat az alkalmazás egy adott verziójára irányíthatja. De az élő URL mindig ugyanazon az URL-en jeleníti meg a legutóbbi módosításokat .

Megjegyzés: Netlify automatikusan rögzíti a webhelyen keresztül HTTPS számára ingyenes .

Az oldal nem található hiba

Ha olyan alkalmazást tesz közzé, amely olyan útválasztót használ, mint a React Router, akkor konfigurálnia kell az átirányításokat és az URL-ekre vonatkozó szabályokat. Mert amikor bármelyik navigációs elemre kattintunk az oldal (útvonal) megváltoztatásához és a böngésző frissítéséhez, akkor egy 404-es hibaoldalt kapunk.

Tehát a Netlify nagyon megkönnyíti az URL-ekhez tartozó átirányítások és szabályok átírását. Hozzá kell adnunk egy fájlt az alkalmazásunk _redirects nevű build mappájába. A fájlban a következő átírási szabályt kell tartalmaznunk.

/* /index.html 200

Ez az átírási szabály az index.html fájlt fogja kiszolgálni ahelyett, hogy 404-et adna, függetlenül attól, hogy a böngésző milyen URL-t kér.

Tehát most az élő URL legújabb változásainak megtekintéséhez telepítenünk kell a netlify deploy. Ismét meghatározzuk a buildet telepítési útvonalként. Most, amikor látjuk az élő URL-t, és az útvonal megváltoztatása után frissítjük az alkalmazást, a 404-es hibaoldal már nem jelenik meg.

Ennyi van benne. A netlify.com oldalon megtekintheti a webhely beállításait. Itt olyan dolgokat tehet, mint például egy egyéni tartomány beállítása, vagy a webhely összekapcsolása a GitHub-tárral.

Netlify: Minden az egyben platform a modern webes projektek automatizálásához

Telepítsen modern statikus weboldalakat a Netlify segítségével. Töltse le a CDN-t, a folyamatos telepítést, 1 kattintással a HTTPS-t és minden olyan szolgáltatást, amelyet Ön… www.netlify.com

Remélem, hogy ezt a bejegyzést informatívnak és hasznosnak találta. Szeretném hallani visszajelzését!

Köszönöm, hogy elolvasta!