Automatisches Deployment von Websites auf AWS S3 mit GitLab CI/CD

Robin Janke

App-Experte aus Köln

10. Nov 2022

5 Minuten Lesezeit

Lernen Sie, wie Sie statische Websites automatisch auf AWS S3 mit GitLab CI/CD deployen können. Eine Schritt-für-Schritt-Anleitung für effiziente Deployment-Workflows.

Automatisches Deployment von Websites auf AWS S3 mit GitLab CI/CD

Als App-Agentur aus Köln mit umfassender DevOps-Expertise teilen wir heute unsere bewährte Methode zum automatischen Deployment statischer Websites auf AWS S3 mit GitLab CI/CD. Diese Lösung haben wir für zahlreiche Kundenprojekte implementiert und kontinuierlich optimiert.

Die Kombination von GitLab CI/CD und AWS S3 bietet einen leistungsstarken, kosteneffizienten Weg, um statische Websites automatisch zu deployen. In diesem Artikel führen wir Sie durch den gesamten Prozess - von der Einrichtung der AWS-Infrastruktur bis zur Konfiguration der GitLab CI/CD-Pipeline.

Schritt 1: AWS S3 Bucket einrichten

Zuerst müssen Sie einen S3 Bucket für Ihre Website erstellen:

Melden Sie sich bei der AWS Management Console an
Navigieren Sie zum S3-Service
Klicken Sie auf “Bucket erstellen”
Geben Sie einen eindeutigen Namen ein (idealerweise Ihre Domain, z.B. www.example.com)
Wählen Sie eine Region aus (idealerweise nahe an Ihren Nutzern)
Aktivieren Sie “Static website hosting” unter den Bucket-Eigenschaften
Setzen Sie “index.html” als Index-Dokument und optional “error.html” als Fehlerdokument
Konfigurieren Sie die Bucket-Richtlinie für öffentlichen Zugriff:

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

Schritt 2: CloudFront-Distribution einrichten (optional, aber empfohlen)

Für bessere Performance und HTTPS-Unterstützung empfehlen wir die Einrichtung einer CloudFront-Distribution:

Navigieren Sie zum CloudFront-Service in der AWS Console
Klicken Sie auf “Create Distribution”
Wählen Sie Ihren S3 Bucket als Origin
Konfigurieren Sie die folgenden Einstellungen:
- Viewer Protocol Policy: Redirect HTTP to HTTPS
- Allowed HTTP Methods: GET, HEAD
- Cache Policy: Managed-CachingOptimized
- Origin Request Policy: CORS-S3Origin
Setzen Sie “Default Root Object” auf “index.html”
Erstellen Sie die Distribution

Schritt 3: AWS-Zugangsdaten in GitLab einrichten

Für sicheren Zugriff auf AWS müssen Sie Ihre AWS-Zugangsdaten in GitLab speichern:

Erstellen Sie einen IAM-Benutzer in AWS mit den erforderlichen Berechtigungen für S3 und CloudFront
Navigieren Sie zu Ihrem GitLab-Projekt > Settings > CI/CD > Variables
Fügen Sie die folgenden Variablen hinzu:
- AWS_ACCESS_KEY_ID: Ihr AWS Access Key
- AWS_SECRET_ACCESS_KEY: Ihr AWS Secret Key
- AWS_DEFAULT_REGION: Die Region Ihres S3 Buckets
- BUCKET_NAME: Der Name Ihres S3 Buckets
- CLOUDFRONT_DISTRIBUTION_ID: Die ID Ihrer CloudFront-Distribution (falls vorhanden)

Stellen Sie sicher, dass Sie die Option “Masked” für sensible Werte aktivieren.

Schritt 4: GitLab CI/CD-Pipeline konfigurieren

Erstellen Sie eine .gitlab-ci.yml-Datei im Stammverzeichnis Ihres Projekts:

image: python:latest

stages:
  - deploy

deploy:
  stage: deploy
  when: always
  before_script:
    - pip install awscli
  script:
    - aws s3 sync ./public s3://${BUCKET_NAME} --delete
    - aws cloudfront create-invalidation --distribution ${CLOUDFRONT_DISTRIBUTION_ID} --paths "/*"
  environment:
    name: ${CI_COMMIT_REF_SLUG}
    url: https://${BUCKET_NAME}
  only:
    - master

Diese einfache Pipeline synchronisiert den Inhalt Ihres public-Verzeichnisses mit dem S3 Bucket und erstellt eine CloudFront-Invalidierung, um sicherzustellen, dass Ihre Änderungen sofort sichtbar sind.

Schritt 4: Pipeline anpassen und erweitern

Je nach Ihren spezifischen Anforderungen können Sie die Pipeline anpassen:

Für React-Anwendungen:

deploy:
  image: node:latest
  stage: deploy
  when: always
  before_script:
    - npm install
    - npm run build
    - pip install awscli
  script:
    - aws s3 sync ./build s3://${BUCKET_NAME} --delete
    - aws cloudfront create-invalidation --distribution ${CLOUDFRONT_DISTRIBUTION_ID} --paths "/*"
  environment:
    name: ${CI_COMMIT_REF_SLUG}
    url: https://${BUCKET_NAME}
  only:
  - master

Für Angular-Anwendungen:

deploy:
  image: node:latest
  stage: deploy
  when: always
  before_script:
    - npm install -g @angular/cli
    - npm install
    - ng build --prod
    - pip install awscli
  script:
    - aws s3 sync ./dist s3://${BUCKET_NAME} --delete
    - aws cloudfront create-invalidation --distribution ${CLOUDFRONT_DISTRIBUTION_ID} --paths "/*"
  environment:
    name: ${CI_COMMIT_REF_SLUG}
    url: https://${BUCKET_NAME}
  only:
  - master

Für Hugo-Websites (wie unsere eigene):

deploy:
  image: registry.gitlab.com/pages/hugo:latest
  stage: deploy
  when: always
  before_script:
    - hugo
    - pip install awscli
  script:
    - aws s3 sync ./public s3://${BUCKET_NAME} --delete
    - aws cloudfront create-invalidation --distribution ${CLOUDFRONT_DISTRIBUTION_ID} --paths "/*"
  environment:
    name: ${CI_COMMIT_REF_SLUG}
    url: https://${BUCKET_NAME}
  only:
  - master

Schritt 5: Mehrere Umgebungen einrichten

Für fortgeschrittene CI/CD-Workflows können Sie mehrere Umgebungen konfigurieren:

stages:
  - build
  - deploy
build:
  image: node:latest
  stage: build
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - build/
deploy_staging:
  image: python:latest
  stage: deploy
  before_script:
    - pip install awscli
  script:
    - aws s3 sync ./build s3://${STAGING_BUCKET_NAME} --delete
    - aws cloudfront create-invalidation --distribution ${STAGING_CLOUDFRONT_ID} --paths "/*"
  environment:
    name: staging
    url: https://staging.example.com
  only:
    - develop
deploy_production:
  image: python:latest
  stage: deploy
  before_script:
    - pip install awscli
  script:
    - aws s3 sync ./build s3://${PRODUCTION_BUCKET_NAME} --delete
    - aws cloudfront create-invalidation --distribution ${PRODUCTION_CLOUDFRONT_ID} --paths "/*"
  environment:
    name: production
    url: https://www.example.com
  only:
    - master
  when: manual

Tipps und Best Practices

Sicherheit: Speichern Sie niemals AWS-Zugangsdaten direkt in der .gitlab-ci.yml-Datei
Selektive Synchronisierung: Verwenden Sie die --include und --exclude-Parameter, um nur relevante Dateien zu synchronisieren

Cache-Kontrolle: Fügen Sie Cache-Control-Header für optimale Performance hinzu:

aws s3 sync ./build s3://${BUCKET_NAME} --delete --cache-control "max-age=31536000, public" --exclude "*.html"
aws s3 sync ./build s3://${BUCKET_NAME} --delete --cache-control "no-cache" --include "*.html"

Fehlerbehandlung: Fügen Sie Fehlerbehandlung und Benachrichtigungen hinzu:

after_script:
  - if [ $CI_JOB_STATUS == "failed" ]; then echo "Deployment failed"; fi

Häufige Probleme und Lösungen

Problem: Fehlende Berechtigungen

Wenn die Pipeline mit Berechtigungsfehlern fehlschlägt, stellen Sie sicher, dass Ihr AWS-Benutzer über ausreichende Berechtigungen verfügt. Erstellen Sie eine IAM-Richtlinie mit den folgenden Berechtigungen:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:ListBucket",
        "s3:DeleteObject",
        "cloudfront:CreateInvalidation"
      ],
      "Resource": [
        "arn:aws:s3:::your-bucket-name/*",
        "arn:aws:s3:::your-bucket-name",
        "arn:aws:cloudfront::account-id:distribution/distribution-id"
      ]
    }
  ]
}

Problem: Lange Invalidierungszeiten

CloudFront-Invalidierungen können einige Zeit in Anspruch nehmen. Für schnellere Entwicklungszyklen können Sie die Invalidierung auf bestimmte Pfade beschränken:

aws cloudfront create-invalidation --distribution ${CLOUDFRONT_DISTRIBUTION_ID} --paths "/index.html" "/css/*" "/js/*"

Fazit

Mit GitLab CI/CD und AWS S3 können Sie einen vollständig automatisierten Deployment-Workflow für Ihre statischen Websites einrichten. Diese Lösung bietet zahlreiche Vorteile:

Automatisierte Builds und Deployments
Konsistente Bereitstellungsumgebungen
Schnelle Veröffentlichung von Updates
Verbesserte Zusammenarbeit im Team
Zuverlässige Rollback-Möglichkeiten Als App-Agentur aus Köln mit Expertise in DevOps und Cloud-Infrastruktur unterstützen wir Sie gerne bei der Implementierung effizienter CI/CD-Pipelines für Ihre Projekte. Kontaktieren Sie uns für eine Beratung zu Ihren individuellen Anforderungen.