Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 135 additions & 42 deletions src/content/docs/de/guides/deploy/deno.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Veröffentliche deine Astro-Website auf Deno
title: Veröffentliche deine Astro-Website mit Deno
description: Wie du deine Astro-Webseite mit Deno im Internet veröffentlichst.
sidebar:
label: Deno Deploy
Expand All @@ -8,44 +8,50 @@ logo: deno
supports: ['ssr', 'static']
i18nReady: true
---

import { Steps } from '@astrojs/starlight/components';
import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Du kannst eine serverseitig gerenderte Astro-Seite auf [Deno Deploy](https://deno.com/deploy) veröffentlichen, einem verteilten System, das JavaScript, TypeScript und WebAssembly weltweit ausführt.
Du kannst eine statische oder serverseitig gerenderte Astro-Seite mittels Deno veröffentlichen, entweder auf Deinem eigenen Server oder auf [Deno Deploy](https://deno.com/deploy), 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.
Dieser Leitfaden enthält Anweisungen dazu, wie Du Deine Astro-Site mittels Deno auf Deinem eigenen Server betreibst sowie zur Bereitstellung in Deno Deploy über GitHub Actions oder die CLI von Deno Deploy.

## Anforderungen

In dieser Anleitung wird davon ausgegangen, dass du [Deno](https://deno.com/) bereits installiert hast.

## Projektkonfiguration

Dein Astro-Projekt kann auf [Deno Deploy](https://deno.com/deploy) als statische Website oder als serverseitig gerenderte Website (SSR) bereitgestellt werden.
Dein Astro-Projekt kann 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.
Dein Astro-Projekt ist standardmäßig eine statische Website. Du brauchst keine zusätzliche Konfiguration, um eine statische Astro-Site mit Deno zu veröffentlichen oder an Deno Deploy zu übergeben.

### Adapter für SSR
### Adapter für Rendern bei Bedarf (SSR)

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

Füge [den Deno-Adapter][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.

```bash
npx astro add deno
```

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

<Steps>
1. Installiere [den `@deno/astro-adapter`-Adapter][Deno 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:

```bash
npm install @deno/astro-adapter
```
1. Installiere [den `@deno/astro-adapter`-Adapter][Deno adapter] mit deinem bevorzugten Paketmanager als Abhängigkeit deines Projekts.

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install @deno/astro-adapter
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm install @deno/astro-adapter
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add @deno/astro-adapter
```
</Fragment>
</PackageManagerTabs>

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

Expand All @@ -60,7 +66,7 @@ Wenn du den Adapter stattdessen lieber manuell installieren möchtest, führe di
});
```

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

```json del={8} ins={9}
// package.json
Expand All @@ -77,15 +83,91 @@ Wenn du den Adapter stattdessen lieber manuell installieren möchtest, führe di
```

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

```bash
npm run preview
```

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm run preview
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm run preview
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn run preview
```
</Fragment>
</PackageManagerTabs>
</Steps>

## Wie man veröffentlicht

Du kannst Deno Deploy über GitHub Actions oder über das Deno Deploy CLI (Command Line Interface) bereitstellen.
Du kannst deine Astro-Site auf Deinem eigenen Server betreiben oder auf Deno Deploy über GitHub Actions oder über das Deno Deploy CLI (Command Line Interface) bereitstellen.

### Auf Deinem eigenen Server

<Steps>
1. Kopiere Dein Projekt auf Deinen Server.

2. Installiere die Abhängigkeiten des Projekts mit deinem bevorzugten Paketmanager:

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm install
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn
```
</Fragment>
</PackageManagerTabs>

3. Erstelle Deine Astro-Site mit deinem bevorzugten Paketmanager:

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm run build
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm run build
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn run build
```
</Fragment>
</PackageManagerTabs>

4. Starte Deine Applikation mit dem folgenden Befehl:

<StaticSsrTabs>
<Fragment slot="static">
```bash
deno run -A jsr:@std/http/file-server dist
```
</Fragment>

<Fragment slot="ssr">
```bash
deno run -A ./dist/server/entry.mjs
```
</Fragment>
</StaticSsrTabs>
</Steps>

### GitHub Actions Veröffentlichung

Expand Down Expand Up @@ -119,7 +201,7 @@ Wenn dein Projekt auf GitHub gespeichert ist, führt dich die [Deno Deploy-Webse

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

# Du benutzt kein npm? Ändere `npm ci` in `yarn install` oder `pnpm i`
- name: Install dependencies
Expand Down Expand Up @@ -156,7 +238,7 @@ Wenn dein Projekt auf GitHub gespeichert ist, führt dich die [Deno Deploy-Webse

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

# Du benutzt kein npm? Ändere `npm ci` in `yarn install` oder `pnpm i`
- name: Install dependencies
Expand All @@ -170,8 +252,7 @@ Wenn dein Projekt auf GitHub gespeichert ist, führt dich die [Deno Deploy-Webse
uses: denoland/deployctl@v1
with:
project: my-deno-project # TODO: durch Deno Deploy Projektnamen ersetzen
entrypoint: server/entry.mjs
root: dist
entrypoint: dist/server/entry.mjs
```
</Fragment>
</StaticSsrTabs>
Expand All @@ -190,26 +271,38 @@ Wenn dein Projekt auf GitHub gespeichert ist, führt dich die [Deno Deploy-Webse
deno install -gArf jsr:@deno/deployctl
```

2. Führe deinen Astro-Bauschritt aus.

```bash
npm run build
```
2. Erstelle Deine Astro-Site mit Deinem bevorzugten Paketmanager:

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm run build
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm run build
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn run build
```
</Fragment>
</PackageManagerTabs>

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

Ersetze im folgenden Befehl `<ACCESS-TOKEN>` mit deinem [Personal Access Token](https://dash.deno.com/account#access-tokens) und `<MY-DENO-PROJECT>` mit deinem Deno Deploy-Projektnamen.

<StaticSsrTabs>
<Fragment slot="static">
```bash
cd dist && DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> deployctl deploy --project=<MY-DENO-PROJECT> jsr:@std/http/file-server
cd dist && deployctl deploy jsr:@std/http/file-server
```
</Fragment>

<Fragment slot="ssr">
```bash
DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> deployctl deploy --project=<MY-DENO-PROJECT> --no-static --include=./dist ./dist/server/entry.mjs
deployctl deploy ./dist/server/entry.mjs
```
</Fragment>
</StaticSsrTabs>
Expand All @@ -229,7 +322,7 @@ Wenn dein Projekt auf GitHub gespeichert ist, führt dich die [Deno Deploy-Webse
"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"
"deno-deploy": "npm run build && cd dist && deployctl deploy jsr:@std/http/file-server"
}
}
```
Expand All @@ -244,7 +337,7 @@ Wenn dein Projekt auf GitHub gespeichert ist, führt dich die [Deno Deploy-Webse
"start": "astro dev",
"build": "astro build",
"preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
"deno-deploy": "npm run build && deployctl deploy --project=<MY-DENO-PROJECT> --no-static --include=./dist ./dist/server/entry.mjs"
"deno-deploy": "npm run build && deployctl deploy ./dist/server/entry.mjs"
}
}
```
Expand All @@ -254,7 +347,7 @@ Wenn dein Projekt auf GitHub gespeichert ist, führt dich die [Deno Deploy-Webse
Dann kannst du diesen Befehl verwenden, um deine Astro-Seite in einem Schritt zu erstellen und veröffentlichen.

```bash
DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> npm run deno-deploy
npm run deno-deploy
```
</Steps>

Expand Down
Loading