So stellen Sie eine NodeJS-App von Github für Heroku bereit (ohne Heroku auf Ihrem Computer zu installieren)

Als Webentwickler ist nichts befriedigender, als Ihre Arbeit dem Wort zu zeigen (und vorzuführen). Nicht nur über die Bilder oder Videos auf Twitter, sondern auch über die Interaktion mit ihnen - insbesondere, wenn Sie an coolen Nebenprojekten arbeiten oder sich für eine Stelle bewerben.

Und zum Glück ist es jetzt bei allen Cloud-Anbietern ein Muss und ein grundlegender Schritt auf Ihrem Weg, Ihre Arbeit zu teilen.

In dieser Demo sehen wir uns an, wie Sie Ihre coole NodeJS-App für Heroku bereitstellen können. Am Ende dieser Demo wird eine einfache Hello World-App auf einer öffentlichen Domain ausgeführt, auf die jeder zugreifen kann.

Für diese Demo gehe ich davon aus, dass Sie Node auf Ihrem Computer installiert haben. Wenn nicht, können Sie von der Nodejs.org-Website herunterladen. Die Schritte sind einfach und können leicht online gefunden werden.

Sie benötigen außerdem ein GitHub-Konto, um unseren Code online zu hosten. Wenn Sie kein Konto haben, können Sie auf Github.com kostenlos ein Konto erstellen. Mit einem kostenlosen Konto können Sie unbegrenzt öffentliche Repositories erstellen. Wir werden das Git-Versionskontrollsystem verwenden, um unsere Änderungen an Github zu übertragen

SCHRITT 1: Erstellen Sie diese coole App

Jetzt erstellen wir die Cool Node App, über die Sie nachgedacht haben.

Erstellen Sie einen Ordner auf Ihrem lokalen Computer und geben Sie ihm einen Namen (Ihrer Wahl), z. B. MyCoolApp.

Fügen Sie eine Datei mit dem Namen package.json hinzu und fügen Sie den folgenden Inhalt ein. Diese Datei enthält grundlegende Informationen zu unserem Paket. (Dies kann auch durch Eingabe des Befehls npm init und Akzeptieren aller Standardeinstellungen erstellt werden.)

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

Eine sehr wichtige Änderung ist diese Zeile:

"start": "node app.js"

Nach der Bereitstellung führt Heroku diesen Befehl aus, um Ihre Anwendung zu starten.

Fügen Sie eine Datei, app.js, hinzu und fügen Sie den folgenden Code ein. Dies wird der Ausgangspunkt unserer App sein.

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

Dieser Code öffnet im Grunde einen Port auf dem lokalen Server und stellt HTML bereit.

Bitte beachten Sie hier den wichtigsten Codeblock:

const port = process.env.PORT || 3000

Dies ist äußerst wichtig, wenn Sie Ihre Anwendung in der Cloud bereitstellen möchten. Der Anwendungsserver wird an einem zufälligen Port in der Cloud gestartet. Wenn Sie eine Portnummer wie in allen Kurzanleitungen fest codieren und in der Cloud bereitstellen, ist die spezifische Portnummer möglicherweise nicht verfügbar. Die Anwendung wird niemals gestartet. Es ist daher besser, die von der Cloud-Instanz zugewiesene Portnummer abzurufen und den HTTP-Server zu starten.

Speichern Sie die Datei und führen Sie den folgenden Befehl im Eingabeaufforderungsfenster aus (das im Ordner geöffnet ist):

node app.js

Damit startet Node den Server und zeigt die folgende Meldung an:

Wenn wir nun // localhost: 3000 / im Browser öffnen, sehen wir Folgendes:

Cool! Wir haben gerade eine einfache NodeJs-App erstellt.

SCHRITT 2: Push to GitHub

Nun möchten wir unseren Code auf GitHub hochladen. Auf diese Weise können wir unseren Code von überall aus bearbeiten und die festgeschriebenen Änderungen sofort in der Cloud bereitstellen.

Lassen Sie uns ein Repository auf GitHub erstellen, indem Sie auf Neues Repository klicken.

Geben Sie ihm einen Namen und eine Beschreibung und klicken Sie auf Repository erstellen:

GitHub erstellt ein Repository und gibt Ihnen einige Befehle, die Sie lokal ausführen können, damit Sie Ihren lokalen Ordner mit Ihrem GitHub-Repository klonen können.

Führen Sie an der Eingabeaufforderung die folgenden Befehle in dieser Reihenfolge aus.

  1. Initialisieren Sie das Git-Repository auf Stammebene:
git init

2. Fügen Sie alle Dateien zu Ihrem lokalen Git hinzu (Staging). Beachten Sie den letzten Punkt:

git add . 

3. Übernehmen Sie Ihre Änderungen in Ihr lokales Git:

git commit -m “first commit”

4. Link zu Ihrem GitHub-Repository. (Bitte ändern Sie die URL so, dass sie auf Ihr Repository verweist.)

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

5. Und schieben Sie Ihr Wechselgeld:

git push — set-upstream origin master

Sie sollten Meldungen wie unten bei der Eingabeaufforderung sehen.

Wenn Sie nun GitHub öffnen und das Repository aktualisieren, sollte der Code angezeigt werden.

SCHRITT 3: Bereitstellen auf Heroku

Jetzt kommt der Spaß, der Grund, warum Sie all dies überlebt haben: Bereitstellung.

Wenn Sie kein Konto bei Heroku haben, können Sie ein kostenloses Konto eröffnen, indem Sie dieses einfache Formular ausfüllen. (Und hier müssen Sie keine Kreditkarteninformationen angeben :))

Sobald Sie Ihr Konto bereit haben, melden Sie sich mit Ihren Anmeldeinformationen an.

Klicken Sie oben rechts auf Neu und wählen Sie "Neue App erstellen".

Geben Sie Ihrer App einen Namen (dieser wird in die öffentliche URL Ihrer Anwendung aufgenommen) und klicken Sie auf App erstellen.

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