Zum Inhalt springen

Veröffentliche deine Astro-Website auf Deno

Du kannst eine serverseitig gerenderte Astro-Seite auf Deno Deploy veröffentlichen, einem verteilten System, das JavaScript, TypeScript und WebAssembly weltweit ausführt.

Dieser Leitfaden enthält Anweisungen für die Bereitstellung in Deno Deploy über GitHub Actions oder die CLI von Deno Deploy.

Anforderungen

In dieser Anleitung wird davon ausgegangen, dass du Deno bereits installiert hast.

Projektkonfiguration

Dein Astro-Projekt kann auf Deno Deploy als statische Website oder als serverseitig gerenderte Website (SSR) bereitgestellt werden.

Statische Website

Dein Astro-Projekt ist standardmäßig eine statische Website. Du brauchst keine zusätzliche Konfiguration, um eine statische Astro-Site an Deno Deploy zu übergeben.

Adapter für SSR

So aktivierst du SSR in deinem Astro-Projekt und stellst es mit Deno Deploy bereit:

Füge den Deno-Adapter 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 deno

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

  1. Installiere den @deno/astro-adapter-Adapter mit deinem bevorzugten Paketmanager als Abhängigkeit deines Projekts. Wenn du npm verwendest oder dir nicht sicher bist, führe dies im Terminal aus:

      npm install @deno/astro-adapter

  2. Aktualisiere deine Projektkonfigurationsdatei astro.config.mjs mit den folgenden Änderungen.

    // astro.config.mjs
import { defineConfig } from 'astro/config';
import deno from '@deno/astro-adapter';

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

    Als Nächstes aktualisierst du dein Preview-Skript in der Datei package.json mit der folgenden Änderung.

    // package.json
{
  // ...
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
    "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs"
  }
}

    Du kannst jetzt diesen Befehl verwenden, um deine Astro-Produktionsseite lokal mit Deno zu überprüfen.

    npm run preview

Wie man veröffentlicht

Du kannst Deno Deploy über GitHub Actions oder über das Deno Deploy CLI (Command Line Interface) bereitstellen.

GitHub Actions Veröffentlichung

Wenn dein Projekt auf GitHub gespeichert ist, führt dich die Deno Deploy-Webseite durch die Einrichtung von GitHub-Aktionen für die Bereitstellung deiner Astro-Seite.

  1. Veröffentliche deinen Code in einem öffentlichen oder privaten GitHub-Repository.

  2. Melde dich auf Deno Deploy mit deinem GitHub-Konto an und klicke auf Neues Projekt.

  3. Wähle dein Repository und den Branch aus, den du bereitstellen möchtest, und wähle den Modus GitHub Action. (Deine Astro-Seite benötigt einen Build-Schritt und kann den automatischen Modus nicht verwenden.)

  4. Erstelle in deinem Astro-Projekt eine neue Datei unter .github/workflows/deploy.yml und füge die unten stehende YAML ein. Diese Datei ähnelt der YAML-Datei von Deno Deploy, mit den zusätzlichen Schritten, die du für deine Astro-Seite benötigst.

      ---
  // .github/workflows/deploy.yml
  ---
  name: Deploy
  on: [push]

  jobs:
    deploy:
      name: Deploy
      runs-on: ubuntu-latest
      permissions:
        id-token: write # Benötigt für die Autorisierung mit Deno Deploy
        contents: read # Benötigt, um das Repository zu klonen

      steps:
        - name: Clone repository
          uses: actions/checkout@v4

        # Du benutzt kein npm? Ändere `npm ci` in `yarn install` oder `pnpm i`
        - name: Install dependencies
          run: npm ci

        # Du benutzt kein npm? Ändere `npm run build` in `yarn build` oder `pnpm run build`
        - name: Build Astro
          run: npm run build

        - name: Upload to Deno Deploy
          uses: denoland/deployctl@v1
          with:
            project: my-deno-project # TODO: durch Deno Deploy Projektnamen ersetzen
            entrypoint: jsr:@std/http/file-server
            root: dist

  5. Nachdem du diese YAML-Datei übertragen und auf GitHub in deinem konfigurierten Veröffentlichungs-Branch gepusht hast, sollte die Veröffentlichung automatisch beginnen!

    Du kannst den Fortschritt auf der Registerkarte "Aktionen" auf deiner GitHub-Repository-Seite oder auf Deno Deploy verfolgen.

CLI-Veröffentlichung

  1. Installiere das Deno Deploy CLI.

    deno install -gArf jsr:@deno/deployctl

  2. Führe deinen Astro-Bauschritt aus.

    npm run build

  3. Führe deployctl zum Veröffentlichen aus!

    Ersetze im folgenden Befehl <ACCESS-TOKEN> mit deinem Personal Access Token und <MY-DENO-PROJECT> mit deinem Deno Deploy-Projektnamen.

      cd dist && DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> deployctl deploy --project=<MY-DENO-PROJECT> jsr:@std/http/file-server

    Du kannst alle deine Veröffentlichungen auf Deno Deploy verfolgen.

  4. (Optional) Um den Build und die Veröffentlichung in einem Befehl zu vereinfachen, füge ein deploy-deno Skript in die package.json ein.

      // package.json
  {
    // ...
    "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "deno-deploy": "npm run build && cd dist && deployctl deploy --project=<MY-DENO-PROJECT> jsr:@std/http/file-server"
    }
  }

    Dann kannst du diesen Befehl verwenden, um deine Astro-Seite in einem Schritt zu erstellen und veröffentlichen.

    DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> npm run deno-deploy

Weitere Veröffentlichungs-Anleitungen

Wirke mit Community Sponsor