A React + Node alkalmazás telepítése Heroku-ba 3 perc alatt a parancssor nélkül

Ebben az oktatóanyagban egy alapvető React + Node alkalmazást fogunk telepíteni a Heroku-ra.

Nagyon sok olyan oktatóanyag van, amely ezt csak a parancssor segítségével használja, így a dolgok kissé megváltoztatásához teljesen a parancssor nélkül fogom megtenni.

Olyan dolgok esetében, mint a React és az Express alkalmazások előállítása, nincs más választásunk, mint a parancssor használata. Minden máshoz GUI-t fogunk használni.

Feltételezem továbbá, hogy van Github és Heroku fiókja. Mindketten szabadok, ezért nem kell aggódni a regisztráció miatt.

minta projekt:

//github.com/iqbal125/react-express-sample

Reagál és Express Setup

Először is kezdjük két kiszolgáló és kliens nevű könyvtár létrehozásával .

Az Ügyfél könyvtár tárolja a create-react-appparancs, a Szerver pedig a expressparancs tartalmát . Ez a könyvtár csak egy egyszerű Express alkalmazást hoz létre számunkra automatikusan, ehhez hasonló create-react-app. Globálisan kell telepíteni, amelyet a következő paranccsal tehet meg:

npm install -g express-generator

Ezután egyszerűen futtassa ezeket a parancsokat az egyes könyvtárakban az indító projektek telepítéséhez:

npx create-react-app app1az Ügyfél könyvtárban

expressa Kiszolgáló könyvtárban

Váltás az app1 könyvtárra, amelyet a create-react-appfuttatás hoz létre, és futtassa:

npm run build

Ez létrehozza a projekt gyártási build verzióját, amely optimalizálva van a gyártási telepítéshez, eltávolítva például a hibakezelési kódot és a szóközöket.  

Megjegyzés: Egy fejlesztési összeállításban a // localhost: 5000 proxy segítségével kommunikálhatna a React alkalmazásból az Express kiszolgálóval, de itt a React alkalmazás és az Express kiszolgáló csak egy projekt. Az Express kiszolgáló a React fájlokat szolgálja ki.

Ezután vágja ki és illessze be a teljes build könyvtárat a Server könyvtárba. A projekt felépítésének így kell kinéznie:

Most hozzáadhatunk néhány kódot, hogy az Express kiszolgáló tudassa a React projekt kiszolgálásával .:

.... app.use(express.static(path.join(__dirname, 'build'))); app.get('/*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); .... 

Az első kódsor az összes statikus fájlunkat kiszolgálja a build könyvtárból.

A második kód az, hogy az ügyféloldali útválasztás működőképes maradjon. Ez a kód lényegében index.htmlminden ismeretlen útvonalon kiszolgálja a fájlt. Ellenkező esetben át kell írnunk a teljes útvonalat, hogy működjön ezzel az Express kiszolgáló beállításával.

Az alkalmazás teszteléséhez egyszerűen futtassa npm starta Szerver könyvtárban, és lépjen a // localhost 3000 oldalra a böngészőben. Akkor látnia kell a futó React alkalmazást.

Most készen állunk a projekt feltöltésére a GitHub-ba.

GitHub

Ahelyett, hogy a parancssort használnánk a GitHubba történő feltöltéshez, ezt a GUI-val fogjuk megtenni. Először nyissa meg a GitHub kezdőlapját, és hozzon létre egy új tárhelyet. Nevezze el, amit csak akar, de győződjön meg arról, hogy a Lerakat inicializálása be van jelölve a README opcióval:

Ezután töltse fel az összes projektfájlt a node_modules könyvtár nélkül .

Kattintson az Elkövetés gombra, és kész. A feltöltött projektfájlok a GitHub-on így fognak megjelenni:

Most folytathatjuk a Heroku beállítását.

Heroku

Lépjen a Heroku irányítópultjára, hozzon létre egy új alkalmazást, és nevezze el, ahogy tetszik.

Ezután lépjen a Telepítés fülre, és válassza a GitHub lehetőséget a Telepítési módszer alatt:

Ha még nem csatlakoztatta GitHub-fiókját Heroku-fiókjához, a rendszer kéri a GitHub Auth folyamaton.

Ezt követően keresse meg projektjét a GitHubon, és csatlakozzon hozzá:

Végül csak telepíthetjük az alkalmazást a Branch telepítése gombra kattintva:

A Heroku automatikusan telepíti az összes Node modult. Megtekintheti a projektet a Nézet gombra kattintva.

És ennyi, kész! Köszönöm, hogy elolvasta.

Lépjen kapcsolatba velem a Twitteren, ha további frissítéseket szeretne kapni a jövőbeli oktatóanyagokról: //twitter.com/iqbal125sf