Õpetus: kuidas installida rakendus React rakendus Herokusse

Rakendus Loo-reageeri ja Heroku on suurepärased tööriistad ülitugevate rakenduste loomiseks, kuid React ja Heroku dokumentides on väga vähe teavet selle kohta, kuidas juurutada Reakti toodang ehitatakse heroku. Juhendan teid lihtsa, tootmiseks valmis rakenduse React kasutuselevõtmisel Heroku. Need toimingud toimivad kõigi rakenduste React jaoks, mis on loodud rakendusega loo-reageeri.

1. samm: looge rakendus React

Esiteks peate looma rakenduse React, kasutades loo-reageeri-rakenduse generaatorit. Veenduge, et olete kõigepealt installinud sõlme ja npm.

Uue reageeriva rakenduse genereerimiseks sisestage terminalis järgmine (ja asendage hello-world rakenduse nimega):

NPX loo-reageeri-rakenduse tere-maailm
cd tere-maailm

Avage oma eelistatud tekstiredaktoris teremaailma hoidla. Kui kasutate aatomit, tippige lihtsalt aatom. terminalis oma repo avamiseks. Repo näeb välja järgmine:

Tere, Maailm
├── README.md
├── node_modules
├── pakett.json
├── .gitignore
├── avalik
│ ├── favicon.ico
│ ├── register.html
│ └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── register.css
    ├── register.js
    ├── logo.svg
    └── registerServiceWorker.js

2. samm: lisage oma rakenduse ikoon avalikku kausta

Mis tahes PNG-d saate teisendada favicon.ico-failiks siin: https://www.favicon-generator.org/

Seejärel kustutage olemasolev fail favicon.ico kaustast Avalik ja lisage oma fail favicon.ico kausta Avalik. Kui te ei lisa oma ikooni, kasutatakse rakendust vaikimisi ikoonil React.

3. samm: looge Express JS-i server, mis teenib teie tootmisprotsessi

Looge oma hoidlas fail server.js:

puudutage server.js

Kopeerige / kleepige server.js sisse järgmine kood:

// server.js
const väljendama = nõudma ('väljendama');
const favicon = nõuda ('ekspress-favicon');
const path = nõuda ('tee');
const port = protsess.env.PORT || 8080;
const app = ekspress ();
app.use (favicon (__ dirname + '/build/favicon.ico'));
// __dirname on praegune kataloog, kust skript töötab
app.use (express.static (__ dirname));
app.use (express.static (tee.join (__ dirname, 'ehitama')));
app.get ('/ ping', funktsioon (req, res) {
 return res.send ('pong');
});
app.get ('/ *', funktsioon (req, res) {
  res.sendFile (path.join (__ dirname, 'build', 'index.html'));
});
app.listen (port);

See kood loob spetsiaalse sõlme JS-serveri, mis saab teenindada tihendatud / uglified JS-i. / ping on mõttetu tee, mille abil saate testida, kas server töötab.

Lisage oma sõltuvustele kindlasti ekspress-, ekspress-favicon ja tee:

lõng lisab ekspress-faviconi tee

Muutke oma failis package.json stardiskript järgmiseks:

algus: "node server.js"

4. samm: looge Reacti tooteversioon

Heroku käivitab nüüd juurutamise käsu automaatselt, kui installite, kuid see on hea mõte enne toote juurutamist (eriti teie esimest korda) proovida tootmise ülesehitust kohapeal.

Saate luua tootmiskonstruktsiooni lokaalselt, käivitades oma terminalis järgmise käsu:

lõnga ehitada

Seejärel käivitage lõnga algus, et käivitada tootmisserver kohapeal.

5. samm: takistage lähtekoodi juurutamist

Looge oma hoidlas fail nimega .env:

puudutage .env

Seejärel lisage allikaartide genereerimise vältimiseks .env-faili järgmine teave.

# .env
GENERATE_SOURCEMAP = vale

Allikakaardid võimaldavad teil juurdepääsu oma lähtekoodile tootmiskeskkonnas, mis teeb silumise lihtsamaks. Allikakaardid võimaldavad aga ka kõigil avalikkusel teie lähtekoodi vaadata.

Märkus. Kui teil on probleeme tootmises oleva probleemi silumisega, kuid soovite oma lähtekoodi privaatsena hoida, saate luua eraldi haru, eemaldada see rida .env-failist ja paigutada see haru salajasesse heroku url-i.

6. samm: juurutage herokusse

Kui teil veel pole heroku kontot, looge see siin: https://signup.heroku.com/

Käivitage käsuribal järgmine:

heroku sisselogimine

Peate sisestama oma heroku mandaadi terminali. Kui olete oma heroku mandaadi edukalt sisestanud, käitage oma terminalis uue juurutatud rakenduse loomiseks järgmist:

heroku luua proovi-reageerida-tootmise-rakendus

Asendage rakendus proovi-reageeri-tootmine-rakendus oma rakenduse nimega.

Seejärel lükake oma rakenduse ehitamine heroku järgmise terminali abil:

lõnga paigaldada
lisan.
git activ -m "esialgne pühenduma"
heroku git: kaugjuhtimine - proov-reageeri-tootmine-rakendus
git push heroku meister

Need käsud installivad teie sõltuvused, initsialiseerivad giti ja ühendavad repot heroku hallatava serverihoidlaga.

Märkus. Kui olete juba alustanud oma git enne heroku käivitamist, looge [rakenduse nimi], siis ei pea te heroku gitit käivitama: serveri -a [rakenduse nimi].

Palju õnne! Nüüd olete lõpetanud kõik vajalikud toimingud Reacti versiooni juurutamiseks. Rakenduse vaatamiseks käivitage terminalis järgmist:

heroku lahti

Naudi! Samuti näete siit, kuidas lõplik repo välja näeb: https://github.com/jeremygottfried/sample-react-production-app