Hoe deploy ik een Hugo-site naar AWS S3 met behulp van de AWS CLI?

Bouw je Hugo-site op met hugo --gc --minify , configureer de AWS CLI-credentieel, maak een S3-bucket aan, en synchroniseer vervolgens je public/ -map met S3 met behulp van aws s3 sync public/ s3://your-bucket-name/ --delete --cache-control max-age=60 .

Wat zijn de beste praktijken voor het cachen bij het implementeren in S3?

Stel de juiste Cache-Control-headers in tijdens de synchronisatie (bijvoorbeeld --cache-control max-age=60 ), stel de Maximum TTL-waarden van CloudFront in en gebruik cache-ongeldigheid voor directe updates. Overweeg inhoudsversiebeheer voor kritieke assets.

Hoe invalideer ik de CloudFront-cache na een implementatie?

Gebruik aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*" om de volledige cache ongeldig te maken, of specifieke paden op te geven. De eerste 1.000 ongeldigheden per maand zijn gratis.

Kan ik de implementatie van Hugo automatiseren naar AWS S3?

Ja, u kunt implementaties automatiseren met CI/CD-pijplijnen zoals GitHub Actions, Gitea Actions of AWS CodePipeline. Deze kunnen uw Hugo-site bouwen en deze automatisch implementeren bij codecommits.

Wat is het verschil tussen S3 website hosting en CloudFront?

S3 website hosting biedt basisstatische hosting, terwijl CloudFront een CDN is die inhoud cacheert op edge-locaties wereldwijd, waardoor prestaties verbeteren en latentie verminderen. CloudFront biedt ook SSL/TLS-terminatie en betere beveiligingsfunctionaliteiten.

Hugo-site implementeren in AWS S3 met AWS CLI

Automatiser Hugo-implementatie naar AWS S3

Inhoud

Het implementeren van een Hugo-statistische site naar AWS S3 met behulp van de AWS CLI biedt een robuuste, schaalbare oplossing voor het hosten van uw website. Deze gids bespreekt het volledige implementatieproces, van de initiële opzet tot geavanceerde automatisering en strategieën voor cachebeheer.

kleuren tetris op tafel

Implementatie met AWS CLI wordt steeds een gangbare aanpak, aangezien de Hugo-distributie de deploy-opdracht heeft verwijderd uit het standaardpakket. Zie het over extended en withdeploy in Hoe Ubuntu 24.04 te installeren & nuttige tools als u dit lokaal doet en toch nog hugo deploy wil aanroepen.

Voorwaarden

Voor het implementeren van uw Hugo-site naar AWS S3, zorg ervoor dat u heeft:

Een klaarstaande Hugo-site voor implementatie (als u hulp nodig heeft bij het maken van een site, raadpleeg dan de Hugo quickstart guide)
Een AWS-account met de juiste bevoegdheden
AWS CLI geïnstalleerd en geconfigureerd
Basisbegrip van command-line operaties

Bouwen van uw Hugo-site

De eerste stap bij het implementeren van uw Hugo-site is het genereren van statische bestanden. Gebruik de Hugo Cheat Sheet als referentie voor beschikbare opdrachten en opties.

Bouw uw site met optimalisatieflags:

hugo --gc --minify

De --gc-vlag verwijdert ongebruikte cachebestanden, terwijl --minify uw HTML, CSS en JavaScript comprimeert voor optimale prestaties. Dit genereert uw statische site in de public/-map, die we zullen implementeren naar S3.

Configureren van AWS CLI

Als u de AWS CLI nog niet heeft geconfigureerd, voer dan uit:

aws configure

U wordt gevraagd om in te voeren:

AWS Access Key ID: Uw AWS-toegangssleutel
AWS Secret Access Key: Uw geheime toegangssleutel
Default region: Uw voorkeursregio van AWS (bijvoorbeeld us-east-1, ap-southeast-2)
Default output format: json (aangeraden)

Voor programmaatje-toegang, zorg er dan voor dat uw IAM-gebruiker de volgende bevoegdheden heeft:

s3:PutObject
s3:GetObject
s3:DeleteObject
s3:ListBucket
cloudfront:CreateInvalidation (als u CloudFront gebruikt)

Aanmaken en configureren van de S3-bucket

Aanmaken van de bucket

Maak uw S3-bucket aan met de AWS CLI:

aws s3 mb s3://your-bucket-name --region us-east-1

Belangrijk: Kies een wereldwijd unieke bucketnaam. Als u de bucket voor het hosten van websites gaat gebruiken, moet de bucketnaam overeenkomen met uw domeinnaam als u een aangepaste domeinnaam gebruikt.

Bucket configureren voor statisch websitehosting

Schakel statische websitehosting in:

aws s3 website s3://your-bucket-name \
  --index-document index.html \
  --error-document 404.html

Bucketbeleid instellen

Voor openbare leesrechten (als u geen CloudFront gebruikt), maak een bucketbeleid aan:

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

Toepassen van het beleid:

aws s3api put-bucket-policy \
  --bucket your-bucket-name \
  --policy file://bucket-policy.json

Beveiligingsopmerking: Als u CloudFront gebruikt (aangeraden), kunt u toegang tot de S3-bucket beperken tot CloudFront alleen, waardoor het niet nodig is om openbare leesrechten te hebben.

Implementeren naar S3 met AWS CLI

De kernimplementatieopdracht gebruikt aws s3 sync om uw site te uploaden:

aws s3 sync public/ s3://your-bucket-name/ \
  --delete \
  --cache-control max-age=60

Belangrijke parameters uitgelegd

public/: Uw lokale Hugo-uitvoermap
s3://your-bucket-name/: Uw S3-bucketbestemming
--delete: Verwijdert bestanden in S3 die lokaal niet meer bestaan, zodat uw bucket uw build spiegelt
--cache-control max-age=60: Stelt cacheheaders in (60 seconden in dit voorbeeld)

Geavanceerde sync-opties

Voor meer controle over uw implementatie:

aws s3 sync public/ s3://your-bucket-name/ \
  --delete \
  --cache-control "public, max-age=31536000, immutable" \
  --exclude "*.html" \
  --cache-control "public, max-age=60" \
  --include "*.html" \
  --exclude "*.js" \
  --cache-control "public, max-age=31536000, immutable" \
  --include "*.js"

Dit voorbeeld stelt verschillende cachetijden in voor HTML-bestanden (60 seconden) en statische assets zoals JavaScript (1 jaar), wat een veelvoorkomende optimalisatiestrategie is.

Instellen van CloudFront-distributie

Hoewel S3 statische websites direct kan hosten, biedt het gebruik van Amazon CloudFront als CDN betere prestaties, beveiliging en wereldwijde distributie.

Aanmaken van CloudFront-distributie

aws cloudfront create-distribution \
  --distribution-config file://cloudfront-config.json

Een basis CloudFront-configuratie bevat:

S3-bucket als oorsprong
Standaard cachegedragen
SSL/TLS-certificaat (van AWS Certificate Manager)
Aangepaste domeinconfiguratie (optioneel)

Cachebeheerstrategieën

Bij implementatie via CloudFront, overweeg dan deze cachingstrategieën:

Maximum TTL instellen: Stel CloudFront’s Maximum TTL in om te bepalen hoe lang inhoud in edge-locaties wordt gecached
Inhoudsversiebeheer: Gebruik versieidentificatoren in bestandsnamen (bijvoorbeeld style-v2.css) om cacheupdates te forceren
Cache-Control-headers instellen: Stel de juiste headers in tijdens S3 sync (zoals hierboven aangegeven)
Selectieve ongeldigheid: Ongeldig maak alleen gewijzigde paden in plaats van de hele cache

Cache-ongeldigheid

Na het implementeren van updates, ongeldig maak de CloudFront-cache om frisse inhoud te serveer:

aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

Voor gerichtere ongeldigheid:

aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/index.html" "/blog/*"

Kostenoverweging: De eerste 1.000 ongeldigheidspaden per maand zijn gratis. Daarna kost elk pad $0,005. Gebruik selectieve ongeldigheid om kosten te minimaliseren.

Automatisering met CI/CD

Handmatige implementaties werken voor kleine projecten, maar automatisering is essentieel voor productieprocessen. U kunt dit implementatieproces integreren met Gitea Actions om een Hugo-website te implementeren naar AWS S3 of vergelijkbare CI/CD-pijplijnen.

Basisimplementatiescript

Maak een eenvoudig implementatiescript aan:

#!/bin/bash
set -e

# Bouw de Hugo-site
echo "Bouwen van de Hugo-site..."
hugo --gc --minify

# Implementeer naar S3
echo "Implementeren naar S3..."
aws s3 sync public/ s3://your-bucket-name/ \
  --delete \
  --cache-control max-age=60

# Ongeldig maken van CloudFront-cache
echo "Ongeldig maken van CloudFront-cache..."
aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

echo "Implementatie voltooid!"

Maak het uitvoerbaar en voer het uit:

chmod +x deploy.sh
./deploy.sh

Voorbeeld van GitHub Actions

Voor GitHub-repositories, maak .github/workflows/deploy.yml aan:

name: Deploy to AWS S3

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
      
      - name: Build
        run: hugo --gc --minify
      
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        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: Deploy to S3
        run: |
          aws s3 sync public/ s3://your-bucket-name/ \
            --delete \
            --cache-control max-age=60          
      
      - name: Invalidate CloudFront
        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/*"

Monitoring en optimalisatie

Logboekregistratie inschakelen

Stel logboekregistratie in voor S3 en CloudFront om toegangspatronen te volgen:

# S3-toegangslogboekregistratie inschakelen
aws s3api put-bucket-logging \
  --bucket your-bucket-name \
  --bucket-logging-status file://logging.json

CloudWatch-alarmen instellen

Monitor uw implementatie met CloudWatch:

aws cloudwatch put-metric-alarm \
  --alarm-name high-error-rate \
  --alarm-description "Waarschuwing bij hoge foutenrate" \
  --metric-name 4xxError \
  --namespace AWS/CloudFront \
  --statistic Sum \
  --period 300 \
  --threshold 10 \
  --comparison-operator GreaterThanThreshold

Probleemoplossing van veelvoorkomende problemen

Bestanden die niet worden bijgewerkt

Als wijzigingen niet verschijnen:

Controleer de status van CloudFront-cache-ongeldigheid
Controleer of de --delete-vlag in de sync-opdracht wordt gebruikt
Wis de browsercache of test in incognito-modus
Controleer de S3-bucketbevoegdheden

Snel implementeren

Optimaliseer de sync-prestaties:

Gebruik --exclude en --include om onnodige bestanden over te slaan
Overweeg het gebruik van --size-only voor snellere vergelijkingen
Gebruik parallelle uploads met --cli-read-timeout en --cli-write-timeout

Bevoegdheidsfouten

Zorg ervoor dat uw IAM-gebruiker heeft:

Toegangsrechten tot de S3-bucket
Bevoegdheden voor CloudFront-ongeldigheid (indien van toepassing)
Goede bucketbeleidsinstellingen

Samenvatting van beste praktijken

Gebruik altijd --delete om S3 in lijn te houden met uw lokale build
Stel de juiste cacheheaders in op basis van bestandstypen
Gebruik CloudFront voor productieimplementaties
Automatiseer implementaties met CI/CD-pijplijnen
Monitor kosten - wees bewust van CloudFront-ongeldigheidskosten
Versieer uw implementaties - label releases voor eenvoudige terugkeer
Test lokaal eerst - controleer uw Hugo-build voordat u implementeert

Gerelateerde bronnen

Voor gedetailleerde informatie over Hugo-implementatie, raadpleeg dan de uitgebreide gids over het implementeren van een Hugo-generatie website naar AWS S3, die extra implementatieopties en configuraties bespreekt.

Als u uw inhoud schrijft, onthoud dan om juiste Markdown-codeblokken te gebruiken voor codevoorbeelden, en verwijzen naar de Uitgebreide Markdown-cheatsheet voor opmaakrichtlijnen.