Ako nasadiť aplikáciu React + Node do Heroku za 3 minúty bez príkazového riadku

V tomto tutoriáli budeme robiť základné nasadenie aplikácie React + Node do Heroku.

Existuje veľa tutoriálov, ktoré to robia iba pomocou príkazového riadku, takže aby som to trochu zmenil, urobím to úplne bez príkazového riadku.

Na generovanie aplikácií React a Express nemáme inú možnosť ako použiť príkazový riadok. Na všetko ostatné použijeme grafické používateľské rozhranie.

Tiež predpokladám, že máte účet Github a Heroku. Obaja sú zadarmo, takže sa nemusíte báť prihlásiť.

vzorový projekt:

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

Reagujte a Express Setup

Najprv začnime vytvorením dvoch adresárov s názvom Server a Client.

Adresár klienta bude obsahovať obsah create-react-apppríkazu a server obsah servera express. Táto knižnica pre nás automaticky vytvára jednoduchú aplikáciu Express, podobne ako create-react-app. Musí byť nainštalovaný globálne, čo môžete urobiť pomocou príkazu:

npm install -g express-generator

Potom jednoducho spustite tieto príkazy v každom z príslušných adresárov a nainštalujte začiatočné projekty:

npx create-react-app app1v adresári Klient

expressv adresári Server

Prejdite do adresára app1 vygenerovaného create-react-appa spustite:

npm run build

Toto vygeneruje produkčnú verziu projektu, ktorá je optimalizovaná pre produkčné nasadenie, s odstránením napríklad kódu na spracovanie chýb a medzery.  

Poznámka: V vývojovej zostave by ste na komunikáciu z vašej aplikácie React na server Express použili proxy na // localhost: 5000 , ale tu je aplikácia React a server Express iba jedným projektom. Server Express slúži na súbory React.

Ďalej vyrežte a prilepte celý adresár zostavenia do adresára Server . Štruktúra vášho projektu by mala vyzerať takto:

Teraz môžeme pridať nejaký kód, aby sme dali vedieť nášmu serveru Express, aby slúžil nášmu projektu React .:

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

Prvý riadok kódu slúži všetkým našim statickým súborom z adresára zostavenia .

Druhou časťou kódu je zabezpečenie funkčnosti smerovania na strane klienta. Tento kód v podstate slúži index.htmlsúboru na všetkých neznámych trasách. Inak by sme potrebovali prepísať celé naše smerovanie, aby sme mohli pracovať s týmto nastavením servera Express.

Ak chcete svoju aplikáciu otestovať, stačí spustiť npm startv adresári Server a v prehliadači prejsť na // localhost 3000 . Potom by ste mali vidieť svoju spustenú aplikáciu React.

Teraz sme pripravení nahrať tento projekt na GitHub.

GitHub

Namiesto nahrávania na GitHub pomocou príkazového riadku to urobíme pomocou grafického používateľského rozhrania. Najskôr prejdite na domovskú stránku GitHubu a vytvorte nové úložisko. Pomenujte ho, ako chcete, ale uistite sa, že je začiarknutá možnosť Inicializovať toto úložisko s README :

Ďalej nahrajte všetky súbory projektu bez adresára node_modules .

Kliknite na potvrdenie a máme hotovo. Vaše nahrané súbory projektu sa na GitHubu zobrazia takto:

Teraz môžeme prejsť k nastaveniu Heroku.

Heroku

Prejdite na informačný panel Heroku, vytvorte novú aplikáciu a pomenujte ju, ako sa vám páči.

Ďalej prejdite na kartu Nasadenie a v časti Metóda nasadenia vyberte GitHub:

Ak ste ešte nepripojili svoj účet GitHub k svojmu účtu Heroku, zobrazí sa výzva prostredníctvom toku autentifikácie GitHub.

Potom vyhľadajte svoj projekt na GitHub a pripojte sa k nemu:

Nakoniec môžeme našu aplikáciu iba nasadiť kliknutím na tlačidlo Nasadiť vetvu:

Heroku automaticky nainštaluje všetky moduly uzlov. Váš projekt si môžete pozrieť kliknutím na tlačidlo Zobraziť.

A to je všetko, skončili sme! Vďaka za prečítanie.

Pripojte sa ku mne na Twitteri a získajte ďalšie informácie o budúcich tutoriáloch: //twitter.com/iqbal125sf