Veröffentliche deine Astro-Website in Vercel

Du kannst Vercel verwenden, um eine Astro-Website ohne Konfiguration in dessen globales Edge-Netzwerk einzubinden.

Diese Anleitung enthält Anweisungen für die Veröffentlichung mit Vercel über die Website-UI oder die CLI von Vercel.

Projektkonfiguration

Dein Astro-Projekt kann in Vercel als statische Website oder als serverseitig gerenderte Website (SSR) veröffenlicht werden.

Statische Website

Dein Astro-Projekt ist standardmäßig eine statische Website. Du brauchst keine zusätzliche Konfiguration, um eine statische Astro-Website auf Vercel zu veröffentlichen.

Adapter für SSR

Um SSR in deinem Astro-Projekt zu aktivieren und auf Vercel zu veröffentlichen:

Füge den Vercel-Adapter (EN) hinzu, um SSR in deinem Astro-Projekt mit dem folgenden Befehl astro add zu aktivieren. Damit installierst du den Adapter und nimmst in einem Schritt die entsprechenden Änderungen an deiner Datei astro.config.mjs vor.

npx astro add vercel

pnpm astro add vercel

yarn astro add vercel

Wenn du den Adapter stattdessen lieber manuell installieren möchtest, führe die folgenden zwei Schritte aus:

Installiere den @astrojs/vercel Adapter (EN) mit deinem bevorzugten Paketmanager in die Abhängigkeiten deines Projekts.
- npm
- pnpm
- Yarn
Terminal-Fenster
npm install @astrojs/vercel
Terminal-Fenster
pnpm add @astrojs/vercel
Terminal-Fenster
yarn add @astrojs/vercel

Füge zwei neue Zeilen zu deiner Projektkonfigurationsdatei astro.config.mjs hinzu.

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'server',
  adapter: vercel(),
});

Wie man veröffenlicht

Du kannst Vercel über die Benutzeroberfläche der Website oder über die Befehlszeilenschnittstelle (CLI) von Vercel veröffentlichen. Das Verfahren ist für statische und SSR-Astro-Sites gleich.

Website-UI-Veröffentlichung

Pushe deinen Code in dein Online-Git-Repository (GitHub, GitLab, BitBucket).
Importiere dein Projekt in Vercel.
Vercel wird Astro automatisch erkennen und die richtigen Einstellungen vornehmen.
Deine Anwendung wird veröffentlicht! (z.B. astro.vercel.app)

Nachdem dein Projekt importiert und veröffenlicht wurde, erzeugen alle nachfolgenden Pushes zu Branches eine Veröffentlichungsvorschau, und alle Änderungen am Produktionsbranch (meistens “main”) führen zu einer Produktionsveröffentlichung.

Erfahre mehr über die Git Integration von Vercel.

CLI-Veröffentlichung

Installiere das Vercel CLI und führe vercel aus, um es zu veröffentlichen.
- npm
- pnpm
- Yarn
Terminal-Fenster
npm install -g vercel vercel
Terminal-Fenster
pnpm add -g vercel vercel
Terminal-Fenster
yarn global add vercel vercel
Vercel wird Astro automatisch erkennen und die richtigen Einstellungen vornehmen.
Wenn du gefragt wirst: Want to override the settings? [y/N], wähle N.
Deine Anwendung wird veröffenlicht! (z.B. astro.vercel.app)

Projektkonfiguration mit vercel.json

Du kannst vercel.json verwenden, um das Standardverhalten von Vercel außer Kraft zu setzen und zusätzliche Einstellungen zu konfigurieren. Du kannst zum Beispiel Header an die HTTP-Antworten deiner Veröffentlichungen anhängen.

Erfahre mehr über Vercel’s Projektkonfiguration.