Wie man den perfekten Tech-Stack für ein SaaS-Produkt aufbaut

Aufbau des perfekten Tech-Stacks für ein SaaS-Produkt

• Der perfekte Tech-Stack für ein SaaS-Produkt erfordert minimale anfängliche Arbeit und die Nutzung erstklassiger Lösungen, die derzeit verfügbar sind. Dazu gehören die Verwendung von verwalteter Cloud-Infrastruktur, um sich keine Sorgen über Server machen zu müssen, und die Verwendung von vorgefertigten UI-Bibliotheken, um nicht alles von Grund auf neu gestalten zu müssen.

• Die Einrichtung dieses Tech-Stacks erfolgt komplett kostenlos. Es handelt sich um einen vollständig serverlosen Tech-Stack, was bedeutet, dass keine Serverbereitstellung oder -verwaltung erforderlich ist. Cloud-Funktionen werden verwendet, um Anfragen vom Client zu verarbeiten, und es wird eine verwaltete Datenbank genutzt, bei der nur für die Anzahl der Lese- und Schreibvorgänge bezahlt wird.

• Die gesamte Infrastruktur wird mit dem Tool Pulumi auf AWS aufgebaut. Dies ermöglicht die Einrichtung eines vollständigen Benutzer-Login-Systems mit Benutzerauthentifizierung und einer GraphQL-API zur Abfrage von Daten. Dadurch entfällt das aufwendige Einrichten und Verwalten von Servern, da AWS und Pulumi alles übernehmen.

• Für die Datenbank wird dynamodb verwendet, eine verwaltete Datenbank mit schemaloser Struktur, die es ermöglicht, Einträge zu indizieren und gleichzeitig gesamte Dokumente in einem einzigen Feld zu speichern, ohne das gesamte Schema im Voraus definieren zu müssen. Die Erweiterung der Struktur der Tabelle ist somit problemlos möglich.

Aufbau des perfekten Tech-Stacks für ein SaaS-Produkt

Einrichten eines Full-Stack-Serverless-Apps

• Um Daten abzurufen und zu verarbeiten, benötigen wir eine API. Ich bin ein großer Fan von GraphQL, daher werden wir einen Dienst namens AppSync verwenden, der eine verwaltete GraphQL-Schicht ist. Wir müssen keine Server betreiben, sondern lediglich ein GraphQL-Schema definieren und AppSync mitteilen, wie eingehende Anfragen auf die Daten aus der Datenbank abgebildet werden sollen.

• Für die sichere Anmeldung an unserer Anwendung werden wir Cognito verwenden. Die Benutzerauthentifizierung zu handhaben, ist sehr kompliziert, und ich würde nicht empfehlen, Zeit damit zu verbringen, es selbst einzurichten. Cognito übernimmt das für uns und spielt sehr gut mit AppSync zusammen, ohne dass wir viel konfigurieren müssen.

• Für das Front-End werden wir React verwenden, genauer gesagt Next.js. Außerdem werden wir eine UI-Bibliothek verwenden, um uns eine Vielzahl von ansprechenden Komponenten zur Verfügung zu stellen. Ich bin ein großer Fan von Chakra UI, daher werden wir uns dafür entscheiden.

• Um das Front-End mit dem Back-End zu verbinden, werden wir Amplify verwenden. Amplify ist ein CLI-Tool von AWS, das uns auch einen Hosting-Service zur Verfügung stellt, den wir nutzen können. Amplify wird uns besonders unterstützen, wenn Benutzer sich in der App anmelden. Außerdem enthält es nützliche Dienstprogramme zum Abrufen von Daten aus unserer GraphQL-API.

• Zum Schluss werden wir ein Tool namens Pulumi verwenden, um die Infrastruktur in der Cloud einzurichten. Da wir GitHub verwenden, um den Code zu speichern, werden wir eine kontinuierliche Bereitstellung mithilfe von GitHub Actions einrichten. Und nicht zu vergessen, der gesamte Stack wird in TypeScript geschrieben sein, also eine Sprache überall.

Einrichten eines Full-Stack-Serverless-Apps

Einrichten einer Serverless AWS React-Anwendung mit Pulumi

• Um eine Serverless AWS React-Anwendung mit Pulumi einzurichten, ist es notwendig, zunächst ein Konto auf AWS anzulegen und die AWS CLI auf dem lokalen Rechner zu konfigurieren.

• Nach der Anmeldung auf pollumi.com kann ein neues Projekt mit AWS und TypeScript als Standardoption erstellt werden. Dabei wird ein Ordner für das Backend angelegt und die notwendigen Ressourcen wie eine DynamoDB-Tabelle und AppSync eingerichtet.

• Es ist möglich, eine GraphQL-Schema-Datei für AppSync zu erstellen und die erforderlichen Lambda-Funktionen sowie Resolver einzurichten. Pulumi bietet eine einfache und effiziente Methode zur Verwaltung von Ressourcen.

• Außerdem können benutzerdefinierte Funktionen für die Verarbeitung von Anfragen an DynamoDB und die Reaktion des Lambda-Servers eingebunden werden. Abschließend wird die Konfiguration in Pulumi abgeschlossen und die Anwendung ist einsatzbereit.

Einrichten einer Serverless AWS React-Anwendung mit Pulumi

Einrichten von Cognito und Verknüpfung mit der Frontend-Anwendung

• Die Einrichtung von Cognito umfasst einen Identitätspool, einen Benutzerpool und einen Benutzerpool-Client. Diese drei Komponenten sind für die Benutzerauthentifizierung unerlässlich und bilden den komplexen Teil.

• Der Benutzerpool enthält Konfigurationen wie Passwortanforderungen und Wiederherstellungsmöglichkeiten für Benutzerkonten. Das gleiche gilt für den Benutzerpool-Client. Zudem wird der Identitätspool konfiguriert, um den zuvor definierten Benutzerpool-Client zu verwenden.

• Des Weiteren wird eine Rolle und Richtlinie für authentifizierte Benutzer eingerichtet, um AWS mitzuteilen, auf welche Ressourcen diese Benutzer zugreifen dürfen. Anschließend werden die IDs für Benutzerpool, Benutzerpool-Client und Identitätspool exportiert.

• Nachdem die vollständige Backend-Definition definiert ist, wird der Befehl 'pull me up' ausgeführt, der die Einrichtung all dieser Komponenten in der Cloud übernimmt. Nach erfolgreicher Einrichtung ist die Backend-Infrastruktur betriebsbereit.

• In der AWS-Konsole wird bestätigt, dass die Tabelle, der Benutzerpool und das AppSync mit dem Schema vorhanden sind. Somit ist das gesamte Backend einsatzbereit und kann bei Bedarf mithilfe des Befehls 'pull me up' für neue Projekte genutzt werden.

Einrichten von Cognito und Verknüpfung mit der Frontend-Anwendung

Implementierung der Authentifizierung und Nutzung von Chakra UI-Layouts

• Die Implementierung der Authentifizierung beginnt mit der Bestätigungscodes, die per E-Mail gesendet wird. Anschließend erfolgt die Weiterleitung auf die Startseite, auf die Benutzer nach der Anmeldung geleitet werden. Da ich von Natur aus ein fauler Mensch bin und wir Chakra UI verwenden, besuchen wir einfach chakratemplates.dev, wo wir alle diese erstaunlichen vorgefertigten Vorlagen auf Basis von Chakra UI finden.

• Bei den Formularen unter der Authentifizierung sammeln wir nun die erforderlichen Seiten schnell zusammen. Sobald die Formulare fertig sind, verwenden wir nun einfach das Amplify-Modul zur Authentifizierung. Es ist erstaunlich einfach, wie wir uns mit Amplify Inkognito um die komplexen Anmeldeflows kümmern können.

• Abschließend richten wir den Apollo-Client mit Amplify ein, damit wir GraphQL-Abfragen durchführen können. Wir verwenden Apollo Link, um eine benutzerdefinierte Fetch-Funktion für den Apollo-Client zu erstellen, die den JWT-Token an den GraphQL-Endpunkt übergibt, den wir unter Verwendung von AppSync eingerichtet haben.

• Mit all diesen Schritten ist die Seite nun einsatzbereit. Nach der Anmeldung wird eine Bestätigungs-E-Mail gesendet, und anschließend können wir uns anmelden und mit dem Aufbau der eigentlichen App beginnen. Es gibt auch einen Repository auf GitHub, das den gesamten Code und hilfreiche Handbuchanleitungen enthält.

• Es handelt sich um eine technische Videoanleitung, in der ich auch über Marketing, Finanzen und die Generierung eines Technologieunternehmens online spreche. Wenn Sie die Bereitstellung dieser Informationen schätzen, lassen Sie mir ein Like da und bewerten Sie das Repository auf GitHub. Sie können mich auch gerne bei Fragen über Twitter kontaktieren.

Implementierung der Authentifizierung und Nutzung von Chakra UI-Layouts

Conclusion:

Der perfekte Tech-Stack für ein SaaS-Produkt bietet minimale anfängliche Arbeit und erstklassige Lösungen. Mit diesem Leitfaden können Sie einen vollständig serverlosen und effizienten Tech-Stack für Ihr SaaS-Produkt aufbauen.