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