Tutorials

Automatisierte Deployment-Pipeline: Von Localhost über GitHub zu AWS S3 mit CodePipeline

Melden

Hier ist ein Schritt-für-Schritt-Tutorial, wie du eine automatisierte CI/CD-Pipeline einrichtest, um Code von deinem lokalen Rechner über GitHub direkt in einen AWS S3 Bucket zu übertragen.

Dieses Tutorial zeigt dir, wie du eine professionelle Pipeline aufbaust. Sobald du Code in dein GitHub-Repository pushst, aktualisiert AWS CodePipeline automatisch den Inhalt deines S3-Buckets.

Voraussetzungen

  • Ein installierter Git-Client auf deinem Rechner.
  • Ein GitHub-Account.
  • Ein AWS-Account.
  • Ein einfaches Projekt (z.B. eine index.html).

Schritt 1: Localhost zu GitHub

Zuerst bringen wir deinen lokalen Code auf GitHub.

  1. Erstelle ein neues Repository auf GitHub (z.B. mein-s3-projekt).
  2. Öffne dein Terminal/CMD in deinem lokalen Projektordner.
  3. Initialisiere Git und lade den Code hoch:
    git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/DEIN_USERNAME/mein-s3-projekt.git
git push -u origin main

Schritt 2: AWS S3 Bucket vorbereiten

Nun erstellen wir den Zielort für deine Dateien.

  1. Logge dich in die AWS Management Console ein und gehe zu S3.
  2. Klicke auf Bucket erstellen.
  3. Gib einen eindeutigen Bucket-Namen ein und wähle eine Region.
  4. Wichtig für Webseiten: Deaktiviere „Alle öffentlichen Zugriffe blockieren“, wenn der Bucket als Website öffentlich erreichbar sein soll (bestätige die Warnung).
  5. Klicke auf Bucket erstellen.
  6. (Optional) Gehe im Bucket auf den Reiter Eigenschaften, scrolle nach unten zu Statisches Website-Hosting und aktiviere es. Gib index.html als Indexdokument an.

Schritt 3: AWS CodePipeline einrichten

Dies ist das Herzstück, das GitHub mit S3 verbindet.

  1. Suche in AWS nach CodePipeline und klicke auf Pipeline erstellen.
  2. Schritt 1: Pipeline-Einstellungen wählen:
    • Name: S3-Deployment-Pipeline.
    • Dienstrolle: Neue Dienstrolle (AWS erstellt diese automatisch für dich).
  3. Schritt 2: Quellphase hinzufügen:
    • Quellanbieter: GitHub (Version 2).
    • Klicke auf Mit GitHub verbinden und autorisiere AWS.
    • Wähle dein Repository und den Branch (main) aus.
    • Lasse „Codepipeline-Standard“ bei den Trigger-Einstellungen.
  4. Schritt 3: Build-Phase hinzufügen:
    • Da wir nur einfache Dateien (HTML/CSS) übertragen, klicken wir hier auf Build-Phase überspringen. (Bei React- oder Angular-Projekten würdest du hier AWS CodeBuild nutzen).
  5. Schritt 4: Bereitstellungsphase (Deploy) hinzufügen:
    • Bereitstellungsanbieter: Amazon S3.
    • Region: Wähle die Region deines Buckets.
    • Bucket: Wähle deinen erstellten Bucket aus.
    • Ganz wichtig: Aktiviere die Checkbox Datei vor dem Bereitstellen extrahieren. (GitHub sendet ein .zip-Archiv; diese Option entpackt es direkt in den S3-Bucket).
  6. Schritt 5: Überprüfen: Klicke auf Pipeline erstellen.

Schritt 4: Berechtigungen anpassen (Bucket Policy)

Damit deine Pipeline Dateien in den S3-Bucket schreiben darf (und Besucher sie sehen können), musst du die Rechte prüfen.

  1. Gehe in S3 zu deinem Bucket -> Berechtigungen.
  2. Bearbeite die Bucket-Richtlinie (Bucket Policy), falls du eine öffentliche Website hostest:
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::DEIN-BUCKET-NAME/*"
        }
    ]
}

    (Ersetze DEIN-BUCKET-NAME durch deinen tatsächlichen Namen).

Schritt 5: Der Test (Der magische Moment)

Testen wir nun den gesamten Workflow:

  1. Ändere lokal in deinem Editor die index.html (z.B. den Text in der H1-Überschrift).
  2. Pushe die Änderung zu GitHub:
    git add .
git commit -m "Update Test"
git push origin main
  3. Gehe in der AWS Console zu CodePipeline. Du wirst sehen, wie die Pipeline automatisch startet (Status: In Progress).
  4. Sobald die Pipeline auf Succeeded steht, öffne deinen S3-Bucket oder die S3-Website-URL. Deine Änderungen sind live!

Zusammenfassung der Vorteile

  • Kein manuelles Hochladen: Nie wieder Dateien per Drag & Drop in S3 ziehen.
  • Versionskontrolle: Du hast die volle Historie deiner Deployments in GitHub.
  • Skalierbarkeit: Du kannst später jederzeit eine Build-Stufe (z.B. für SASS oder Tests) dazwischenschalten.
0