FULLSTACK · CLOUD · API · CI/CD
Newsletter-System
Entwicklung eines eigenen Fullstack- Newsletter-Systems mit HTML, CSS, JavaScript, .NET 8, Azure Functions, Entity Framework Core, Azure SQL, SendGrid und GitHub Actions.
Projektbeschreibung
Im Rahmen meines Portfolios habe ich ein eigenes Fullstack-Newsletter-System entwickelt. Ziel war es, eine vollständige Anwendung zu erstellen, bei der Frontend, Backend, Datenbank, E-Mail-Versand, Cloud-Infrastruktur und automatisierte Prozesse miteinander verbunden sind.
Besucher können sich über ein Webformular für den Newsletter registrieren. Die E-Mail-Adresse wird zunächst in der Datenbank gespeichert und anschließend über die SendGrid API eine individuelle Bestätigungsmail versendet.
Die Anmeldung verwendet einen Double-Opt-in-Prozess. Erst nachdem der Benutzer den persönlichen Bestätigungslink aus der E-Mail aufgerufen hat, wird die Anmeldung als bestätigt gespeichert.
Das System besteht aus einem eigenständigen Frontend-Repository und einem separaten Backend-Repository. Dadurch können Frontend und Backend unabhängig voneinander entwickelt und deployed werden.
Das Backend wurde zunächst als klassische ASP.NET Core Web API auf einem Azure App Service betrieben. Im weiteren Verlauf wurde die Anwendung auf eine serverlose Architektur mit Azure Functions im Flex Consumption Modell migriert.
Funktionen
Registrierung
Benutzer können ihre E-Mail-Adresse über das Newsletter-Frontend registrieren. Bereits registrierte oder bestätigte Adressen werden erkannt.
Double Opt-in
Nach der Registrierung wird eine persönliche Bestätigungsmail mit einem eindeutigen Token versendet.
Bestätigung
Der Bestätigungslink ruft eine HTTP-Function auf. Der Token wird geprüft und der Teilnehmer anschließend als bestätigt gespeichert.
Abmeldung
Jeder Teilnehmer erhält einen individuellen Abmeldelink. Über diesen kann die Newsletter-Anmeldung wieder entfernt werden.
Bestätigung erneut senden
Für noch nicht bestätigte Adressen kann eine neue Bestätigungsmail mit einem neuen Token angefordert werden.
E-Mail-Versand
Der Versand der Bestätigungs-, Willkommens- und Newslettermails erfolgt über die SendGrid API.
Newsletter-Versand
Die SendNewsletter-Function fragt alle bestätigten Teilnehmer aus der Datenbank ab und versendet den Newsletter an diese Adressen.
GitHub-Automatisierung
Ein separater GitHub-Actions-Workflow kann einen Newsletter unabhängig vom Backend- Deployment auslösen und Projektdaten an die Newsletter-API übergeben.
Projekt-Einblicke
Ausgewählte Screenshots zeigen den Ablauf der Anwendung sowie die eingesetzten Cloud- und Deployment-Komponenten.
Technische Architektur
Frontend
HTML · CSS · JavaScript
API
C# · .NET 8 · Azure Functions
Datenbank
Entity Framework Core · Azure SQL
E-Mail-Service
SendGrid API
Die einzelnen Komponenten sind über klar definierte Schnittstellen miteinander verbunden. Das Frontend kommuniziert per HTTP mit den Azure Functions. Die Functions greifen über Entity Framework Core auf die Datenbank zu und verwenden SendGrid für den E-Mail-Versand.
API und Azure Functions
Das Backend stellt verschiedene HTTP-Endpunkte zur Verarbeitung der Newsletter-Anmeldungen und zum Versand von Newsletter-Nachrichten bereit.
Die ursprüngliche ASP.NET-Core-API wurde im Zuge der Weiterentwicklung in einzelne Azure Functions überführt.
POST /api/subscribers
Registrierung eines neuen Teilnehmers
GET /api/subscribers/confirm
Bestätigung der E-Mail-Adresse
GET /api/subscribers/unsubscribe
Abmeldung vom Newsletter
POST /api/subscribers/resend-confirmation
Erneutes Versenden der Bestätigungsmail
POST /api/newsletter/send
Versand eines Newsletters an alle bestätigten Teilnehmer
Automatisierter Newsletter-Versand
Zusätzlich zum automatisierten Deployment des Backends wurde ein eigener Workflow für den Newsletter-Versand mit GitHub Actions implementiert.
Ein beliebiges GitHub-Projekt kann dadurch einen Newsletter-Versand auslösen. Die GitHub Action übermittelt dabei die relevanten Projektdaten an die zentrale Newsletter-API.
Übergeben werden unter anderem der Projekttitel, der Repository-Name, eine Beschreibung sowie der Link zum GitHub-Repository.
Die SendNewsletter -Function fragt anschließend die Datenbank ab und versendet die Nachricht ausschließlich an Teilnehmer, deren Anmeldung über den Double-Opt-in-Prozess bestätigt wurde.
Migration von Azure App Service zu Azure Functions
Die erste Version des Backends wurde als klassische ASP.NET-Core-Web-API auf einem Azure App Service betrieben.
Während der Entwicklung stellte sich heraus, dass für die relativ seltenen Anfragen des Newsletter- Systems ein dauerhaft laufender App Service nicht notwendig ist.
Daher wurde das Backend auf eine Azure Functions App im Flex Consumption Modell migriert.
Ursprüngliche Architektur
- ASP.NET Core Web API
- Azure App Service
- dauerhaft bereitgestellte Anwendung
- höherer Grundpreis
Aktuelle Architektur
- .NET 8 Isolated Worker
- Azure Functions
- Flex Consumption
- serverlose Ausführung
Bei der Migration musste insbesondere die Struktur
der Controller an das
Azure-Functions-Modell
angepasst werden. Anstelle klassischer
ASP.NET-Core-Controller werden HTTP-triggered Functions
verwendet, die
HttpRequestData und
HttpResponseData verwenden.
Die Datenzugriffsschicht mit Entity Framework Core sowie die Services für den E-Mail-Versand konnten weitgehend weiterverwendet werden.
Deployment und CI/CD
Der Quellcode wird in GitHub verwaltet. Über GitHub Actions wird das Backend automatisch gebaut und bei Änderungen am Main-Branch in die Azure Functions App deployed.
Zusätzlich existiert ein separater GitHub-Actions-Workflow für den automatisierten Newsletter-Versand. Dieser kann unabhängig vom Backend-Deployment ausgelöst werden und übermittelt Projektdaten an die Newsletter-API.
Für die Authentifizierung zwischen GitHub Actions und Azure wird OpenID Connect (OIDC) verwendet. Dadurch ist kein dauerhaft gespeichertes Azure-Passwort oder Client-Secret im Repository notwendig.
Was ich dabei gelernt habe
- Aufbau einer REST-orientierten HTTP-API mit C# und .NET
- Entwicklung eines Fullstack-Systems mit HTML, CSS und JavaScript
- Verwendung von Entity Framework Core für den Datenzugriff
- Arbeit mit Azure Functions und serverlosen Architekturen
- Integration einer externen API mit SendGrid
- Konfiguration von Azure-Diensten und DNS
- Automatisiertes Deployment mit GitHub Actions
- Automatisierung von Prozessen über GitHub Actions und HTTP APIs
- Authentifizierung von CI/CD-Prozessen über OpenID Connect
- Migration einer klassischen Web-API in eine serverlose Architektur
Quellcode
Das Projekt ist als Fullstack-Anwendung auf zwei separaten GitHub-Repositories aufgeteilt. Backend und Frontend können dadurch unabhängig voneinander entwickelt und verwaltet werden.