Sådan distribueres en NodeJS-app til Heroku fra Github (uden at installere Heroku på din maskine)

Som webudvikler er intet mere tilfredsstillende end at kunne vise (og vise) dit arbejde til ordet. Ikke kun gennem billederne eller videoerne på Twitter, men lade dem faktisk interagere med det - især hvis du arbejder på nogle seje sideprojekter eller ansøger om en stilling.

Og heldigvis er deling af dit arbejde nu med alle skyudbydere et must og er et grundlæggende trin på din rejse.

I denne demo vil vi se på, hvordan du implementerer din seje NodeJS-app til Heroku. I slutningen af ​​denne demo vil vi have en grundlæggende Hello World-app, der kører på et offentligt domæne, som alle kan få adgang til.

Til denne demo antager jeg, at du har Node installeret på din maskine. Hvis ikke, kan du downloade fra Nodejs.org-webstedet. Trinene er enkle og kan nemt findes online.

Du har også brug for en GitHub-konto for at være vært for vores kode online. Hvis du ikke har en konto, kan du oprette en gratis på Github.com. Med en gratis konto kan du oprette ubegrænsede offentlige arkiver. Vi bruger Git-versionskontrolsystemet til at skubbe vores ændringer til Github

TRIN 1: Opret den seje app

Lad os nu oprette den Cool Node-app, som du har tænkt på.

Opret en mappe på din lokale maskine, og giv den et navn (efter eget valg), siger MyCoolApp.

Tilføj en fil med navnet package.json, og indsæt nedenstående indhold. Denne fil er grundlæggende oplysninger om vores pakke. (Dette kan også oprettes ved at skrive kommandoen npm init og acceptere alle standardindstillinger.)

{ "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": "" }

En meget vigtig ændring at bemærke er denne linje:

"start": "node app.js"

Efter implementeringen kører Heroku denne kommando for at starte din applikation.

Tilføj en fil, app.js, og indsæt nedenstående kode. Dette vil være udgangspunktet for vores app.

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); });

Denne kode åbner dybest set en port på den lokale server og serverer noget HTML.

Bemærk den vigtigste kodeblok her:

const port = process.env.PORT || 3000

Dette er ekstremt vigtigt, når du vil distribuere din applikation til skyen. Applikationsserveren startes på en tilfældig port i skyen. Hvis du hårdt kode et portnummer, som i alle vejledninger i Kom godt i gang, og distribuerer til skyen, er det specifikke portnummer muligvis ikke tilgængeligt. Ansøgningen starter aldrig. Så det er bedre at få det portnummer, der er tildelt af skyinstansen, og starte HTTP-serveren.

Gem filen, og kør nedenstående kommando i kommandopromptvinduet (som er åbent inde i mappen):

node app.js

Med dette vil Node starte serveren og vise nedenstående meddelelse:

Nu, hvis vi åbner // localhost: 3000 / i browseren, ser vi dette:

Fedt nok! Vi oprettede netop en grundlæggende NodeJs-app.

TRIN 2: Skub til GitHub

Vil nu uploade vores kode til GitHub. På denne måde vil vi være i stand til at redigere vores kode overalt og også implementere de forpligtede ændringer til skyen med det samme.

Lad os oprette et lager på GitHub ved at klikke på Nyt lager.

Giv det et navn, en beskrivelse, og klik på Opret lager:

GitHub opretter et lager og giver dig nogle kommandoer, som du kan køre lokalt, så du kan klone din lokale mappe med dit GitHub-lager.

I kommandoprompten skal du køre under kommandoer i denne rækkefølge.

  1. Initialiser Git-arkivet på rodniveauet:
git init

2. Føj alle filerne til din lokale Git (iscenesættelse). Bemærk den sidste prik:

git add . 

3. Foretag dine ændringer til din lokale Git:

git commit -m “first commit”

4. Link til dit GitHub-lager. (Skift URL'en for at pege på dit lager.)

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

5. Og skub din ændring:

git push — set-upstream origin master

Du skal se meddelelser som nedenfor ved kommandoprompten.

Hvis du nu åbner GitHub og opdaterer lageret, skal du kunne se koden.

TRIN 3: Implementer til Heroku

Nu kommer det sjove, grunden til at du har overlevet alt dette: implementering.

Hvis du ikke har en konto hos Heroku, kan du åbne en gratis ved at udfylde denne enkle formular. (Og her behøver du ikke at give kreditkortoplysninger :))

Når du har din konto klar, skal du logge ind med dine legitimationsoplysninger.

Klik på Ny i øverste højre hjørne, og vælg "Opret ny app".

Giv din app et navn (dette vil blive inkluderet i den offentlige URL til din applikation), og klik på Opret app.

Dette trin fører dig til dashboards i din app. Åbn fanen Deploy, og rul til afsnittet "Deployment method".

Vælg GitHub som metode.

Det viser en "Opret forbindelse til GitHub" -indstilling, hvor vi kan levere vores GitHub-lager. Hvis du gør det for første gang, beder Heroku om tilladelse til at få adgang til din GitHub-konto.

Her kan du søge efter dit GitHub-arkiv og klikke på Opret forbindelse:

Hvis det er i stand til at finde og oprette forbindelse til GitHub-arkivet, vises afsnittet Implementering, hvor du kan vælge, om du vil have automatisk implementering (så snart ændringerne skubbes til GitHub, vil Heroku hente dem og implementere dem) eller Manuel implementering.

Klik på Aktiver automatiske implementeringer (fordi det er mindre omkostninger for demo-apps :)). Du kan også vælge GitHub-filialen, hvis du har brug for det, men til denne demo implementerer vi fra mastergrenen.

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!

Gå videre og del med andre!

Happy Hosting :)