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

#Install Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

#Update Homebrew
brew update

#Installing Azure CLI with Homebrew
brew install azure-cli

#Verify the installation
az version

#Login to Azure
az login // if this doesn't work you can use az login --use-device-code

Azure Ressourcen erstellen

# Set your variables
RESOURCE_GROUP_NAME="myResourceGroup"
LOCATION="westeurope"
APP_SERVICE_PLAN_NAME="myAppServicePlan"
WEB_APP_NAME="myNodeApp"

# Log in to Azure CLI
az login

# Create a resource group
az group create --name $RESOURCE_GROUP_NAME --location $LOCATION

# Create an App Service plan in the Free tier with Linux
az appservice plan create --name $APP_SERVICE_PLAN_NAME --resource-group $RESOURCE_GROUP_NAME --sku F1 --is-linux

# Create a Linux Web App with the desired runtime
az webapp create --name $WEB_APP_NAME --resource-group $RESOURCE_GROUP_NAME --plan $APP_SERVICE_PLAN_NAME --runtime "NODE|18-lts"

# Set the custom startup command
az webapp config set --name $WEB_APP_NAME --resource-group $RESOURCE_GROUP_NAME --startup-file "npm i && npx prisma generate && npx ts-node index.ts"

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

az webapp show --name <WEB_APP_NAME> --resource-group <RESOURCE_GROUP_NAME> --query defaultHostName --output tsv

Die Url sollte in etwa so aussehen:

myNodeApp.azurewebsites.net

Projektstruktur

Unten sehen Sie die Projektstruktur

NPM Pakete

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

{
  "name": "azure-app-service-iac",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon --exec \"npx ts-node\" index.ts",
    "build": "npx prisma generate"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@azure/arm-authorization": "^9.0.0",
    "@azure/arm-resources": "^5.2.0",
    "@azure/arm-storage": "^18.3.0",
    "@azure/identity": "^4.4.1",
    "@azure/storage-blob": "^12.24.0",
    "@prisma/client": "^5.19.1",
    "axios": "^1.7.7",
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "resend": "^4.0.0",
    "typescript": "^5.5.4",
    "uuid": "^10.0.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/node": "^22.5.4",
    "@types/react": "^18.3.5",
    "@types/uuid": "^10.0.0",
    "nodemon": "^3.1.4",
    "prisma": "^5.19.1",
    "ts-node": "^10.9.2"
  }
}

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:

#Azure App Registration
AZURE_CLIENT_ID=xxxxx
AZURE_CLIENT_SECRET=xxxxx
AZURE_TENANT_ID=xxxxx
AZURE_SUBSCRIPTION_ID=xxxxx

#Resend - Email Service
RESEND_API_KEY=xxxxx

# Prisma - Postegres neon.tech
DATABASE_URL="postgresql://xxxxxx/dbname?sslmode=require"

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