Skip to content
IRC-Coding IRC-Coding
vercel hosting deployment astro devops serverless edge-computing

Vercel Hosting und Deployment: Der ultimative Guide für moderne Webentwicklung

Erfahre alles über Vercel Hosting, Deployment, Installation und wie Du Astro Projekte auf Vercel deployen kannst. Der ultimative Guide für moderne Webentwicklung.

I

IRC-Coding Team

2 min read

Vercel Hosting und Deployment: Der ultimative Guide

Du suchst immernoch verzweifelt nach einer modernen Hosting-Lösung für Deine Webprojekte? Vercel ist eines der beliebtesten Deployment-Plattformen für moderne Webanwendungen und könnte auch Dich überzeugen.

In diesem Artikel erfährst Du hoffentlich alles, was Du über Vercel wissen musst.

Warum gibt es diesen Artikel !

Im Laufe meines Lebens habe ich viele CMSysteme genutzt und programmiert. Von den Anfängen mit Contao, Typo3, Wordpress bin ich irgendwann zu anderen Framewords umgestiegen. Aktuell arbeite ich viel mit Astro und Fast-API (Python Framework)

Tatsächlich fehlt mir kein wirkliches Backend mehr, s. wie es bei Wordpress der Fall war, zumindest bei statischen Seiten, die eher , wie IRC-Coding, wie ein Blog aufgebaut sind.

Was ist Vercel?

Vercel ist eine Cloud-Plattform für statische Websites und serverless Funktionen. Ursprünglich als ZEIT gestartet, hat sich Vercel zu einer der führenden Deployment-Plattformen für moderne Webentwicklung entwickelt. Die Plattform ist besonders bekannt für ihre nahtlose Integration mit Next.js, aber sie unterstützt auch viele andere Frameworks wie Astro, React, Vue, Svelte und mehr.

Vercel bietet Dir:

  • Automatische Deployments aus Git-Repositories
  • Global Edge Network für maximale Performance
  • Serverless Functions für Backend-Logik
  • Preview Deployments für Pull Requests
  • Custom Domains und SSL-Zertifikate
  • Analytics und Performance-Monitoring

Wofür brauchst Du Vercel?

Du brauchst Vercel, wenn Du:

  • Statische Websites hosten möchtest
  • Serverless Anwendungen deployen willst
  • Automatische CI/CD Pipelines suchst
  • Globale Performance für Deine Nutzer garantieren möchtest
  • Preview Deployments für Deine Entwicklungsteams brauchst
  • Edge Functions nutzen möchtest, um Latenz zu minimieren
  • Kostenlos starten möchtest und nur für das bezahlen willst, was Du nutzt

Vercel ist besonders ideal für:

  • Frontend-Entwickler, die schnell deployen wollen
  • Startups, die skalierbare Infrastruktur benötigen
  • Agile Teams, die häufig deployen
  • Open-Source-Projekte, die stabile Hosting-Lösungen suchen

Wo wird Vercel bereits genutzt?

Vercel wird von einigen der größten Unternehmen weltweit eingesetzt:

  • Next.js - Das React Framework selbst wird auf Vercel gehostet
  • React - Die offizielle React-Dokumentation
  • Tailwind CSS - Das beliebte CSS-Framework
  • TypeScript - Die offizielle TypeScript-Website
  • Vue.js - Die Vue.js Dokumentation
  • Svelte - Die Svelte-Website
  • Stripe - Teile der Stripe-Dokumentation
  • Duolingo - Die Sprachlern-Plattform
  • TikTok - Teile der TikTok-Webseite

Diese Unternehmen wählen Vercel wegen seiner Performance, Zuverlässigkeit und Entwicklerfreundlichkeit.

Vercel installieren und einrichten

Vercel CLI installieren

Die einfachste Art, Vercel zu nutzen, ist über die Vercel CLI. Installiere sie mit npm:

npm install -g vercel

Oder mit yarn:

yarn global add vercel

Vercel Account erstellen

  1. Gehe auf vercel.com
  2. Klicke auf “Sign Up”
  3. Registriere Dich mit GitHub, GitLab, Bitbucket oder Email
  4. Verifiziere Deine Email-Adresse

Projekt initialisieren

Navigiere in Dein Projektverzeichnis und führe aus:

vercel login

Dies öffnet einen Browser, wo Du Dich bei Vercel einloggen kannst. Danach:

vercel

Der CLI fragt Dich nach einigen Einstellungen:

  • Set up and deploy? → Y
  • Which scope? → Wähle Dein Account
  • Link to existing project? → N (für neue Projekte)
  • What’s your project’s name? → Dein Projektname
  • In which directory is your code located? → . (oder dein Build-Verzeichnis)
  • Want to override the settings? → N (oder Y für benutzerdefinierte Einstellungen)

Git-Integration einrichten

Für automatische Deployments verbinde Dein Git-Repository:

  1. Gehe auf vercel.com/dashboard
  2. Klicke auf “Add New Project”
  3. Importiere Dein Repository von GitHub, GitLab oder Bitbucket
  4. Konfiguriere die Build-Einstellungen
  5. Klicke auf “Deploy”

Ab jetzt wird bei jedem Push ein neues Deployment gestartet.

Vercel mit anderen Tools kombinieren

Vercel und Next.js

Next.js und Vercel sind wie füreinander gemacht. Vercel wurde vom Next.js-Team erstellt und bietet optimale Unterstützung:

// next.config.js
module.exports = {
  // Automatische Optimierung für Vercel
  target: 'serverless',
  // Image-Optimierung
  images: {
    domains: ['example.com'],
  },
}

Vercel und Astro

IRC-Coding.de nutzt derzeit Astro!

Astro Projekte lassen sich einfach auf Vercel deployen: Aktuell nutze ich derzeit Coolify und Visual Studio Code

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  // Vercel-Adapter für Serverless Functions
  adapter: astro({
    output: 'server',
  }),
});

Vercel und Docker

Du kannst auch Docker-Container auf Vercel deployen:

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Vercel und Datenbanken

Vercel integriert sich mit vielen Datenbanken:

  • PostgreSQL (Neon, Supabase, PlanetScale)
  • MySQL (PlanetScale)
  • MongoDB (MongoDB Atlas)
  • Redis (Upstash, Redis Cloud)
  • Firebase (Firestore)

Praxisbeispiel: Astro Projekt auf Vercel deployen

Schauen wir uns ein konkretes Beispiel an: Ein Astro Blog auf Vercel deployen.

Schritt 1: Astro Projekt erstellen

npm create astro@latest mein-blog
cd mein-blog
npm install

Schritt 2: Projekt lokal testen

npm run dev

Öffne http://localhost:4321 im Browser.

Schritt 3: Vercel konfigurieren

Erstelle eine vercel.json im Root-Verzeichnis:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install"
}

Schritt 4: Git-Repository erstellen

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/dein-username/mein-blog.git
git push -u origin main

Schritt 5: Auf Vercel deployen

  1. Gehe auf vercel.com/dashboard
  2. Klicke auf “Add New Project”
  3. Wähle Dein GitHub-Repository
  4. Vercel erkennt automatisch Astro und konfiguriert alles:
    • Framework Preset: Astro
    • Build Command: astro build
    • Output Directory: dist
  5. Klicke auf “Deploy”

Schritt 6: Custom Domain einrichten

  1. Gehe in die Projekt-Einstellungen
  2. Klicke auf “Domains”
  3. Füge Deine Domain hinzu (z.B. mein-blog.de)
  4. Konfiguriere die DNS-Einträge:
    • A Record: 76.76.21.21
    • CNAME: cname.vercel-dns.com

Schritt 7: Environment Variables konfigurieren

Wenn Du Environment Variables brauchst:

  1. Gehe in Settings → Environment Variables
  2. Füge Deine Variablen hinzu:
    • API_KEY: Dein API Key
    • DATABASE_URL: Deine Datenbank-URL
  3. Speichere und redeploye

Schritt 8: Preview Deployments nutzen

Für jeden Pull Request erstellt Vercel automatisch ein Preview Deployment:

  1. Erstelle einen neuen Branch: 
    git checkout -b feature/neuer-artikel
  2. Mache Änderungen und committe: 
    git add .
git commit -m "Neuer Artikel"
git push origin feature/neuer-artikel
  3. Erstelle einen Pull Request auf GitHub
  4. Vercel erstellt automatisch ein Preview Deployment
  5. Teste das Preview vor dem Merge

20 Fragen und Antworten

1. Ist Vercel kostenlos? Ja, Vercel bietet einen großzügigen Free Plan mit unbegrenzten statischen Deployments, 100 GB Bandbreite pro Monat und 100 GB Edge Cache. Serverless Functions sind im Free Plan eingeschränkt.

2. Was ist der Unterschied zwischen Vercel und Netlify? Beide bieten ähnliche Funktionen, aber Vercel ist stärker auf Next.js optimiert, während Netlify mehr auf Jamstack und Headless CMS spezialisiert ist. Vercel hat ein stärkeres Edge Network, Netlify bietet bessere Build-Plugins.

3. Kann ich Datenbanken auf Vercel hosten? Vercel hostet keine Datenbanken direkt, aber integriert sich perfekt mit vielen Datenbank-Providern wie Neon (PostgreSQL), PlanetScale (MySQL), MongoDB Atlas und Upstash (Redis).

4. Wie lange dauert ein Deployment auf Vercel? Typischerweise 30-60 Sekunden für statische Sites und 1-2 Minuten für Anwendungen mit Build-Process. Vercel nutzt Caching, um Deployments zu beschleunigen.

5. Unterstützt Vercel PHP? Nicht nativ, aber Du kannst PHP über Serverless Functions oder Docker-Container auf Vercel deployen. Für reine PHP-Projekte sind andere Hostings besser geeignet.

6. Was sind Edge Functions? Edge Functions sind serverless Funktionen, die am Edge der Vercel-Infrastruktur ausgeführt werden. Das minimiert Latenz, da die Code-Ausführung näher am Nutzer stattfindet.

7. Kann ich WordPress auf Vercel hosten? Ja, aber es ist nicht ideal. WordPress benötigt PHP und MySQL, was auf Vercel komplex ist. Besser sind spezialisierte WordPress-Hostings oder WP Engine.

8. Wie viel kostet Vercel Pro Plan? Der Pro Plan kostet $20 pro Monat pro Benutzer und bietet unbegrenzte Bandbreite, Priority Support, erweiterte Analytics und mehr.

9. Unterstützt Vercel WebSockets? Ja, Vercel unterstützt WebSockets über Serverless Functions und Edge Functions, aber mit bestimmten Limitierungen. Für reale Echtzeit-Anwendungen sind spezialisierte Services besser.

10. Kann ich eigene Domains auf Vercel nutzen? Ja, Vercel unterstützt unbegrenzte Custom Domains mit automatischen SSL-Zertifikaten (Let’s Encrypt). Du kannst auch Subdomains und Wildcard-Domains nutzen.

11. Was passiert, wenn ich mein Deployment-Limit überschreite? Im Free Plan werden Deployments nach 100 pro Monat gedrosselt. Im Pro Plan sind Deployments unbegrenzt. Du kannst jederzeit upgraden.

12. Wie sicher ist Vercel? Vercel ist sehr sicher mit DDoS-Schutz, automatischen SSL-Zertifikaten, SOC 2 Compliance und regelmäßigen Security-Audits. Deine Daten werden sicher gespeichert und übertragen.

13. Kann ich Vercel ohne Git nutzen? Ja, mit der Vercel CLI kannst Du Projekte direkt deployen ohne Git. Aber Git-Integration wird empfohlen für automatische Deployments und Versionierung.

14. Was ist der Unterschied zwischen Static und Serverless auf Vercel? Static Sites sind vorgerenderte HTML/CSS/JS Dateien, die extrem schnell ausgeliefert werden. Serverless Functions sind dynamische Code-Ausführungen auf Anfrage.

15. Unterstützt Vercel TypeScript? Ja, Vercel unterstützt TypeScript nativ und kann TypeScript automatisch während des Build-Prozesses kompilieren. Keine zusätzliche Konfiguration nötig.

16. Wie kann ich meine Deployments überwachen? Vercel bietet ein Dashboard mit Deployment-Historie, Logs, Analytics und Performance-Metriken. Du kannst auch Integrations mit Tools wie Sentry oder Datadog nutzen.

17. Kann ich Vercel für E-Commerce nutzen? Ja, Vercel wird oft für E-Commerce-Frontends genutzt (z.B. mit Shopify, Stripe oder Medusa). Für den Backend-Teil brauchst Du aber eine separate Lösung.

18. Was ist der Vercel Edge Network? Das Vercel Edge Network besteht aus über 35 Datenzentren weltweit. Deine Inhalte werden automatisch an den nächstgelegenen Standort ausgeliefert für maximale Performance.

19. Kann ich Cron Jobs auf Vercel nutzen? Ja, über Vercel Cron Jobs kannst Du periodische Tasks einrichten. Konfiguriere sie in der vercel.json oder über das Dashboard.

20. Wie migriere ich von einem anderen Hosting zu Vercel? Exportiere Deine Code-Base, richte Vercel ein, konfiguriere Environment Variables, deploye auf Vercel und aktualisiere DNS-Einträge. Vercel bietet Migrations-Assistenten für bestimmte Plattformen.

Alternative: Coolify als self-hosted Lösung

Du hast im Artikel schon von Coolify gelesen, das ist eine interessante Alternative zu Vercel. Coolify ist eine Open-Source PaaS-Plattform, die Du selbst hosten kannst.

Coolify vs. Vercel

Coolify (Self-Hosted):

  • Vorteile: Vollständige Kontrolle, keine monatlichen Kosten, Datenschutz, alle Daten auf Deinem Server
  • Nachteile: Server-Administration nötig, kein globales Edge Network, mehr Wartungsaufwand
  • Ideal für: Entwickler mit Server-Erfahrung, Projekte mit hohen Datenschutzanforderungen, Budget-bewusste Entwickler

Vercel (Managed Cloud):

  • Vorteile: Keine Server-Wartung, globales Edge Network, automatische SSL, Preview Deployments, einfache Einrichtung
  • Nachteile: Monatliche Kosten bei höherem Traffic, Daten auf Vercel-Servern, weniger Kontrolle
  • Ideal für: Schnelle Entwicklung, Teams ohne DevOps-Expertise, globale Performance

Visual Studio Code: Der Editor, nicht die Hosting-Lösung

Visual Studio Code ist ein Code-Editor, keine Hosting-Lösung. Du kannst VS Code mit beiden nutzen:

  • Mit Vercel: Installiere die Vercel Extension für direkte Deployments aus VS Code
  • Mit Coolify: Nutze VS Code zum Entwickeln und deploye über Git oder CLI zu Deinem Coolify-Server

VS Code ist Dein Arbeitsplatz, die Wahl des Hostings (Vercel vs. Coolify) ist eine separate Entscheidung.

Wann solltest Du was wählen?

Wähle Vercel, wenn:

  • Du schnell loslegen willst ohne Server-Administration
  • Globale Performance wichtig ist
  • Du Preview Deployments für Teams brauchst
  • Dein Budget für Managed Cloud reicht

Wähle Coolify, wenn:

  • Du volle Kontrolle über Deine Infrastruktur willst
  • Datenschutz und Compliance kritisch sind
  • Du Server-Administration kannst oder lernen willst
  • Langfristig Kosten sparen möchtest

Vercel ist eine hervorragende Wahl für moderne Webprojekte. Die Plattform bietet Dir alles, was Du für schnelle Deployments, globale Performance und skalierbare Infrastruktur brauchst. Besonders in Kombination mit Frameworks wie Astro, Next.js oder React shines Vercel. Wenn Du noch nie mit Vercel gearbeitet hast, probiere es aus, der Free Plan ist großzügig und Du kannst innerhalb von Minuten Dein erstes Deployment live haben. Viel Erfolg mit Deinem nächsten Projekt auf Vercel!

Zurück zum Blog
Share: