Front-End-Architektur: So hosten Sie Ihre Web-App kostenlos

Ich arbeite an einem persönlichen Projekt, das Benutzern dabei helfen soll, Musikkonzerte in Chicago zu finden. Ein bemerkenswerter Aspekt dieses Projekts aus architektonischer Sicht ist, dass die gesamte Webanwendung völlig kostenlos gehostet wird.

Das Bild unten zeigt die Architekturkomponenten:

Haftungsausschluss: Ich werde von keinem der hier erwähnten Dienste gesponsert; Ich hebe sie einfach deshalb hervor, weil ich sie nützlich fand.

Projektcodebasis-Repository

GitHub ist die beliebteste Plattform zum kostenlosen Hosten Ihrer Codebasis. Ich habe auch Alternativen wie Bitbucket und GitLab ausprobiert und sie funktionieren genauso gut. Ehrlich gesagt reicht jede dieser Optionen aus – wählen Sie einfach eine aus und machen Sie weiter, ohne darüber nachzudenken.

Front-End-Workflow-Orchestrierung

In einem professionellen Umfeld arbeiten Sie normalerweise direkt mit AWS oder einem anderen Cloud-Dienstanbieter zusammen und haben so die volle Kontrolle über Bereitstellungen, Benachrichtigungen und Überwachung. Dieser Ansatz erfordert jedoch mehr Zeit und Aufwand. Glücklicherweise vereinfachen Dienste wie Netlify und Vercel diesen Prozess, indem sie einen Großteil der Reibung beseitigen. Sie ermöglichen eine schnelle Bereitstellung, sind jedoch von ihrem Ökosystem abhängig. Sobald Ihre Website erheblichen Traffic verzeichnet (Tausende Besuche), empfiehlt es sich, die Limits für die kostenlose Stufe zu überprüfen, um unerwartete Kosten zu vermeiden. Für persönliche Projekte habe ich diese Dienste bisher mehrmals ohne Probleme genutzt.

Dennoch bietet Netlify mehrere sofort einsatzbereite Funktionen. Im Architekturbild werden drei der Komponenten automatisch von Netlify bereitgestellt:

• GUI-Integration:

Mit der GUI von Netlify können Sie Ihr Codebasis-Repository integrieren – in meinem Fall GitHub. Netlify versteht die Standardeinstellungen für eine Next.js-Anwendung und verwendet sie, um den Code nahtlos bereitzustellen.

• Statisches Site-Hosting:

chicagomusiccompass.com ist eine statische Webanwendung, das heißt, es ist kein Server beteiligt. Wenn eine Bereitstellung ausgelöst wird, generiert die App statische Assets (HTML, JS und CSS), die in einem S3-Bucket gespeichert werden. Netlify übernimmt dann die Konfiguration mit CloudFront und stellt Ihnen eine gebrauchsfertige URL zur Verfügung.

• Lambda-Funktionen:

Statische Websites müssen häufig Daten von anderen Domänen abrufen. Dies erfordert in der Regel einen Proxy, ein sogenanntes „Back End for Front End“ (BFF). Clientanwendungen haben standardmäßig keinen Zugriff auf andere Domänen, es sei denn, der Server erlaubt dies ausdrücklich über CORS, was nicht immer üblich ist. Für dieses Projekt verwende ich einen Proxy, um eine JSON-Datei aus einer anderen Domäne abzurufen.

Netlify verwaltet die gesamte Bereitstellungsorchestrierung und stellt eine URL (Subdomain) bereit, die Sie für eine benutzerfreundliche URL mit Ihrer Domain verknüpfen können.

Dies ist zum Beispiel die Netlify-URL für mein Projekt:

https://clinquant-chebakia-f64a5b.netlify.app/

Ich habe dann meine Domain mit einem CNAME-Eintrag konfiguriert, um www auf die Netlify-URL zu verweisen:

Wenn ein Benutzer https://www.chicagomusiccompass.com/ besucht, löst DNS die Domain in ihr endgültiges Ziel auf – die Netlify-URL ?.

Während hier viel passiert, wird das meiste davon über Dashboards (GUI) konfiguriert. Der Schlüssel liegt darin, zu verstehen, wie alles zusammenhängt; Der Rest ist nur das Navigieren in der Benutzeroberfläche.

Automatisierte geplante Aufgaben (Cron-Jobs)

cron-job.org ist ein Dienst, der es Ihnen ermöglicht, Cron-Jobs kostenlos auszuführen. So funktioniert es in diesem Setup:

a) Netlify Deploy Hook:
Netlify bietet einen konfigurierbaren Webhook (einen URL-Endpunkt), der bei Auslösung die Site erneut bereitstellt. Dadurch wird sichergestellt, dass chicagomusiccompass.com bei Bedarf automatisch aktualisiert werden kann.

b) cron-job.org-Integration:
Mit cron-job.org können Sie einen Cron-Job planen – in diesem Fall so einstellen, dass er täglich ausgeführt wird. Der Job löst einfach den Netlify-Bereitstellungs-Hook aus und veranlasst Netlify, die Site jeden Tag neu bereitzustellen (zu aktualisieren).

Hinweis: Während chicagomusiccompass.com auch über Back-End-Komponenten verfügt, konzentriert sich dieser Beitrag ausschließlich auf die Front-End-Architektur.

Zusammenfassung

chicagomusiccompass.com ist eine Next.js-Anwendung, die beim Erstellen eine statische Site (kein Server) zusammen mit einigen Lambda-Funktionen generiert. Das GitHub-Repository ist in Netlify integriert, sodass jeder Push an das Repository eine neue Bereitstellung auslöst. Dieser Prozess generiert eine neue Version der statischen Site und aktualisiert die Lambda-Funktionen. Netlify übernimmt die Bereitstellung dieser Dateien und stellt automatisch die erforderliche Netzwerkinfrastruktur bereit, um den Zugriff auf die Webanwendung über eine Subdomain zu ermöglichen. Darüber hinaus habe ich die benutzerdefinierte Domäne chicagomusiccompass.com so konfiguriert, dass sie auf Netlify verweist. Die Website wird durch einen täglichen Cron-Job auf dem neuesten Stand gehalten, der einen Netlify-Bereitstellungs-Hook auslöst.

Die Seite läuft schon seit ein paar Monaten und erhält derzeit nicht viel Traffic, aber was die Infrastrukturkosten angeht, zahle ich keinen Cent.

Im professionellen Umfeld wähle ich je nach Projektanforderungen möglicherweise eine ähnliche Lösung, insbesondere in der Anfangsphase. Später könnte ich bestimmte Komponenten migrieren, wenn das Unternehmen wächst und sich die Anforderungen ändern.

Front-End-Architektur ist heutzutage ziemlich spannend geworden, insbesondere wenn Sie kostenlose Dienste nutzen können. Bedenken Sie jedoch, dass wenn ein Service kostenlos ist, Sie möglicherweise das Produkt sind.

Das obige ist der detaillierte Inhalt vonFront-End-Architektur: So hosten Sie Ihre Web-App kostenlos. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!