Cloud-Architektur Teil 2: Super SaaS mit AWS Amplify und Next.js

Herzlich willkommen zum zweiten Teil unserer Reise in die Welt der Cloud-Architektur. Im ersten Teil haben wir die Grundlagen von IaaS, PaaS und SaaS mit Fokus auf unterschiedliche Cloud Plattformen erkundet. Jetzt begeben wir uns in die Praxis und erstellen eine Webseite mit Hilfe von AWS Amplify und Next.js. Unser erster praktischer Ausflug in die Welt von Software as a Service (SaaS) auf der AWS-Cloud.

Die Wahl der Werkzeuge als SaaS für Webseiten

Bevor wir in die Details einsteigen, werfen wir einen kurzen Blick auf die Werkzeuge, die wir verwenden werden:

AWS Amplify

AWS Amplify ist eine Entwicklungsplattform, die es uns ermöglicht, Web- und Mobilanwendungen schnell zu erstellen und zu deployen. Im Hintergrund laufen “Serverless” Komponenten, um die wir uns dank des SaaS-Modells jedoch nicht kümmern müssen. Die Plattform unterstützt verschiedene Frontend-Frameworks, und wir haben uns für Next.js entschieden.

Next.js

Next.js ist ein React-Framework, das die Entwicklung von React-basierten Webanwendungen erleichtert. Es bietet Funktionen wie Server-Side Rendering (SSR) und Static Site Generation (SSG), was zu schnelleren Ladezeiten und einer besseren Suchmaschinenoptimierung führt.

GitHub für Deployment

Um unsere Arbeit zu verfolgen, zu teilen und automatisch auf AWS Amplify zu deployen, nutzen wir GitHub als Git Repository. Das erleichtert die Zusammenarbeit und Versionskontrolle.

Schritt-für-Schritt-Anleitung

1. AWS Amplify-Setup

Beginnen wir mit der Konfiguration von AWS Amplify. Wir installieren das Amplify CLI und initialisieren ein neues Amplify-Projekt. Hier können wir den Anweisungen folgen, um unsere AWS-Ressourcen zu konfigurieren.

npm install -g @aws-amplify/cli
amplify configure
amplify init

2. Next.js-Projekt erstellen

Als nächstes erstellen wir ein neues Next.js-Projekt. Wir können dies mit dem Befehl npx create-next-app tun.

npx create-next-app my-amplify-app
cd my-amplify-app

3. Amplify in das Next.js-Projekt integrieren

Integrieren wir Amplify in unser Next.js-Projekt.

amplify add hosting

Hier wählen wir “Manual Deployment” aus und folgen den Anweisungen. Nachdem die Konfiguration abgeschlossen ist, führen wir amplify publish aus, um unsere Webseite zu deployen.

4. Authentifizierung hinzufügen

Lass uns die Authentifizierung hinzufügen, um einen geschützten Bereich auf unserer Webseite zu erstellen.

amplify add auth

Wir können die Standardeinstellungen beibehalten und mit amplify publish die Änderungen deployen.

5. Daten mit GraphQL verwalten (optional)

Amplify bietet auch die Möglichkeit, Daten über GraphQL zu verwalten. Wir können eine einfache Datenquelle erstellen und sie in unsere Next.js-Anwendung integrieren.

amplify add api

Folge den Anweisungen, um eine GraphQL-API hinzuzufügen. Nach dem Deployment können wir GraphQL-Abfragen in unserer Next.js-Anwendung verwenden.

6. Automatisches Deployment mit GitHub

Um GitHub für das automatische Deployment zu nutzen, gehen Sie wie folgt vor:

GitHub Repository erstellen

Erstelle ein neues Repository auf GitHub. Gehe auf die GitHub-Website, logge dich ein, klicke auf das “+” in der oberen rechten Ecke und wähle “New Repository”.

Repository mit lokalem Projekt verknüpfen

Gehe in deinem lokalen Projektverzeichnis in die Konsole und führe die folgenden Befehle aus:

git init
git add .
git commit -m "Erste Commit-Nachricht"
git remote add origin <GitHub-Repository-URL>
git push -u origin master

AWS Amplify App mit GitHub verbinden

1. Gehe zur AWS Amplify Console.
2. Klicke auf “Connect App”.
3. Wähle “GitHub” als Repository-Provider aus.
4. Autorisiere Amplify, auf dein GitHub-Repository zuzugreifen.
5. Wähle das entsprechende Repository aus.
6. Wähle den Branch aus, den Amplify automatisch deployen soll.
7. Klicke auf “Next” und dann auf “Save and Deploy”.

Ab jetzt wird Amplify automatisch bei Änderungen in deinem GitHub-Repository deployen.

Erweiterung der Dokumentation

Um deine Anwendung und den Entwicklungsprozess besser zu dokumentieren, empfehle ich, die README.md-Datei in deinem GitHub-Repository zu erweitern. Hier sind einige Abschnitte, die du hinzufügen kannst:

Lokale Entwicklung

Beschreibe, wie Entwickler Ihre Anwendung lokal einrichten können. Füge Befehle für die Installation von Abhängigkeiten und den Start der Entwicklungsserver hinzu.

Deployment

Gebe klare Anweisungen, wie die Anwendung auf AWS Amplify deployt wird. Das kann beispielsweise amplify publish oder andere Schritte umfassen.

Authentifizierung und Autorisierung

Wenn deine Anwendung Authentifizierung und Autorisierung verwendet, gebe einen Überblick über den Prozess und wie Benutzerkonten verwaltet werden.

Datenmanagement

Erkläre, wie Daten in deiner Anwendung über GraphQL verwaltet werden. Füge Beispiele für GraphQL-Abfragen und Mutationen hinzu.

Erweiterungen

Liste mögliche Erweiterungen und Verbesserungen auf, die in Zukunft hinzugefügt werden können. Dies könnte die Integration weiterer AWS-Services, die Optimierung der Benutzeroberfläche oder die Implementierung neuer Funktionen umfassen.

Automatisches Deployment mit GitHub

Gebe in der README.md klare Anweisungen zur Verknüpfung deines GitHub-Repositories mit AWS Amplify. Beschreibe den Prozess, wie Änderungen im Repository automatisch zu Deployments auf Amplify führen.

## Automatisches Deployment

Unsere Anwendung wird automatisch auf AWS Amplify deployt, wenn Änderungen im GitHub-Repository vorgenommen werden. Folgen Sie diesen Schritten, um das automatische Deployment einzurichten:

1. Erstellen Sie ein [GitHub Repository](https://github.com/new).
2. Verknüpfen Sie Ihr lokales Projekt mit dem GitHub-Repository:

bash
git init
git add .
git commit -m "Erste Commit-Nachricht"
git remote add origin
git push -u origin master

3. Gehen Sie zur [AWS Amplify Console](https://console.aws.amazon.com/amplify/).
4. Klicken Sie auf "Connect App" und wählen Sie "GitHub" als Repository-Provider aus.
5. Autorisieren Sie Amplify, auf Ihr GitHub-Repository zuzugreifen, und wählen Sie das Repository sowie den zu deployenden Branch aus.
6. Klicken Sie auf "Save and Deploy".

Ab jetzt wird Amplify automatisch bei Änderungen in Ihrem GitHub-Repository deployen.

Meine Reise mit Next.js

Ich begann meine Reise als Freelancer mit einer Webseite, die ich mit Next.js erstellt habe. Im Laufe des letzten Jahres konnte ich wertvolle Erfahrungen sammeln, insbesondere in Verbindung mit AWS Amplify. Zusammen mit einem anderen Entwickler arbeitete ich an einer Erweiterung für OpenGraph über GitHub. Wir konnten unsere Änderungen schnell und automatisiert bereitstellen, was mir sehr gut gefallen hat.

Durch das SaaS-Modell entfällt das Management der Plattform nahezu vollständig. Der Service ist weitgehend selbstverwaltend, was mir ermöglichte, Zeit zu sparen und uns erlaubte, uns ganz auf die Entwicklung der Webseite zu fokussieren. Abgesehen von der Konfiguration, erforderte der Betrieb keinen zusätzlichen Zeitaufwand.

Seit Anfang dieses Jahres läuft meine Webseite auf WordPress. Im letzten Jahr habe ich viel Zeit investiert, um meine Next.js-App weiterzuentwickeln. Dies hat mir viele neue Erfahrungen mit einem neuen Frontend-Framework gebracht. Dennoch ist es für mich nicht die perfekte Lösung. Mein Ziel ist es, meine Erfahrungen zu teilen und qualitativ hochwertige Blogartikel zu liefern, anstatt eine perfekte Webanwendung zu erstellen.

Fazit

Herzlichen Glückwunsch! Du hasst erfolgreich eine Webseite mit AWS Amplify und Next.js erstellt. Dieser einfache Leitfaden sollte dir einen Einblick in die Integration von Cloud-Services in deine Anwendungen geben.

Die Kombination von Amplify und Next.js ermöglicht eine effiziente Entwicklung und Deployment von Webanwendungen. Durch die Dokumentation auf GitHub und das automatische Deployment stellst du sicher, dass andere Entwickler leicht in deine Arbeit einsteigen können.

Bleib dran für weitere spannende Einblicke in die Welt der Cloud-Architektur!

Quellen

• Offizielle Dokumentation von AWS Amplify mit Next.js
• Offizielle Webseite von Next.js
• Kostenlose Git Repository mit GitHub

Meine Cloud-Architektur Serie (eine umfangreiche Einführung)

Für die Artikel habe ich aus meinen vorherigen Arbeiten eine kleine interessante Auswahl erstellt, gerne kann ich diese noch erweitern. Feedback und Kommentare sind gerne gesehen.

• Teil 1: Ein Leitfaden für Einsteiger (Grundlagen)
• Teil 2: Praxis mit einer Webseite auf AWS (SaaS – Webhosting) – dieser Artikel
• Teil 3: Praxis mit einem Raspberry Pi auf Azure (PaaS – Internet of Things)
• Teil 4: Praxis mit einer virtuellen Maschine auf der Google Cloud (IaaS – Virtuelle Maschine deployen)
• Teil 5: Zusammenfassung und Ausblick