Kako rasporediti NodeJS aplikaciju na Heroku iz Githuba (bez instaliranja Herokua na vašem računalu)

Kao web programeru, ništa nije zadovoljavajuće od mogućnosti prikazivanja (i pokazivanja) vašeg rada na riječ. Ne samo kroz slike ili videozapise na Twitteru, već im omogućavamo da u stvarnosti komuniciraju s njima - pogotovo ako radite na nekim cool sporednim projektima ili se prijavljujete za neko radno mjesto.

I na sreću, sada je kod svih pružatelja usluga u oblaku dijeljenje posla neophodno i osnovni je korak na vašem putovanju.

U ovom demo pokazat ćemo kako rasporediti vašu cool NodeJS aplikaciju na Heroku. Do kraja ove demonstracije imat ćemo osnovnu aplikaciju Hello World koja radi na javnoj domeni i može joj pristupiti bilo tko.

Za ovu demonstraciju pretpostavljam da imate Node instaliran na vašem računalu. Ako nije, možete preuzeti s web mjesta Nodejs.org. Koraci su jednostavni i lako ih je pronaći na mreži.

Trebat će vam i GitHub račun za hostiranje našeg koda na mreži. Ako nemate račun, možete ga besplatno stvoriti na Github.com. S besplatnim računom možete stvoriti neograničena javna spremišta. Upotrijebit ćemo sustav kontrole verzija Git kako bismo unijeli naše promjene u Github

KORAK 1: Stvorite onu super aplikaciju

Ajmo sada stvoriti onu Cool Node aplikaciju o kojoj ste razmišljali.

Stvorite mapu na lokalnom računalu i dajte joj ime (po vašem izboru), recimo MyCoolApp.

Dodajte datoteku s imenom package.json i zalijepite donji sadržaj. Ova je datoteka osnovni podatak o našem paketu. (To se također može stvoriti upisivanjem naredbe npm init i prihvaćanjem svih zadanih postavki.)

{ "name": "coolnodeapp", "version": "1.0.0", "description": "node app ", "main": "app.js", "scripts": { "start": "node app.js" }, "repository": { "type": "git", "url": "" }, "author": "", "license": "ISC", "bugs": { "url": "" }, "homepage": "" }

Jedna vrlo važna promjena koju treba primijetiti je sljedeća linija:

"start": "node app.js"

Nakon postavljanja, Heroku će pokrenuti ovu naredbu za pokretanje vaše aplikacije.

Dodajte datoteku app.js i zalijepite donji kod. Ovo će biti početna točka naše aplikacije.

const http = require('http'); const port = process.env.PORT || 3000 const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/html'); res.end('

Hello World

'); }); server.listen(port,() => { console.log(`Server running at port `+port); });

Ovaj kôd u osnovi otvara priključak na lokalnom poslužitelju i poslužuje neki HTML.

Ovdje imajte na umu najvažniji blok koda:

const port = process.env.PORT || 3000

To je izuzetno važno kada svoju aplikaciju želite rasporediti u oblak. Poslužitelj aplikacija pokreće se na slučajnom priključku u oblaku. Ako čvrsto kodirate broj porta, kao u svim vodičima za početak rada, i postavite u oblak, određeni broj porta možda neće biti dostupan. Aplikacija se nikada neće pokrenuti. Zato je bolje dobiti broj porta koji je dodijelila instanca oblaka i pokrenuti HTTP poslužitelj.

Spremite datoteku i pokrenite donju naredbu u prozoru naredbenog retka (koji je otvoren u mapi):

node app.js

Ovim će Node pokrenuti poslužitelj i prikazati sljedeću poruku:

Sada, ako otvorimo // localhost: 3000 / u pregledniku, vidjet ćemo ovo:

Super! Upravo smo stvorili osnovnu aplikaciju NodeJs.

KORAK 2: Pritisnite GitHub

Sada želimo prenijeti naš kôd na GitHub. Na taj ćemo način moći uređivati ​​svoj kod s bilo kojeg mjesta i također odmah implementirati preuzete promjene u oblak.

Stvorimo Spremište na GitHubu klikom na Novo Spremište.

Dajte mu ime, opis i kliknite Stvori spremište:

GitHub će stvoriti spremište i dat će vam neke naredbe koje možete pokretati lokalno, tako da možete klonirati svoju lokalnu mapu sa svojim GitHub spremištem.

U naredbenom retku u ovom slijedu pokrenite naredbe ispod.

  1. Inicijalizirajte Git spremište na korijenskoj razini:
git init

2. Dodajte sve datoteke u svoj lokalni Git (inscenacija). Primijetite zadnju točku:

git add . 

3. Predajte promjene na lokalnom Gitu:

git commit -m “first commit”

4. Veza na vaše GitHub spremište. (Promijenite URL tako da usmjerava na vaše spremište.)

git remote add origin //github.com/rramname/MyCoolNodeApp.git

5. I pritisnite svoju promjenu:

git push — set-upstream origin master

Na naredbenom retku trebali biste vidjeti poruke kao u nastavku.

Ako otvorite GitHub i osvježite spremište, trebali biste moći vidjeti kôd.

KORAK 3: Postavite se na Heroku

Sada dolazi zabava, razlog zašto ste sve ovo preživjeli: raspoređivanje.

Ako nemate račun kod Heroku, možete otvoriti besplatni ispunjavanjem ovog jednostavnog obrasca. (A ovdje ne trebate navesti podatke o kreditnoj kartici :))

Nakon što pripremite račun, prijavite se s vjerodajnicama.

Kliknite Novo u gornjem desnom kutu i odaberite "Stvori novu aplikaciju".

Dajte aplikaciji naziv (to će biti uključeno u javni URL vaše aplikacije) i kliknite Izradi aplikaciju.

This step will take you to the dashboard of your app. Open Deploy tab and scroll to the “Deployment method” section.

Select GitHub as the method.

It will show a “Connect to GitHub” option where we can provide our GitHub repository. If you are doing it for the first time, Heroku will ask permission to access your GitHub account.

Here, you can search for your GitHub repository and click connect:

If it’s able to find and connect to the GitHub repository, the Deployment section will show up where you can select if you want Automatic Deployment (as soon as the changes are pushed to GitHub, Heroku will pick them up and deploy) or Manual Deployment.

Click Enable Automatic Deploys (because it’s less overhead for demo apps :) ). You can also select the GitHub branch if you need to, but for this demo we will deploy from the master branch.

Now we need to tell Heroku that our app is a NodeJs app. For that, we will need the NodeJs build back.

Open the Settings tab and locate Buildpacks and click “Add buildpack”.

Select nodejs from the options and click Save changes.

Now, go back to the Deploy tab, and click Deploy Branch at the bottom.

Heroku will take the code and host it. Open the Activity tab and there you can see the progress:

And that’s it!

Open the settings tab and scroll down to the Domains and certificates section. Here, you can see the URL of your app that was just deployed. Copy and paste that URL in the browser and… Hoooorah!!

We just created our own web application that can be accessed over the internet.

Great!

Please go ahead and share with others!

Happy Hosting :)