Skip to content

Commit

Permalink
Merge branch 'main' into gui-dep-gl
Browse files Browse the repository at this point in the history
  • Loading branch information
@yanthomasdev
yanthomasdev authored Dec 16, 2024
2 parents d627cc5 + 38535ad commit 930bc17
Show file tree
Hide file tree
Showing 161 changed files with 3,513 additions and 2,430 deletions.
3 changes: 2 additions & 1 deletion src/components/starlight/Sidebar.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ function assertGroups(sidebar: SidebarEntry[]): asserts sidebar is Group[] {
assertGroups(sidebar);
/** Convert a group label to an `id` we can use to identify tab panels. */
const makeId = (label: string) => label.toLowerCase().replaceAll(/\s+/g, '-');
// The id is prefixed to avoid clashing with existing heading IDs on the page.
const makeId = (label: string) => '__tab-' + label.toLowerCase().replaceAll(/\s+/g, '-');
/** Get the icon for a group. Update the icon names in the array to change the icons associated with a group. */
const getIcon = (index: number) =>
Expand Down
34 changes: 17 additions & 17 deletions src/content/docs/de/basics/project-structure.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Projektstruktur
description: Erfahre, wie du ein Projekt mit Astro strukturierst.
description: Eine Einführung in die grundlegende Dateistruktur eines Astro-Projekts.
i18nReady: true
---

Expand All @@ -14,7 +14,7 @@ Hier erfährst du, wie ein Astro-Projekt grundsätzlich organisiert ist, und wel

Astro nutzt einige fest vorgegebene Verzeichnisse, um dein Projekt zu strukturieren. Das Stammverzeichnis jedes Astro-Projekts sollte die folgenden Verzeichnisse und Dateien enthalten:

- `src/*` - Der Quellcode deines Projekts (Komponenten, Seiten, Stile, usw.)
- `src/*` - Der Quellcode deines Projekts (Komponenten, Seiten, Stile, Bilder, usw.)
- `public/*` - Nicht zu verarbeitende Inhalte, die kein Quellcode sind (Schriftarten, Symbole usw.)
- `package.json` - Die Projektdatei deines Paketmanagers
- `astro.config.mjs` - Eine Astro-Konfigurationsdatei (wird empfohlen)
Expand All @@ -28,17 +28,19 @@ Ein typischer Astro-Verzeichnisbaum könnte so aussehen:
- public/
- robots.txt
- favicon.svg
- social-image.png
- mein-lebenslauf.pdf
- src/
- blog/
- post1.md
- post2.md
- post3.md
- components/
- Header.astro
- Button.jsx
- content/
- config.ts
- posts/
- post1.md
- post2.md
- post3.md
- images/
- image1.jpg
- image2.jpg
- image3.jpg
- layouts/
- PostLayout.astro
- pages/
Expand All @@ -49,6 +51,7 @@ Ein typischer Astro-Verzeichnisbaum könnte so aussehen:
- rss.xml.js
- styles/
- global.css
- content.config.ts
- astro.config.mjs
- package.json
- tsconfig.json
Expand All @@ -64,13 +67,14 @@ Im `src/`-Verzeichnis befindet sich der Großteil deines Projektquellcodes. Dies
- [UI-Framework-Komponenten (React usw.)](/de/guides/framework-components/)
- [Stile (CSS, Sass)](/de/guides/styling/)
- [Markdown](/de/guides/markdown-content/)
- [Bilder, die von Astro optimiert und bearbeitet werden](/de/guides/images/)

Astro verarbeitet, optimiert und bündelt deine Dateien in `src/`, um die endgültige Website zu erstellen, die an den Browser gesendet wird. Im Gegensatz zum statischen `public/`-Verzeichnis werden deine `src/`-Dateien von Astro für dich verarbeitet und optimiert:

Einige Dateien (z.B. Astro-Komponenten) werden gar nicht so an den Browser gesendet, wie du sie geschrieben hast, sondern stattdessen in statisches HTML gerendert. Andere Dateien (z.B. CSS) werden zwar an den Browser gesendet, können aber zur Leistungsverbesserung vorher optimiert oder mit anderen CSS-Dateien gebündelt werden.

:::tip
Dieser Leitfaden beschreibt zwar einige gängige Konventionen, die in der Astro-Community verwendet werden, aber die einzigen Verzeichnisse, die von Astro reserviert sind, sind `src/pages/` und `src/content/`. Es steht dir frei, alle anderen Verzeichnisse so umzubenennen und umzugestalten, wie es für dich am besten ist.
Dieser Leitfaden beschreibt zwar einige gängige Konventionen, die in der Astro-Community verwendet werden, aber das einzigen Verzeichnis, welches von Astro reserviert ist, ist `src/pages/`. Es steht dir frei, alle anderen Verzeichnisse so umzubenennen und umzugestalten, wie es für dich am besten ist.
:::

### `src/pages`
Expand All @@ -87,10 +91,6 @@ Seitenrouten werden für deine Website erstellt, indem du [unterstützte Dateity

Diese Vorgehensweise ist in Astro-Projekten üblich, aber nicht zwingend erforderlich. Du kannst deine Komponenten gerne auch anders organisieren!

### `src/content`

Das Verzeichnis `src/content/` ist für die Speicherung von [Inhaltssammlungen](/de/guides/content-collections/) und einer Konfigurationsdatei reserviert. Andere Dateien sind in diesem Verzeichnis nicht erlaubt.

### `src/layouts`

[Layouts](/de/basics/layouts/) sind Astro-Komponenten, welche die UI-Struktur definieren, die von einer oder mehreren [Seiten](/de/basics/astro-pages/) gemeinsam genutzt wird.
Expand All @@ -105,7 +105,7 @@ Es ist eine übliche Vorgehensweise, deine CSS- oder Sass-Stile im Verzeichnis `

Das Verzeichnis `public/` ist für Dateien und Inhalte vorgesehen, die Astro während des Buildvorgangs nicht verarbeiten muss. Die Dateien in diesem Ordner werden unverändert in den Build-Ordner kopiert, und dann wird deine Website gebaut.

Dieses Verhalten macht `public/` ideal für verbreitete Inhalte wie Bilder und Schriftarten, sowie für besondere Dateien wie `robots.txt` und `manifest.webmanifest`.
Dieses Verhalten macht `public/` ideal für allgemeine Inhalte, die keine Bearbeitung benötigen, wie z.B. einige Bilder und Schriftarten oder spezielle Dateien wie `robots.txt` und `manifest.webmanifest`.

Du kannst zwar auch CSS- und JavaScript-Dateien in `public/` speichern, beachte aber bitte, dass diese dann während des Buildvorgangs weder gebündelt noch optimiert werden.

Expand All @@ -115,7 +115,7 @@ Als allgemeine Regel kann man sagen, dass jeglicher CSS- oder JavaScript-Code, d

### `package.json`

Diese Datei wird von JavaScript-Paketmanagern verwendet, um die erforderlichen Pakete ("Abhängigkeiten") eines Projekts zu verwalten. Sie definiert auch die Skripte, die üblicherweise dazu verwendet werden, um Astro auszuführen (z.B. `npm start`, `npm run build`).
Diese Datei wird von JavaScript-Paketmanagern verwendet, um die erforderlichen Pakete ("Abhängigkeiten") eines Projekts zu verwalten. Sie definiert auch die Skripte, die üblicherweise dazu verwendet werden, um Astro auszuführen (z.B. `npm run dev`, `npm run build`).

Es gibt [zwei Arten von Abhängigkeiten](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file), die du in deiner `package.json`-Datei festlegen kannst: `dependencies` und `devDependencies`. In den meisten Fällen funktionieren sie auf die gleiche Weise: Astro benötigt zum Erzeugungszeitpunkt alle Abhängigkeiten, und auch dein Paketmanager wird beide Arten installieren. Wir empfehlen dir, all deine Abhängigkeiten zunächst in `dependencies` einzutragen, und `devDependencies` nur zu verwenden, wenn dein spezieller Anwendungsfall es erfordert.

Expand All @@ -129,7 +129,7 @@ Astro unterstützt mehrere Dateiformate für seine JavaScript-Konfigurationsdate

Das Laden von TypeScript-Konfigurationsdateien wird mit [`tsm`](https://github.com/lukeed/tsm) gehandhabt und berücksichtigt die `tsconfig`-Optionen deines Projekts.

In der [Astro-Konfigurationsanleitung](/de/reference/configuration-reference/) findest du weitere Informationen zum Einstellen der Konfigurationen.
In der [Konfigurationsreferenz](/de/reference/configuration-reference/) findest du alle Einzelheiten.

### `tsconfig.json`

Expand Down
96 changes: 23 additions & 73 deletions src/content/docs/de/guides/deploy/google-cloud.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
---
title: Veröffentliche deine Astro-Website auf Google Cloud
description: Wie du deine Astro-Website auf Google Cloud im Internet veröffentlichst.
sidebar:
label: Google Cloud
type: deploy
i18nReady: true
---

import { Steps } from '@astrojs/starlight/components';

[Google Cloud](https://cloud.google.com/) ist eine voll ausgestattete Web-App-Hosting-Plattform, die für die Veröffentlichung einer Astro-Website verwendet werden kann.

## So funktioniert die Veröffentlichung

### Cloud Storage (nur statisch)

<Steps>
1. [Erstelle ein neues GCP-Projekt](https://console.cloud.google.com/projectcreate) oder wähle ein bereits vorhandenes Projekt aus.

2. Erstelle einen neuen Bucket unter [Cloud Storage](https://cloud.google.com/storage).
Expand All @@ -22,119 +27,64 @@ i18nReady: true
5. Aktiviere den öffentlichen Zugriff, indem du `allUsers` eine neue Berechtigung namens `Storage Object Viewer` hinzufügst.

6. Bearbeite die Website-Konfiguration und füge `ìndex.html` als Einstiegspunkt und `404.html` als Fehlerseite hinzu.
</Steps>

### Cloud Run (SSR und statisch)

Cloud Run ist eine serverlose Plattform, die es dir ermöglicht, einen Container zu betreiben, ohne dass du eine Infrastruktur verwalten musst. Sie kann sowohl für statische als auch für SSR-Websites genutzt werden.

#### Bereite den Dienst vor

<Steps>
1. [Erstelle ein neues GCP-Projekt](https://console.cloud.google.com/projectcreate) oder wähle ein bereits vorhandenes Projekt aus.

2. Stelle sicher, dass die [Cloud Run API](https://console.cloud.google.com/apis/library/run.googleapis.com) aktiviert ist.

3. Erstelle einen neuen Dienst.
</Steps>

#### Die Dockerdatei erstellen

##### Dockerfile für statische Websites (Beispiel)

Das folgende Dockerfile erstellt deine Website und stellt sie mit Apache HTTPD (Standardkonfiguration) auf Port `80` bereit.

```docker title="Dockerfile"
FROM node:lts AS build
WORKDIR /app
COPY . .
RUN npm i
RUN npm run build
FROM httpd:2.4 AS runtime
COPY --from=build /app/dist /usr/local/apache2/htdocs/
EXPOSE 80
```

:::note
Wenn du einen anderen Paketmanager als `npm` verwendest, musst du die Befehle ändern:

```docker title="Dockerfile" add={4} "pnpm"
FROM node:lts AS build
WORKDIR /app
COPY . .
RUN npm i -g pnpm@latest
RUN pnpm i
RUN pnpm run build
# ...
```
:::

##### Dockerfile für SSR-Websites (Beispiel)

Das folgende Dockerfile erstellt deine Website und stellt sie mit Node.js (SSR-Adapter) auf Port `4321` bereit.
#### Dockerfile erstellen & Container erzeugen

```docker title="Dockerfile"
FROM node:lts AS runtime
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
ENV HOST=0.0.0.0
ENV PORT=4321
EXPOSE 4321
CMD node ./dist/server/entry.mjs
```

:::tip[Bitte bedenke Folgendes:]
Dies sind nur Beispiele für Dockerdateien. Du kannst sie an deine Bedürfnisse anpassen. Du könntest zum Beispiel ein anderes Docker-Image wie `node:lts-alpine` verwenden.

```docker title="Dockerfile" del={1} add={2}
FROM node:lts AS runtime
FROM node:lts-alpine AS runtime
```
:::

#### Erstelle den Container
Bevor du deine Astro-Website in Cloud Run veröffentlichen kannst, musst du ein Dockerfile erstellen, mit dem du den Container erzeugen kannst. Weitere Informationen über [wie du Docker mit Astro verwendest](/de/recipes/docker/#creating-a-dockerfile) findest du in unseren Beispielen.

Sobald das Dockerfile erstellt ist, erstellst du ein Image und überträgst es zu Google Cloud. Es gibt mehrere Möglichkeiten, dies zu tun:

**Lokale Erstellung mit Docker**:
**Lokale Erzeugung mit Docker**:

Verwende den Befehl `docker build`, um das Image zu erstellen, `docker tag`, um ihm einen Tag zu geben, und dann `docker push`, um es an eine Registry zu übergeben. Im Fall von Google Cloud ist [Google Cloud Registry](https://cloud.google.com/container-registry/docs/pushing-and-pulling#add-registry) die einfachste Option, aber du kannst auch [Docker Hub](https://hub.docker.com/) verwenden.
Verwende den Befehl `docker build`, um das Image zu erstellen, `docker tag`, um ihm ein Tag zu geben, und dann `docker push`, um es in eine Registry zu pushen. Im Fall von Google Cloud ist [`Artifact Registry`] (https://cloud.google.com/artifact-registry/docs/docker/pushing-and-pulling) die einfachste Option, aber du kannst auch [Docker Hub](https://hub.docker.com/) verwenden.

```bash
# Erstelle deinen Container
# Erzeuge deinen Container
docker build .

docker tag SOURCE_IMAGE HOSTNAME/PROJECT-ID/TARGET-IMAGE:TAG

# Übertrage dein Image in eine Registry
# Pushe dein Image in eine Registry
docker push HOSTNAME/PROJECT-ID/IMAGE:TAG
```

Ändere die folgenden Werte in den obigen Befehlen, damit sie zu deinem Projekt passen:

- `SOURCE_IMAGE`: Der lokalen Image-Namen oder die Image-ID.
- `HOSTNAME`: Der Registry-Host (`gcr.io`, `eu.gcr.io`, `asia.gcr.io`, `us.gcr.io`).
- `PROJECT`: Deine Google Cloud Projekt-ID.
- `TARGET-IMAGE`: Der Name für das Image, wenn es in der Registry gespeichert wird.
- `TAG` Die Version, die mit dem Image verknüpft ist

- `SOURCE_IMAGE`: der lokale Imagename oder die Image-ID.
- `HOSTNAME`: der Registry-Host (`gcr.io`, `eu.gcr.io`, `asia.gcr.io`, `us.gcr.io`, `docker.io`).
- `PROJECT`: deine Google Cloud Projekt-ID.
- `TARGET-IMAGE`: Der Name für das Image, wenn es in der Registry gespeichert wird.
- `TAG` ist die Version, die mit dem Image verknüpft ist.

[Erfahre mehr in der Google-Cloud-Dokumentation](https://cloud.google.com/container-registry/docs/pushing-and-pulling)
[Lies mehr in der Google Cloud-Dokumentation](https://cloud.google.com/artifact-registry/docs/docker/pushing-and-pulling)

**Ein anderes Tool verwenden**:

Du kannst ein CI/CD-Tool verwenden, das Docker unterstützt, z.B. [GitHub Actions](https://github.com/marketplace/actions/push-to-gcr-github-action).

**Erstelle mit [Cloud Build](https://cloud.google.com/build)**:
**Erzeuge mit [Cloud Build](https://cloud.google.com/build)**:

Anstatt die Dockerdatei lokal zu erstellen, kannst du Google Cloud anweisen, das Image per Fernzugriff zu erstellen. Siehe dazu die [Google Cloud Build-Dokumentation](https://cloud.google.com/build/docs/build-push-docker-image).

#### Den Container erstellen
#### Den Container veröffentlichen

Das Deployment kann manuell in deinem Terminal [mit `gcloud`](https://cloud.google.com/run/docs/deploying#service) oder automatisch mit [Cloud Build](https://cloud.google.com/build) oder einem anderen CI/CD-System durchgeführt werden.
Die Veröffentlichung kann manuell in deinem Terminal [mit `gcloud`](https://cloud.google.com/run/docs/deploying#service) oder automatisch mit [Cloud Build](https://cloud.google.com/build) oder einem anderen CI/CD-System durchgeführt werden.

:::note[Benötigst du öffentlichen Zugang?]
Vergiss nicht, die Berechtigung `Cloud Run Invoker` zur Gruppe `allUsers` in den Cloud Run-Berechtigungseinstellungen hinzuzufügen!
Expand Down
Loading

0 comments on commit 930bc17

Please sign in to comment.