Veröffentliche deine Astro-Website auf AWS

AWS ist eine umfangreiche Web-App-Hosting-Plattform, die für die Bereitstellung einer Astro-Seite verwendet werden kann.

Für die Bereitstellung deines Projekts bei AWS musst du die AWS-Konsole verwenden. (Die meisten dieser Aktionen können auch mit der AWS CLI durchgeführt werden). Diese Anleitung führt dich durch die Schritte zur Bereitstellung deiner Website bei AWS mit AWS Amplify, S3 static website hosting und CloudFront.

AWS Amplify

AWS Amplify ist eine Reihe von speziell entwickelten Tools und Funktionen, mit denen Frontend-Web- und Mobilentwickler schnell und einfach Full-Stack-Anwendungen auf AWS erstellen können.

Erstelle ein neues Amplify Hosting Projekt.
Verbinde dein Repository mit Amplify.
Ändere deine Build-Einstellungen, um sie an den Build-Prozess deines Projekts anzupassen.
- npm
- pnpm
- Yarn
version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: /dist files: - '**/*' cache: paths: - node_modules/**/*
version: 1 frontend: phases: preBuild: commands: - npm i -g pnpm - pnpm config set store-dir .pnpm-store - pnpm i build: commands: - pnpm run build artifacts: baseDirectory: /dist files: - '**/*' cache: paths: - .pnpm-store/**/*
version: 1 frontend: phases: preBuild: commands: - yarn install build: commands: - yarn build artifacts: baseDirectory: /dist files: - '**/*' cache: paths: - node_modules/**/*

Amplify stellt deine Website automatisch bereit und aktualisiert sie, wenn du einen Commit an dein Repository sendest.

Statisches Website-Hosting mit S3

S3 ist der Startpunkt jeder Anwendung. Hier werden deine Projektdateien und andere Assets gespeichert. S3 berechnet Gebühren für die Speicherung von Dateien und die Anzahl der Anfragen. Weitere Informationen über S3 findest du in der AWS-Dokumentation.

Erstelle einen S3-Bucket mit dem Namen deines Projekts.

Der Bucket-Name sollte weltweit eindeutig sein. Wir empfehlen eine Kombination aus deinem Projektnamen und dem Domainnamen deiner Website.
Deaktiviere “Blockieren des gesamten öffentlichen Zugriffs”. Standardmäßig werden alle Buckets von AWS als privat eingestuft. Um sie öffentlich zu machen, musst du das Kontrollkästchen “Blockieren des gesamten öffentlichen Zugriffs” in den Berechtigungen des Buckets deaktivieren.
Lade deine erstellten Dateien, die sich in dist befinden, in S3 hoch. Du kannst dies manuell in der Konsole tun oder die AWS CLI verwenden. Wenn du die AWS CLI verwendest, gibst du nach der Authentifizierung mit deinen AWS-Anmeldeinformationen folgenden Befehl ein:
```
aws s3 cp dist/ s3://<BUCKET_NAME>/ --recursive
```

Aktualisiere deine Bucket-Richtlinie, um öffentlichen Zugriff zu erlauben. Du findest diese Einstellung unter Berechtigungen > Bucket-Richtlinie des Buckets.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<BUCKET_NAME>/*"
    }
  ]
}

Aktiviere das Website-Hosting für deinen Bucket. Du findest diese Einstellung in den Einstellungen > Hosten einer statischen Website des Buckets. Setze dein Index-Dokument auf index.html und dein Fehler-Dokument auf 404.html. Schließlich findest du deine neue Website-URL unter Einstellungen > Hosten einer statischen Website im Bucket.

Wenn du eine Single-Page-Anwendung (SPA) bereitstellst, setze dein Fehlerdokument auf index.html.

S3 mit CloudFront

CloudFront ist ein Webservice, der Content Delivery Network (CDN)-Funktionen bietet. Er wird verwendet, um Inhalte eines Webservers zwischenzuspeichern und an Endnutzer zu verteilen. CloudFront erhebt Gebühren für die übertragene Datenmenge. Wenn du CloudFront zu deinem S3-Bucket hinzufügst, ist das kostengünstiger und ermöglicht eine schnellere Bereitstellung.

Um S3 mit Cloudfront zu verbinden, erstellst du eine CloudFront-Distribution mit den folgenden Werten:

Ursprungsdomäne: Der Endpunkt deiner statischen Website im S3-Bucket. Du findest deinen Endpunkt in den Eigenschaften > Statisches Website-Hosting deines S3-Buckets. Alternativ kannst du deinen S3-Bucket auswählen und auf das Callout klicken, um die Bucket-Adresse durch deinen statischen Bucket-Endpunkt zu ersetzen.
Viewer-Protokollrichtlinie: „Zu HTTPS umleiten“

Mit dieser Konfiguration wird deine Website über das Cloudfront CDN-Netzwerk bereitgestellt. Die URL deiner CloudFront-Distribution findest du im Bucket unter Distributionen > Domainname.

Kontinuierliche Bereitstellung mit GitHub-Actions

Es gibt viele Möglichkeiten, die kontinuierliche Bereitstellung für AWS einzurichten. Eine Möglichkeit für Code, der auf GitHub gehostet wird, ist die Verwendung von GitHub Actions, um deine Website bei jedem Commit bereitzustellen.

Erstelle in deinem AWS-Konto mit IAM eine neue Richtlinie mit den folgenden Berechtigungen. Mit dieser Richtlinie kannst du erstellte Dateien in deinen S3-Bucket hochladen und die CloudFront-Verteilungsdateien ungültig machen, wenn du einen Commit durchführst.

{
  "Version": "2012-10-17",
  "Statement": [
      {
          "Sid": "VisualEditor0",
          "Effect": "Allow",
          "Action": [
              "s3:PutObject",
              "s3:ListBucket",
              "s3:DeleteObject",
              "cloudfront:CreateInvalidation"
          ],
          "Resource": [
              "<DISTRIBUTION_ARN>",
              "arn:aws:s3:::<BUCKET_NAME>/*",
              "arn:aws:s3:::<BUCKET_NAME>"
          ]
      }
  ]
}

Erstelle einen neuen IAM-Benutzer und füge die Richtlinie an den Benutzer an. So erhältst du deinen AWS_SECRET_ACCESS_KEY und deine AWS_ACCESS_KEY_ID.

Füge diesen Beispielworkflow zu deinem Repository unter .github/workflows/deploy.yml hinzu und pushe ihn auf GitHub. Du musst AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, BUCKET_ID und DISTRIBUTION_ID als “Secrets” zu deinem Repository auf GitHub unter Settings > Secrets > Actions hinzufügen. Klicke auf Neues Repository-Secret, um jedes einzelne hinzuzufügen.

name: Website bereitstellen

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1
      - name: Install modules
        run: npm ci
      - name: Build application
        run: npm run build
      - name: Deploy to S3
        run: aws s3 sync --delete ./dist/ s3://${{ secrets.BUCKET_ID }}
      - name: Create CloudFront invalidation
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"