Ein Gastbeitrag von Catherine Meade.
Eine Website ins Netz zu bringen stellt viele Entwickler noch immer vor Herausforderungen. Nichts zulezt, weil ein solider Plan zum Zeitpunkt der Bereitstellung über die erfolgreiche Einführung neuer Funktionen entscheidet. Wenn du die Wahl treffen musst, welcher Service zum Hosten und Bereitstellen der Website deines Kunden oder deiner eigenen App verwendet werden soll, ist es wichtig, die Hintergründe der jeweiligen Seite oder Applikation zu verstehen.
Wünschst du dir eine automatische Bereitstellung oder möchtest du die einzelnen Schritte des Prozesses kontrollieren? Wie wichtig ist eine kontinuierliche Integration (CI)? Hast du eine statische Website oder eine riesige Datenbank mit Benutzerinformationen?
In diesem Artikel behandeln wir vier Möglichkeiten für die Bereitstellung einer Webseite sowie die Vorteile und Kosten der vorgestellten Optionen. Außerdem werde ich einen möglichen Integrationsplan für deine Shopify-App-Umgebung erörtern. Unabhängig von deinem Wissensstand oder deiner Erfahrung sollte mindestens einer dieser Wege für dich in Frage kommen.
Die Grundlagen zuerst: Bevor wir anfangen, solltest du über eine Codebasis oder ein Repository verfügen und dich für einen Domain-Namen entscheiden, den du verwenden möchtest.
Tipp: Steht dir noch keine Domain zur Verfügung, kannst du sie über Shopify registrieren.
Wenn du direkt zu meiner bevorzugten Wahl für die Bereitstellung mit Shopify springen möchtest, kannst du zum Abschnitt über Heroku wechseln.
Inhaltsverzeichnis
- Ich habe eine statische Website und einen GitHub-Account: GitHub Pages
- Ich habe eine statische Website oder eine Website, die mit einem entsprechenden Generator erstellt wurde: Netlify
- Ich möchte die Vorteile einer individuelleren Pipeline nutzen: Heroku
- Ich bin ein selbstbewusster Entwickler und meine Website ist ziemlich groß: AWS, Azure, Low End Box und DigitalOcean
Schau dir den monatlichen Beitrag zu unseren Produkt Updates an
1. Ich habe eine statische Website und einen GitHub-Account: GitHub Pages
Es gibt eine Reihe von kostenlosen Hosting- und Bereitstellungsoptionen, die du nutzen kannst, wenn deine Website vollständig statisch aufgebaut ist. Das bedeutet, dass der Code der fertigen Website erstellt wurde, bevor du sie zum Repository hinzufügst – normalerweise in ein „build“- oder „dist“-Verzeichnis. Eine der grundlegendsten dieser Optionen ist das Hosten deiner Website auf GitHub Pages.
Bereitstellung deiner ersten Website mit GitHub Pages
1. Melde dich bei GitHub an und erstelle ein neues Repository unter „benutzername.github.io“ („Benutzername“ steht hier stellvertretend für den Benutzernamen deines Kontos). Alternativ kannst du eine Seite für deine GitHub-Organisation erstellen.
2. Auf der Seite „Create a Repository“ (Repository erstellen) hast du die Möglichkeit, ein Theme auszuwählen und dein Repository automatisch mit einer leeren Jekyll-Vorlage zu füllen. Eine andere Möglichkeit ist es, deine eigenen statischen Seiten auf einen primären oder master-Branch zu schreiben.
3. Eine benutzerdefinierte Domain kannst du ebenfalls auf der Seite „Create a Repository“ hinzufügen. Außerdem gibt es einige weitere Schritte, um deine eigene Domain hinzuzufügen. Zum Beispiel kannst du deinem Domain-Service-Provider die IP-Adresse von GitHub Pages mitteilen. Anschließend musst du nur einen Moment warten, bis die Seiten ausgefüllt sind. Eine detaillierte Anleitung hierzu, fondest du auf der Hilfeseite von GitHub.
Darüber hinaus rate ich, HTTPS einzusetzen, da es deine Website sicherer macht und Vertrauen bei deinen Benutzern schafft. Außerdem wird GitHub dieses Zertifikat kostenlos für dich generieren.
4. Sobald du dein Repository auf diese Weise eingerichtet hast, sucht GitHub Pages nach einer index.html-Datei – entweder im Stammverzeichnis des Projekts oder in einem docs-Ordner. Mit dieser index.html-Datei in deinem für die Bereitstellung ausgewählten Branch ist deine Website live.
5. Um Aktualisierungen auf deiner Seite bereitzustellen, musst du lediglich Commits in dein Main-Branch einfügen, entweder direkt oder über eine Pull-Anfrage.
Die Schattenseite von GitHub Pages
Wichtig zu wissen ist, dass GitHub Pages auch einige gewichtige Nachteile hat. Erstens bist du für die Versionskontrolle an GitHub als Plattform gebunden. Es würde nicht viel Sinn ergeben, deinen Code zu einem anderen Dienst wie BitBucket zu übertragen, weil du dann nicht in der Lage wärst, sie auf GitHub Pages zu pushen. Außerdem bist du auf eine GitHub Pages-Webseite pro Konto beschränkt, wobei es sich um eine statische Website handeln muss.
Darüber hinaus ist GitHub Pages ein eher schlichter Weg für die Online-Bereitstellung. Es gibt keine integrierte CI-Pipeline und erst wenn du eine Seite neu lädst werden deine Bearbeitungen sichtbar und du kannst sie prüfen.
Das einseitige Setup und die automatisierte HTTPS-Generierung bieten selbstverständlich auch einige Vorteile. Wer dennoch nach einer Alternative sucht, findest im folgenden Abschnitt eine Anleitung für das Bereitstellen einer Webseite mit Netlify.
Kennst du schon unsere Ressourcen Sammlung für Partner?
2. Ich habe eine statische Website oder eine Website, die mit einem entsprechenden Generator erstellt wurde: Netlify
Der erste und auffälligste Vorteil der Verwendung von Netlify gegenüber GitHub Pages ist die Option zur Auswahl des Speicherorts deines Git-Repository. Jedes der drei Systeme, GitHub, GitLab oder Bitbucket, kann vollständig integriert werden. In diesem Tutorial bleibe ich bei GitHub als meinem Git-Cloud-Speicherdienst.
Bereitstellung deiner ersten Website mit Netlify
1. Erstelle zunächst ein Konto bei Netlify. Anschließend bist du nur noch wenige Schritte von einem bereitgestellten Artefakt entfernt.
2. Wähle im Dashboard die Option „Add a Site“, wonach du aufgefordert wirst, deinen Git-Repository-Speicheranbieter auszuwählen.
3. Nachdem du den Bildschirmanweisungen gefolgt bist, um einen Git-Anbieter mit deinem Netlify-Konto zu verbinden, musst du ein Repository für die Bereitstellung auswählen. Du hast die Möglichkeit, die Netlify-Berechtigungen für alle Repositorys in deiner Organisation oder für bestimmte, benannte Repositorys zu aktivieren. Aus Sicherheitsgründen füge ich Repositorys normalerweise nur einzeln hinzu.
4. Netlify bietet dir noch einige weitere Optionen zur Auswahl, beispielsweise welchen Branch und welches Verzeichnis du bereitstellen möchtest.
5. Ich empfehle, eine Pull- oder Merge-Anfrage von GitHub aus (oder wo auch immer sich dein Repository befindet) zu stellen, um einen Blick auf die automatisch eingeschlossenen Optionen für die kontinuierliche Integration (CI) zu werfen. Diese CI ist für den Anfang ziemlich einfach. Allerdings hast du die Möglichkeit, mit Netlify selbst ein recht robustes System zu erstellen.
6. Damit ist deine Website bereitgestellt. Netlify bietet dir standardmäßig eine eindeutige Subdomain zur Anzeige deiner App. Du kannst aber auch eine persönliche Domain angeben. Dies kannst du über den Tab „Settings“ auf deinem Dashboard tun.
Ich benutze Netlify für meine Variante des Gatsby Blog Starters, da es hier direkt in der Dokumentation einen „Deploy to Netlify“-Button gibt. Ich schätze Netlify wegen der geringen Kosten (kostenlos für meine Ebene), der integrierten CI und der automatisierten Bereitstellung, wenn ich Pull-Anfragen zusammenführe. Es bietet auch Unterstützung für Funktionen als Service, Formularbearbeitung und Split-Tests sowie für jeden Generator statischer Websites, den du verwenden möchtest.
Bei Sparkbox haben wir Netlify kürzlich für einige Kunden-Websites eingesetzt, wobei der Prozess durchweg positiv war. Es ist eine hervorragende Option für statische oder Frontend-Projekte. Für Apps, die ein Server-Side-Piece erfordern, verwenden wir hingegen Heroku.
Lesetipp: Aus dem Ladengeschäft in den Onlineshop: 12 Tipps für die Zusammenarbeit mit E-Commerce-Einsteigern
3. Ich möchte die Vorteile einer individuelleren Pipeline nutzen: Heroku
Sowohl Heroku als auch Netlify erfüllen die Anforderungen an qualitativ hochwertige Bereitstellungspipelines; Heroku ist jedoch unbestreitbar robuster.
Heroku bietet eine kostenlose Version mit Apps, die nach 30 Minuten in den Schlaf-Modus wechseln – perfekt für Entwickler, die gerne mit Tools experimentieren, bevor sie dafür bezahlen.
Darüber hinaus ist es hilfreich, dass Heroku eine Hosting-Option auf „Hobby“-Level für 7 US-Dollar pro Monat anbietet. Diese kann bereits einige Kundenanforderungen erfüllen.
Die „Hobby“-Ebene ist in der Regel für alles notwendig, was über Testanwendungen hinausgeht. Heroku bietet mehrere Bereitstellungspfade. So kannst du deine Seite mit GitHub, Command Line Git oder Docker bereitstellen. Aus Gründen der Einheitlichkeit werde ich die Option mit dem geringsten Aufwand und den geringsten Anforderungen durchgehen – mit GitHub.
Die besten Pipelines erfordern nicht, dass unsere Teams über die Bereitstellung nachdenken müssen. Stattdessen entscheidet das Team einfach, ob der Code bereit ist, über einen Push an GitHub (oder deinen bevorzugten Git-Hosting-Service) freigegeben zu werden. Die Pipeline kümmert sich um den Rest.
Bereitstellung deiner ersten Website mit Heroku
1. Erstelle ein Konto bei Heroku. Wähle auf der Hauptseite „New“ und anschließend „Create new app.“
2. Wähle einen eindeutigen Namen für deine Anwendung und fahre mit „Create App“ fort.
3. Du kannst dich dafür entscheiden, eine Pipeline für deine App zu erstellen, die es dir ermöglicht, mehrere Apps zu verbinden und Review-Apps zu erstellen. In diesem Beitrag werde ich mich vorerst auf die Bereitstellung unserer Website ohne die Angabe einer Pipeline konzentrieren. Wähle „GitHub“ aus den Optionen für die Bereitstellungsmethode aus und suche nach dem Repository, das du bereitstellen möchtest. Klicke dann auf „Connect.“
Hinweis: Möglicherweise musst du einen OAuth-Token für dein GitHub-Konto erstellen.
Wenn GitHub richtig konfiguriert ist, sollte die Rückmeldung des Anbieters dich schnell erreichen – in etwa 12 Sekunden. Wenn du möchtest, aktivierst du die automatische Bereitstellung, indem du den gewünschten Branch auswählst und auf die entsprechende Schaltfläche klickst. Automatische Bereitstellungen halten deine App auf dem neuesten Stand, wenn du dem ausgewählten Branch neuen Code hinzufügst.
4. Unabhängig davon, ob du dich für eine automatische Bereitstellung entscheidest oder nicht, muss deine erste Bereitstellung manuell erfolgen. Glücklicherweise musst du nur den Branch auswählen, den du live schalten möchtest, und dann „Deploy Branch“ wählen.
5. Nach ein paar Sekunden solltest du deine App unter der Heroku-Domain live betrachten können. Heroku ist im Allgemeinen klug genug, um zu bestimmen, welche Aufgaben ausgeführt werden sollen. Wenn du jedoch bestimmte oder benutzerdefinierte Build-Aufgaben ausführen möchtest, kannst du diese in den Einstellungen deiner App anpassen. Das Konfigurieren deiner eigenen benutzerdefinierten Domain ist im Einstellungsmenü ebenfalls verfügbar.
Profi-Tipp: Auf der Seite „Activity“ (Aktivität) im Dashboard der App kannst du Rollbacks mit nur einem Klick einsehen. Unter dem Schalter „More“ (Mehr) kannst du auch Serverprotokolle einsehen und Konsolenbefehle ausführen.
Heroku sollte für die meisten deiner Bedürfnisse als Entwickler funktionieren, einschließlich deiner Shopify-Websites, abhängig von der gewählten Preisklasse und der Anzahl der von dir „gewünschten „Dynos.“ Für E-Commerce-Anwendungen mit einer Vielzahl an Funkionen oder Apps mit einem dedizierten Produktteam wirst du dir jedoch eventuell ein umfangreicheres System wünschen.
Lesetipp: Neues Design für Onlineshops: Wie du Shopify Themes mit CSS gestalten kannst.
4. Ich bin ein selbstbewusster Entwickler und die bereitzustellende Website ist ziemlich groß: AWS, Azure, Low End Box und DigitalOcean
Das E-Commerce-Team, mit dem ich zusammenarbeite, verwendet einen großen, skalierbaren Cloud-Hosting-Service, da die Anforderungen an eine voll funktionsfähige Webanwendung sehr hoch sind. Dabei handelt es sich um eine riesige, markenübergreifende Website mit Tausenden von einzigartigen Datenszenarien. In dieser Größenordnung stehen mehrere Services zur Verfügung. Nachfolgend einige der beliebtesten, die derzeit verfügbar sind:
- Amazon Web Services (AWS) hat in den letzten Jahren große Wellen geschlagen, da es zahlreiche Hosting-Optionen und eine in hohem Maße anpassbare Erfahrung bietet.
- Microsofts Azure ist ebenfalls sehr beliebt, denn sein Pay-as-you-go-Preismodell und seine erstklassige Skalierbarkeit machen es zu einer einfachen Wahl.
- Wenn du auf der Suche nach einem Bare-Bones-Hosting und supergünstigen Preisen bist, bietet Low End Box genau das.
- Ich persöblich habe eine Verbundenheit zum kostenpflichtigen DigitalOcean, einem der kleineren Fische in dieser Liste. Die umfangreiche Dokumentation und die einladende Community machen mir die Entscheidung für DigitalOcean leicht. Daher werde ich in diesem Beitrag erklären, wie du ein „Droplet“ (einen virtueller Server) auf DigitalOcean einrichtest.
Einrichtung für die Bereitstellung mit DigitalOcean
1. Du kannst dich bei DigitalOcean über GitHub, Google oder einfach durch die Erstellung eines Kontos anmelden. Ich werde mich über GitHub anmelden. Leider wirst du, sobald du diesen einfachen Schritt hinter dich gebracht hast, auf eine Bezahlschranke stoßen. DigitalOcean bietet derzeit keine kostenlose Stufe für seine Dienste an. Das Hosten eines einzelnen Droplets kostet ungefähr 5 US-Dollar pro Monat.
2. Nachdem du die Zahlung geregelt hast, werden dir einige Fragen gestellt. Hier gibst du deiner App einen Namen und sie wird standardmäßig mit einigen Funktionen ausgerüstet. Ich habe einige der folgenden Fragen übersprungen und bin direkt zum Dashboard gegangen.
Hinweis: In DigitalOcean ist die „App“ das, was wir unsere komplette Pipeline nennen. In der Zwischenzeit ist ein „Droplet“ der virtuelle Server, mit der deine App ausgeführt wird, wie ein digitaler Computer auf einem Server.
3. In diesem Fall stelle ich eine Node.js-App bereit. Also habe ich auf die Option „Node“ geklickt. Damit erhalte ich ein vorab ausgefülltes Droplet, auf das ich auf der nächsten Seite klicken kann.
4. Du kannst durch die Optionen für die Plan-/Speichergröße, den Serverstandort, die Authentifizierung etc. scrollen. Auch hier musst du dein Droplet benennen. Ich habe mein Droplet einfach nach meiner App benannt. Wenn du fertig bist, wählst du die Schaltfläche „Droplet erstellen“, um fortzufahren.
Hinweis: Für den langfristigen Gebrauch solltest du das SSH (Secure Shell Protocol) einrichten, um eine starke und einfache Möglichkeit für den Dienst zur Identifizierung deines Servers zu schaffen. DigitalOcean bietet in seiner Dokumentation ein ausführliches Tutorial zum Einrichten von SSH an.
5. Von diesem Punkt an wirst du von deiner lokalen Konsole aus SSH in den virtuellen Server einbinden oder die In-Browser-Konsole verwenden, um dein Projekt von GitHub (oder wo auch immer sich dein Repository befindet) auf deinen virtuellen Server zu klonen.
Installiere Abhängigkeiten gemäß deinen Build-Anforderungen und starte deine App. Du solltest in der Lage sein, deinen Localhost per cURL abzufragen und eine Rückgabe mit Inhalten von der Homepage deiner App zu erhalten. Wenn deine Website beispielsweise auf Port 8000 ausgeführt wurde, könntest du curl http://localhost:8000/ ausführen und eine Antwort erhalten.
Hier gibt es noch ein wenig mehr zu tun, um deine Website vollständig in Betrieb zu nehmen, beispielsweise die Einrichtung eines Proxy-Servers (wie Nginx). Es gibt jedoch viel mehr Anpassungsmöglichkeiten und Nuancen, als ich jemals in einem einzigen Blogbeitrag darstellen könnte. Ich empfehle daher den DigitalOcean-Blog und deren kürzlich aktiv gewordene Lernplattform Scotch.io, um ausführlichere Tutorials von diesem Punkt an zu erhalten.
Sobald deine App auf dem Server läuft, kannst du auf sie zugreifen, indem du die Server-IP in dein Browserfenster eingibst. Benutzerdefinierte Domains sind auf DigitalOcean ebenfalls verfügbar und die Einrichtung ist den bisherigen Diensten auf der Liste sehr ähnlich. Für die meisten kleinen Shopify Apps wirst du jedoch wahrscheinlich keinen Vollfunktionsdienst wie DigitalOcean benötigen.
Welche Option ist die beste für meine Shopify App?
In diesem Beitrag hast du viele Optionen kennengelernt, deine Webseite oder App bereitzustellen. Welche die beste ist, hängt von den Bedürfnissen von dir als Entwickler und jenen der Applikation oder Seite ab, die du bereitstellen möchtest.
Für die schnellste, günstigste und funktionsreichste Option zur Bereitstellung und zum Hosting deiner Shopify Apps empfehle ich Heroku. Obwohl mein Tutorial die browserbasierten GitHub-Bereitstellungen auf Heroku darstellt, hast du auch die Möglichkeit, deine Seite über das Heroku CLI bereitzustellen, was in einigen Fällen hilfreich sein kann.
In beiden Fällen bietet Shopify ein Ruby-Gem namens Shipit-Engine, das deine Shopify-Bereitstellungen schnell und sorgenfrei macht. Alles, was du brauchst, ist ein GitHub-Repository, einen Branch mit etwas Code und eine Bereitstellungsumgebung wie Heroku. Schaue dir also das Shopify-Repository an und folge der Readme-Datei, um das „Shiplt Engine"-Gem zu installieren. Danach wird deine Seite oder App du im Handumdrehen online sein.
Und das ist es auch schon. Es gibt zahlreiche Hosting- und Bereitstellungsdienste, die dir zur Verfügung stehen, die hier vorgestellten sind einige meiner Favoriten. Wofür auch immer du dich entscheidest, empfehle ich dir, deine aktuellste Codebase-Website in einem Versionskontrollspeicherdienst wie GitHub, GitLab oder Bitbucket sicher aufzubewahren.
Ein Repository bietet die Möglichkeit, die Bereitstellungsstrategie in Zukunft schnell zu ändern. Wenn dein Traffic steigt, wirst du lernen und entsprechende Anpassungen vornehmen, um deinen Kunden und Benutzern den bestmöglichen Service zu bieten.
Hoffentlich habe ich dich mit diesem Wissen über eine Vielzahl von Möglichkeiten ausgestattet, um dich darauf vorzubereiten, zu gegebener Zeit gute Entscheidungen zu treffen. Gutes Gelingen.
Dieser Beitrag von Catherine Meade erschien zuerst im englischen Shopify Blog und wurde übersetzt.
