Come distribuire un'app NodeJS su Heroku da Github (senza installare Heroku sul tuo computer)

Come sviluppatore web, niente è più soddisfacente che poter mostrare (e mostrare) il tuo lavoro alla parola. Non solo attraverso le immagini o i video su Twitter, ma permettendo loro di interagire effettivamente con esso, specialmente se stai lavorando su alcuni interessanti progetti collaterali o fai domanda per una posizione.

E fortunatamente, ora con tutti i fornitori di servizi cloud, condividere il tuo lavoro è un must ed è un passaggio fondamentale del tuo viaggio.

In questa demo, vedremo come distribuire la tua fantastica app NodeJS su Heroku. Alla fine di questa demo, avremo un'app Hello World di base in esecuzione su un dominio pubblico a cui chiunque può accedere.

Per questa demo, presumo che tu abbia Node installato sulla tua macchina. In caso contrario, è possibile eseguire il download dal sito Web Nodejs.org. I passaggi sono semplici e possono essere trovati facilmente online.

Avrai anche bisogno di un account GitHub per ospitare il nostro codice online. Se non hai un account, puoi crearne uno gratuitamente su Github.com. Con un account gratuito, puoi creare repository pubblici illimitati. Useremo il sistema di controllo della versione Git per inviare le nostre modifiche a Github

PASSO 1: crea quella fantastica app

Ora creiamo quell'app Cool Node a cui stavi pensando.

Crea una cartella sul tuo computer locale e assegnagli un nome (a tua scelta), ad esempio MyCoolApp.

Aggiungi un file con il nome package.json e incolla il contenuto seguente. Questo file è l'informazione di base del nostro pacchetto. (Questo può essere creato anche digitando il comando npm init e accettando tutte le impostazioni predefinite.)

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

Un cambiamento molto importante da notare è questa riga:

"start": "node app.js"

Dopo la distribuzione, Heroku eseguirà questo comando per avviare l'applicazione.

Aggiungi un file, app.js e incolla il codice seguente. Questo sarà il punto di partenza della nostra 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); });

Questo codice fondamentalmente apre una porta sul server locale e serve un po 'di HTML.

Si prega di notare il blocco di codice più importante qui:

const port = process.env.PORT || 3000

Questo è estremamente importante quando vuoi distribuire la tua applicazione nel cloud. Il server delle applicazioni viene avviato su una porta casuale nel cloud. Se si codifica un numero di porta come in tutte le guide introduttive e si esegue la distribuzione nel cloud, il numero di porta specifico potrebbe non essere disponibile. L'applicazione non verrà mai avviata. Quindi è meglio ottenere il numero di porta assegnato dall'istanza cloud e avviare il server HTTP.

Salva il file ed esegui il comando seguente nella finestra del prompt dei comandi (che è aperta all'interno della cartella):

node app.js

Con questo, Node avvierà il server e mostrerà il messaggio seguente:

Ora, se apriamo // localhost: 3000 / nel browser, vedremo questo:

Freddo! Abbiamo appena creato un'app NodeJs di base.

PASSAGGIO 2: eseguire il push su GitHub

Ora voglio caricare il nostro codice su GitHub. In questo modo, saremo in grado di modificare il nostro codice da qualsiasi luogo e distribuire istantaneamente le modifiche apportate al cloud.

Creiamo un repository su GitHub facendo clic su Nuovo repository.

Dagli un nome, una descrizione e fai clic su Crea repository:

GitHub creerà un repository e ti fornirà alcuni comandi che puoi eseguire localmente in modo da poter clonare la tua cartella locale con il tuo repository GitHub.

Nel prompt dei comandi, esegui i seguenti comandi in questa sequenza.

  1. Inizializza il repository Git a livello di root:
git init

2. Aggiungi tutti i file al tuo Git locale (staging). Nota l'ultimo punto:

git add . 

3. Salva le modifiche nel tuo Git locale:

git commit -m “first commit”

4. Collega al tuo repository GitHub. (Modifica l'URL in modo che punti al tuo repository.)

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

5. E spingi il tuo cambiamento:

git push — set-upstream origin master

Dovresti vedere messaggi come di seguito al comando promp.

Ora se apri GitHub e aggiorni il repository, dovresti essere in grado di vedere il codice.

PASSAGGIO 3: distribuzione su Heroku

Ora arriva il bello, il motivo per cui sei sopravvissuto a tutto questo: il dispiegamento.

Se non hai un account con Heroku, puoi aprirne uno gratuito compilando questo semplice modulo. (E qui, non è necessario fornire i dati della carta di credito :))

Una volta che hai il tuo account pronto, accedi con le tue credenziali.

Fare clic su Nuovo nell'angolo in alto a destra e selezionare "Crea nuova app".

Assegna un nome alla tua app (sarà incluso nell'URL pubblico della tua applicazione) e fai clic su Crea app.

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 :)