--- title: "Academy App" canonical_url: "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen" locale: de meta: "og:title": "Academy App" --- [Zur Startseite](https://academy.laioutr.com/) - [Apps](https://academy.laioutr.com/bereiche/apps) - [Hosting, Zahlung und Werkzeuge](https://academy.laioutr.com/leitfaeden/hosting-zahlung-und-werkzeuge) - [Vercel: Storefront aus dem Cockpit auf Vercel deployen](https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen) # Vercel: Storefront aus dem Cockpit auf Vercel deployen Mit der Vercel-Anbindung deployt Cockpit die Storefront direkt in ein bestehendes Vercel-Projekt des Unternehmens. Unter Hosting, Vercel werden dafür Projektname, API-Token und Team-ID hinterlegt; Build und Auslieferung laufen auf Vercel. ## Bevor du startest
Tarif
Laioutr Commerce oder Sites mit eigenem Hosting; Vercel-Konto des Unternehmens
Rolle
Projektrolle mit Zugriff auf die Hosting-Einstellungen
Dauer
10 Min.
### Voraussetzungen - Vercel-Team und dessen Team-ID - Vercel-Projekt mit Framework-Preset Nuxt - Vercel-API-Token mit Deploy-Rechten für das Team - Optional: Redis-URL für einen gemeinsamen Cache Zuletzt geprüft am 15. Oktober 2026 Deployt die von Cockpit erzeugte Nuxt-Anwendung in ein bestehendes Vercel-Projekt des Unternehmens. Vercel übernimmt Build und Auslieferung, der Cache läuft über Vercel oder optional über Redis. [Entwicklerdokumentation](https://docs.laioutr.com/hosting/hyperscaler/vercel-adapter) ## So funktioniert es 1. Team-ID ermittelnWo: Vercel, Team Settings · Rolle: Developer · Dauer: 2 min 2. Projekt mit Preset Nuxt anlegenWo: Vercel-Dashboard · Rolle: Developer · Dauer: 5 min 3. API-Token mit Deploy-Rechten erstellenWo: Vercel, Tokens · Rolle: Developer · Dauer: 3 min 4. Project Name, Token, Team ID und optional Redis URL eintragenWo: Cockpit, Hosting, Vercel · Rolle: Developer · Dauer: 5 min 5. Deployment startenWo: Cockpit, Deployments · Rolle: Developer · Dauer: 2 min 6. Build-Status und Live-URL prüfenWo: Vercel-Dashboard · Rolle: Developer · Dauer: 5 min ## Konfiguration | Feld | Zweck | Woher | Pflicht | Pro Environment | | --- | --- | --- | --- | --- | | `Project Name` | Exakter Name (Slug) des Vercel-Projekts, in das deployt wird. Das Projekt muss im Team bereits existieren. | Vercel-Dashboard, Projektübersicht | Ja | Ja | | `Token` | Vercel-API-Token mit Deploy-Rechten für das Team. Cockpit nutzt ihn nur für Deployments und das Lesen von Projektdaten. | Vercel, Account oder Team Settings, Tokens | Ja | Ja | | `Team ID` | ID des Vercel-Teams oder Kontos, dem das Projekt gehört. | Vercel, Team Settings, General | Ja | Ja | | `Redis URL` | Verbindungs-URL zu Redis. Ist sie gesetzt, nutzt die Anwendung Redis statt des Vercel-Laufzeit-Caches. | Eigener Redis-Dienst des Unternehmens | Nein | Ja | ## Häufige Fehler
Das Deployment schlägt sofort fehl.
**Ursache:** Project Name stimmt nicht mit dem Slug überein oder das Projekt gehört zu einem anderen Team als in Team ID angegeben.
**Lösung:** Slug und Team-ID im Vercel-Dashboard prüfen und in Hosting, Vercel korrigieren.
Vercel lehnt den Zugriff ab.
**Ursache:** Der Token ist abgelaufen oder hat keine Deploy-Rechte für das Team.
**Lösung:** Neuen Token mit Deploy-Rechten erstellen und in Cockpit eintragen.
Cockpit meldet Erfolg, die Live-Seite ist aber unverändert.
**Ursache:** Der Build läuft auf Vercel noch oder ist dort fehlgeschlagen.
**Lösung:** Build-Status und Log im Vercel-Dashboard prüfen.
Der Build bricht wegen eines falschen Frameworks ab.
**Ursache:** Das Vercel-Projekt ist nicht auf Nuxt eingestellt.
**Lösung:** Im Vercel-Projekt das Framework Preset Nuxt wählen und neu deployen.
Die **Vercel**-Anbindung macht Vercel zum Hosting-Anbieter einer Storefront. Die Anbindung richtet sich an Teams, die bereits ein eigenes Vercel-Konto betreiben. Beim Deployment erzeugt Cockpit die vollständige Nuxt-Anwendung mit Konfiguration, Abhängigkeiten und App-Dateien und übergibt sie an das Vercel-Projekt. Vercel baut die Anwendung ohne Build-Cache neu, damit Abhängigkeiten aktuell bleiben, und liefert sie aus. Cockpit wartet nur kurz, bis Vercel das Deployment angenommen hat, und meldet dann Erfolg. Der Build läuft auf Vercel weiter, Status, Build-Log und Live-URL stehen im Vercel-Dashboard. Abbrechen, Promoten und Zurückrollen erfolgen in diesem Modus ebenfalls in Vercel. Für den Cache nutzt die Anwendung standardmäßig den Laufzeit-Cache von Vercel. Mit einer Redis-URL wird stattdessen Redis verwendet, etwa für einen gemeinsamen Cache über mehrere Instanzen. Ergänzend gibt es die Apps Vercel Analytics und Vercel Speed Insights, die Besucherzahlen und Ladezeiten echter Besucher im Vercel-Projekt erfassen. ## Schritt für Schritt 1. 1 ### Schritt 1: Team-ID ermitteln In Vercel unter **Team Settings**, **General** die Team-ID kopieren. Ohne Team gilt das persönliche Konto. 2. 2 ### Schritt 2: Vercel-Projekt anlegen Ein neues Projekt mit dem **Framework Preset** Nuxt anlegen, ohne Git-Repository. Den Projektnamen (Slug) notieren. 3. 3 ### Schritt 3: API-Token erstellen Unter **Tokens** einen Token mit Deploy-Rechten für das Team erstellen, zum Beispiel mit dem Namen „Laioutr Cockpit“. 4. 4 ### Schritt 4: Hosting im Cockpit eintragen Im Projekt **Hosting**, **Vercel** öffnen, **Project Name**, **Token** und **Team ID** eintragen, optional **Redis URL**, und speichern. 5. 5 ### Schritt 5: Deployment starten Unter **Deployments** mit **Deploy** ein Deployment starten. Cockpit meldet Erfolg, sobald Vercel das Deployment angenommen hat. 6. 6 ### Schritt 6: Build in Vercel prüfen Im Vercel-Dashboard Build-Status und Live-URL des neuen Deployments prüfen. ## Ergebnis prüfen Im Vercel-Dashboard erscheint ein neues Deployment des Projekts mit dem Status „Ready“. Die Live-URL zeigt die Storefront mit den zuletzt veröffentlichten Inhalten aus Studio. ## Häufige Fragen Warum zeigt Cockpit keinen Build-Log? Bei der Anbindung an ein eigenes Vercel-Konto erhält Cockpit keine Statusmeldungen von Vercel. Build-Log und Status stehen im Vercel-Dashboard. Wie wird ein Deployment zurückgerollt? In diesem Modus im Vercel-Dashboard. Zurückrollen in Sekunden direkt im Cockpit bietet die Laioutr Cloud. Braucht das Vercel-Projekt ein Git-Repository? Nein. Cockpit übergibt die erzeugten Dateien direkt an Vercel. Das Projekt muss nur existieren und auf Nuxt eingestellt sein. Wann lohnt sich eine Redis-URL? Wenn mehrere Instanzen einen gemeinsamen Cache nutzen sollen oder das Team die Cache-Struktur selbst steuern will. Sonst genügt der Laufzeit-Cache von Vercel. ## Passend dazu - [Deployment starten und prüfen](https://academy.laioutr.com/artikel/deployment-starten-und-pruefen)5 Min. Ein Deployment baut die Storefront einer Umgebung neu und bringt Änderungen an Apps, Versionen und Konfiguration live. Gestartet wird es in Cockpit unter Deployments mit Deploy; Status und Build-Log zeigen, ob es erfolgreich war. - [Umgebungen main, dev und stage verstehen](https://academy.laioutr.com/artikel/umgebungen-main-dev-und-stage-verstehen)5 Min. Jedes Projekt startet mit der Umgebung main, der Live-Storefront. Weitere Umgebungen wie stage oder dev laufen als eigene Kopien mit eigener Adresse, eigenen Seiten, Apps und Deployments daneben, bis ihre Arbeit nach main übernommen wird. - [Hosting und Auslieferung über die Edge](https://academy.laioutr.com/artikel/hosting-und-auslieferung-ueber-die-edge)4 Min. Laioutr Cloud ist das integrierte Hosting für Storefronts aus Laioutr und liefert sie über ein globales Edge-Netz mit über 100 Standorten aus. Alternativ läuft eine Storefront über Hyperscaler-Adapter, Native-Hosting-Partner oder auf dem eigenen Server. - [Deployments vergleichen und zurückrollen](https://academy.laioutr.com/artikel/deployments-vergleichen-und-zurueckrollen)5 Min. Jedes Deployment hat eine eigene Adresse, über die sich zwei Stände nebeneinander vergleichen lassen. Ein Rollback setzt ein bereits gebautes früheres Produktions-Deployment in Sekunden wieder live, ohne neuen Build. ## [Hosting, Zahlung und Werkzeuge](https://academy.laioutr.com/leitfaeden/hosting-zahlung-und-werkzeuge) In diesem Leitfaden suchen 1. [Vercel: Storefront aus dem Cockpit auf Vercel deployen](https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen)10 Min. ## Structured Data ```json { "@context": "https://schema.org", "@graph": [ { "@id": "https://academy.laioutr.com/#website", "@type": "WebSite", "inLanguage": "de", "name": "Default", "url": "https://academy.laioutr.com/", "workTranslation": { "@id": "https://academy.laioutr.com/#website" } }, { "@id": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen#webpage", "name": "Academy App", "url": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen", "@type": [ "WebPage", "FAQPage" ], "breadcrumb": { "@id": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen#breadcrumb" }, "isPartOf": { "@id": "https://academy.laioutr.com/#website" }, "mainEntity": [ { "@id": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen#/schema/question/1" }, { "@id": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen#/schema/question/2" }, { "@id": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen#/schema/question/3" }, { "@id": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen#/schema/question/4" } ], "potentialAction": [ { "@type": "ReadAction", "target": [ "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen" ] } ] }, { "@id": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen#breadcrumb", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "name": "Home", "item": "https://academy.laioutr.com/", "position": 1 }, { "@type": "ListItem", "name": "Apps", "item": "https://academy.laioutr.com/bereiche/apps", "position": 2 }, { "@type": "ListItem", "name": "Hosting, Zahlung und Werkzeuge", "item": "https://academy.laioutr.com/leitfaeden/hosting-zahlung-und-werkzeuge", "position": 3 }, { "@type": "ListItem", "name": "Vercel: Storefront aus dem Cockpit auf Vercel deployen", "item": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen", "position": 4 } ] }, { "@id": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen#/schema/question/1", "@type": "Question", "inLanguage": "de", "name": "Warum zeigt Cockpit keinen Build-Log?", "acceptedAnswer": { "@type": "Answer", "text": "

Bei der Anbindung an ein eigenes Vercel-Konto erhält Cockpit keine Statusmeldungen von Vercel. Build-Log und Status stehen im Vercel-Dashboard.

" } }, { "@id": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen#/schema/question/2", "@type": "Question", "inLanguage": "de", "name": "Wie wird ein Deployment zurückgerollt?", "acceptedAnswer": { "@type": "Answer", "text": "

In diesem Modus im Vercel-Dashboard. Zurückrollen in Sekunden direkt im Cockpit bietet die Laioutr Cloud.

" } }, { "@id": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen#/schema/question/3", "@type": "Question", "inLanguage": "de", "name": "Braucht das Vercel-Projekt ein Git-Repository?", "acceptedAnswer": { "@type": "Answer", "text": "

Nein. Cockpit übergibt die erzeugten Dateien direkt an Vercel. Das Projekt muss nur existieren und auf Nuxt eingestellt sein.

" } }, { "@id": "https://academy.laioutr.com/apps/vercel-storefront-aus-dem-cockpit-deployen#/schema/question/4", "@type": "Question", "inLanguage": "de", "name": "Wann lohnt sich eine Redis-URL?", "acceptedAnswer": { "@type": "Answer", "text": "

Wenn mehrere Instanzen einen gemeinsamen Cache nutzen sollen oder das Team die Cache-Struktur selbst steuern will. Sonst genügt der Laufzeit-Cache von Vercel.

" } } ] } ```