NodeJS App Deploy mit Github & Heroku in unter 10 Minuten

Du hast deine Web App oder Website mit Node erstellt und möchtest sie veröffentlichen (deployen)? Dann hilft dir dieser Beitrag weiter. Erfahre wie du in weniger als 10 Minuten mit Github und Heroku dein Node-Projekt kostenlos und einfach hosten kannst. Heroku erstellt für dich außerdem eine Subdomain über die du deine Web Applikation von überall aus erreichen und mit Anderen teilen kannst.

Vorbereitung

Bevor es los gehen kann, solltest du folgende Punkte abhaken können:

• Du hast Grundkenntnisse im Umgang mit dem Terminal und Git(hub)
• Du hast bereits dein erstes Node Projekt erstellt und hast Basiswissen rund um NodeJS
• Du hast einen kostenlosen Account bei Heroku erstellt

In diesem Beitrag arbeite ich mit dem Code aus diesem Node JS Webserver Tutorial. Falls du kein NodeJS Projekt parat hast, empfehle ich dir den Beitrag vorher kurz durchzulesen oder noch besser, das Projekt bei dir selbst einzurichten. Auch das geht ganz schnell – versprochen!

Git & Github

An der Stelle der Hinweis, ich gehe auf die Git-Kommandos nicht im Detail ein. Aber selbst wenn du sie nicht 100%ig verstehst, dann macht das nichts. Gebe sie dennoch einfach ein 😉

Bereit? Dann öffne jetzt dein Projekt im Terminal und initialisiere dein Git und führe deinen ersten Commit aus. Die Codeabfolge sieht dann so in etwa aus:

git init
git add .
git commit -m "mein erster commit"

Logge dich nun in Github ein und erstelle ein neues Repository. In der Projektübersicht bekommst du nochmal von Github Befehle vorgeschlagen.

Die meisten kannst du ignorieren, lediglich den Befehl in der vorletzten Zeile kopierst du und führst in in deinem Terminal aus.

git remote add origin https://github.com/kerminz/tut_heroku.git

Achte darauf, dass du hier deine Github URL verwendest und nicht auf mein Projekt verweist. Danach kannst du den Befehl im Terminal ausführen.

🎉 Damit sollte dein lokales Repo mit dem Remote Repository in Github verknüpft sein. Nice! Jetzt kannst du deinen Commit pushen, also in Github "hochladen". Das geht mit folgendem Befehl:

git push -u origin main

Es ist möglich das du einen Fehler zurückbekommst. Das könnte mit deiner Github Authentifizierung zusammenhängen. In diesem Fall folgst du einfach der Anweisung und dem vorgeschlagenen Befehl im Terminal:

git push --set-upstream origin main

Nachdem du erfolgreich deinen Code gepusht hast, kann es endlich mit der Einrichtung von Heroku losgehen.

Heroku einrichten 🛠️

Solltest du bis hier hin noch keinen kostenlosen Account bei Heroku angelegt habe, dann solltest du das spätestens jetzt tun. 🙂

Nachdem du deinen Account erstellt hast, musst du das Heroku CLI (Command Line Interface) installieren. Am einfachsten geht das mit npm:

npm install -g heroku

Alternative Installationswege findest du hier. Ob dein Installation erfolgreich war, findest du heraus, indem du die Versionsnummer prüfst:

heroku --version

Als nächstes loggst du dich über die CLI ein. Dafür wirst du aus dem Terminal über dein Browser zu Heroku weitergeleitet, wo du dich nur noch einloggen musst.

heroku login

Sobald du den Befehl eingegeben hast, bestätigst du mit einer belieben Taste, dass du weitergeleitet werden darfst. Nach dem erfolgreichen Login kehrst du in dein Terminal zurück. Jetzt hast du vollen Zugriff auf deinen Heroku Account über die CLI.

Heroku App erstellen 🚧

Um eine Heroku App zu erstellen gibt es zwei Wege. Entweder du nutzt die Web App von Heroku und klickst dich durch oder aber du nutzt ein CLI Befehl. Wir setzen hier auf Option zwei, da sie der deutlich einfacherer Weg ist. Bereit? Dann lass uns deine App bei Heroku anlegen, gebe dazu folgenden Befehl ein:

heroku create tut-heroku-app --region eu

Wichtig: Bevor du den Befehl ausführst, ändere zunächst tut-heroku-app zu deinem App-Namen ab. Außerdem noch ein Hinweis zum Serverstandort an dieser Stelle: Heroku ist ein US-amerikanischer Anbieter und legt seine "Dynos" (so etwas wie Server) standardmäßig auf Rechnerfarmen in Virginia (USA) an. Diese willst du aus mehreren Gründen nicht benutzen, weshalb du den Serverstandort ganz einfach über die Option --region ändern kannst.

In meinem Beispiel wird die App auf einem Server in Frankfurt (EU) erstellt. Außerdem: Achte darauf, dass der App-Name einzigartig ist. Heroku legt für dich eine Subdomain mit dem App-Namen an. Es kann also sein, dass der Name schon vergeben ist. Wenn du übrigens keinen Namen wählst, wird random für dich einer generiert.

🎉 Du hast die Heroku App nun erfolgreich erstellt. Sie ist ab sofort über die entsprechende Subdomain (abhängig von deinem App-Namen), erreichbar. In meinem Fall https://tut-heroku-app.herokuapp.com. Allerdings tut sich noch nicht viel bei deiner App, wenn du sie über die URL aufrufst. Es fehlt nämlich noch ein letzter Schritt. Du musst deinen Github Code der Heroku App, die du gerade erstellt hast, bereitstellen.

Heroku App deployen 🚀

Für die Veröffentlichung deiner App und damit die Bereitstellung des Codes via Github in Heroku, brauchst du nur eine Zeile Code:

git push heroku main

Damit wir dein Github Code aus dem Main-Branch an Heroku gesandt und dort startet letztlich der Build-Prozess, der dafür zuständig ist, deine App "zusammenzubauen" mit der Bauanleitung die aus deinem Code besteht. Logisch, oder? 🤓

Geschafft! Die App ist online und damit erfolgreich deployed! 🚀

Wichtige Hinweise 👆

Zum Abschluss möchte ich dich an dieser Stelle noch auf zwei wichtige Konfigurationen in deinem Projekt hinweisen die super wichtig sind, damit Heroku erfolgreich deine App builden und veröffentlichen kann.

1️⃣ Achte darauf, dass du für den Port, Environment-Variables benutzt, da Heroku deine App nur über den Port 80 bereitstellen kann. Die wichtige Zeile Code sieht so aus  (Falls du nicht sicher bist was das ist, macht nichts – kopiere einfach den Code und nutze die Variable als dein Port. 👇

const port = process.env.PORT || 3001

2️⃣ Sorge dafür, dass die package.json bei scripts als Start-Befehl node index.js enhtält. Ansonsten wüsste Heroku nämlich nicht wie es deine App starten soll. 👇

"scripts": {
    "start": "node index.js"
}

Den kompletten Code des Web-App-Beispiels aus diesem Tutorial findest du übrigens hier.

Fazit

Gratuliere! Du hast erfolgreich gelernt wie du in weniger als 10 Minuten eine NodeJS Web App auf Heroku deployst. Wie geht es weiter? Erweitere deine App um eine Datenbank wie z.B. MongoDB. Du kannst hierfür den gleichnamigen Database-as-a-Service Dienst MongoDB Atlas nutzen. Eine Datenbank macht deine App zu einer richtigen Full-Stack-Applikation.

Hat dir dieser Beitrag gefallen oder fehlt dir etwas? Oder hast du vielleicht Feedback? Dann schreibe mir auf Twitter! Außerdem würde ich mich sehr freuen, wenn du diesen Beitrag teilst. Damit hilfst du mir meine Seite noch bekannter zu machen, damit ich noch mehr Menschen auf ihrem Weg zum Web Developer unterstützen kann. ❤️