Next.js 14 - Aufbau einer Saas-Lösung auf Azure (langlaufende Prozesse) - Teil1

In den nächsten Beiträgen werde ich Sie durch den Prozess der Erstellung einer Saas-Lösung führen. Am Ende werden wir ein Frontend auf Basis von Next.js 14, Azure Services (Blob-Storage, App Services, Azure Functions, Azure AD B2C, etc.), Prisma ORM, Postgres DB (Neon.tech) und Stripe als Zahlungsgateway haben.

Vorbereitung/Erste Schritte

In dieser ersten Phase unseres Projekts werden wir die wesentlichen Dienste auf Azure vorbereiten und mit Azure App Service beginnen, der unsere langwierigen Prozesse zur Erstellung virtueller Ressourcen über die Azure CLI abwickeln wird.

Maximale Dauer für Vercel-Funktionen

Vercel-Funktionen haben ein Ausführungslimit von 10 Sekunden, was sie für langlaufende Prozesse in einem Next.js 14-Projekt ungeeignet macht. Azure App Service hingegen bietet mehr Flexibilität und Skalierbarkeit, indem es die Ausführung von Aufgaben ohne Zeitbeschränkung ermöglicht. Mit der maxDurationconfig können wir die 10 Sekunden auf max 60s im kostenlosen (Hobby) Plan erweitern.

Mögliche Lösung

Azure App Service ist eine gute Wahl für den Umgang mit lang laufenden Prozessen in einem Next.js 14-Projekt, da es im Vergleich zu serverlosen Plattformen wie Vercel mehr Flexibilität und Skalierbarkeit bietet. Mit Azure können Sie Full-Stack-Web-Apps bereitstellen, ohne sich um die Zeitbeschränkungen für die Funktionsausführung zu kümmern, die von Plattformen wie Vercel auferlegt werden. Azure App Service ermöglicht Ihnen die Verwaltung der Ressourcenskalierung und stellt sicher, dass lang laufende Aufgaben nicht aufgrund von Plattformbeschränkungen zeitlich begrenzt werden oder fehlschlagen. Die Ausführungsbeschränkungen von Vercel für serverlose Funktionen können eine Herausforderung für Vorgänge darstellen, die mehr Zeit für die Ausführung benötigen, wie z. B. Datenverarbeitung oder Hintergrundaufgaben.

Azure App Service einrichten

Ich verwende Vscode als meine bevorzugte IDE, also öffne ich ein Terminal auf meinem Mac, und mit den folgenden Befehlen können wir den neuen App Service einrichten (ich gehe davon aus, dass Sie bereits ein gültiges Azure-Konto/Abonnement haben).

Grundlegende Einrichtung

Azure Ressourcen erstellen

Wie Sie im obigen Codeblock sehen können, verwende ich diesen Startbefehl:

npm i && npx prisma generate && npx ts-node index.ts

Ich möchte die benötigten NPM-Pakete installieren und den Prisma-Client generieren, den ich für Verbindungen zu meiner Postgres-DB verwende. Jetzt haben wir eine App-Service-Instanz eingerichtet und laufen. Um die öffentliche URL des App-Dienstes zu erhalten, können wir diesen Befehl verwenden

Die Url sollte in etwa so aussehen:

Projektstruktur

Unten sehen Sie die Projektstruktur

NPM Pakete

Hier ist die package.json, so dass Sie die benötigten Pakete kennen.

Hauptverzeichnisse

Das Projekt besteht aus vier Hauptordnern.

services

• azureService.ts

• emailService.ts

• roleService.ts

routes

• storageRoutes.ts

controllers

• storageController.ts

prisma

• schema.prisma

Umgebungsvariablen (.env)

Es ist eine .env-Datei mit diesen Variablen erforderlich:

Hier ist der Link zum GitHub Repo mit dem gesamten Code

https://github.com/cloudapp-dev/azure-app-service-iac

Übertragen Sie den Code in Ihren App-Dienst und der erste Schritt ist getan.

In Teil 2 werde ich Sie durch den Authentifizierungsprozess mit Azure AD B2C (Oauth2) führen. Wir werden eine App-Registrierung erstellen und den App-Service mit unserem Next.js 14 Projekt verbinden.

Cloudapp-dev und bevor Sie uns verlassen

Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:

Wenn Ihnen gefallen hat was Sie gelesen haben oder wenn es Ihnen sogar geholfen hat, dann würden wir uns über einen "Clap" 👏 oder einen neuen Follower auf unseren Medium Account sehr freuen.

Oder folgen Sie uns auf Twitter -> Cloudapp.dev