Wdrażanie witryny Hugo na AWS S3

Hugo to generator statycznych stron internetowych

Page content

Gdy strona zostanie wygenerowana za pomocą hugo, czas na wdrożenie jej na jakimś platformie hostingowej. Oto jak przesłać ją do AWS S3 i udostępnić za pomocą AWS CloudFront CDN.

Hugo static site deployed to AWS

Przygotowanie strony

Nie będę opisywał tutaj, jak utworzyć projekt Hugo ani jak dodać artykuły lub wpisy blogowe. Założę, że już to zrobiłeś.

Jeśli nie, oto szybki start z Hugo

Opcje wdrażania

Istnieje kilka opcji wdrażania i hostowania strony wygenerowanej przez Hugo (https://gohugo.io/hosting-and-deployment/). Osobiście lubię:

Poniżej opisuję dokładnie ten ostatni sposób.

1. Utwórz s3 bucket z luźnymi uprawnieniami

przejdź do: https://console.aws.amazon.com/s3

  1. utwórz bucket z nazwą taką jak nazwa strony, np.: “microsoft.com”

  2. kliknij w bucket => właściwości, dalej => hosting statycznej strony sekcja hostingu statycznej strony

  3. kliknij edytuj, potem - włącz, i “hostuj statyczną stronę”

edycja hostingu statycznej strony

  1. dodaj również tam indeks: index.html i błąd: 404.html
  2. kliknij zapisz, zapamiętaj “punkt końcowy bucketa website”, będzie wyglądał tak: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
  3. przejdź do uprawnień bucketa, zobacz poniższe obrazy. publiczny dostęp nie powinien być zablokowany.

Zablokuj publiczny dostęp - wyłącz 1

Zablokuj publiczny dostęp - wyłącz 2

  1. zasada (zamień microsoft.com na swoją nazwę domeny):
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::microsoft.com/*"
        }
    ]
}

2. Utwórz certyfikat

przejdź do AWS certificate manager https://console.aws.amazon.com/acm wybierz poprawny region.

  1. kliknij żądaj
  2. publiczny certyfikat
  3. nazwy domen: weź dwa takie jak: “microsoft.com” i “www.microsoft.com”
  4. możesz poprosić o więcej poddomen, np. “blog.microsoft.com”, “xmpp.microsoft.com” itp.
  5. wykonaj walidację DNS. Jest znacznie łatwiej to zrobić/przesłać przez konsolę Route53, jeśli rejestrant to AWS.

3. Wdrażanie funkcji Lamnda do Lambda@Edge

Funkcja Lambda@Edge będzie zmieniać adresy URL projektu Hugo QuickStart dla katalogów na domyślny obiekt, index.html. W ten sposób Cloudfront udostępnia URI ‘/posts/my-post/’ z zawartością ‘/posts/my-post/index.html’, zwracając 200 zamiast 404.

Flavor Cafe (Scotch) Kod Lambda@Edge

// Hugo na Cloudfront, funkcja Lambda@Edge 
// Flavor Cafe (Scotch)
// @starpebble na githubie
//
// Dwie reguły zmiany dla podkatalogów URI w projekcie Hugo.
// Przykład:
//   1. zmień URI /posts/ na /posts/index.html
//   2. zmień URI /posts na /posts/index.html
//
// Dodaj tyle rozszerzeń plików, ile chcesz dla reguły 2.
// URI kończące się na znane rozszerzenia plików nie są zmieniane przez regułę 2.

'use strict';

// @starpebble na githubie
// Hugo Flavor Cafe (Scotch)

const DEFAULT_OBJECT = 'index.html';

exports.handler = (event, context, callback) => {
  const cfrequest = event.Records[0].cf.request;
  if (cfrequest.uri.length > 0 && cfrequest.uri.charAt(cfrequest.uri.length - 1) === '/') {
    // np. /posts/ na /posts/index.html
    cfrequest.uri += DEFAULT_OBJECT;
  }
  else if (!cfrequest.uri.match(/.(css|md|gif|ico|jpg|jpeg|js|png|txt|svg|woff|ttf|map|json|html)$/)) {
    // np. /posts na /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
};

4. Utwórz AWS CloudFront CDN

przejdź do https://console.aws.amazon.com/cloudfront

  1. Utwórz dystrybucję
  2. utwórz źródło wskazujące na swój bucket S3

Utwórz źródło

  1. Certyfikat dla swojej strony
  2. kiedy oferuje konwersję na statyczną stronę - zgadnij
  3. utwórz zachowanie wskazujące na swoje źródło, i przekieruj Http na Https

Edytuj zachowanie

  1. poniżej w zachowaniach/funkcjach - w żądaniu źródła - wybierz swoją funkcję Lambda

Funkcja Lambda

  1. Zapisz
  2. Przejdź do zakładki Ogólne swojej dystrybucji i skopiuj nazwę domeny dystrybucji. Powinna wyglądać tak: asdfasdfasdf.cloudfront.net

Przykład nazwy domeny dystrybucji

5. Skieruj DNS AWS Route53 do CloudFrount

przejdź do https://console.aws.amazon.com/route53/v2/hostedzones

  1. utwórz lub kliknij na swoją strefę hostingu dla strony. Powinna być nazywana tak jak twoja strona: np.: “microsoft.com”
  2. utwórz pusty rekord “A” wskazujący na swoją dystrybucję CloudFront (nazwa domeny dystrybucji)
  3. utwórz rekord “A” “www” wskazujący jako alias na swój pierwszy rekord “A”

6. Zainstaluj aws cli

  1. Zainstaluj narzędzia linii poleceń klienta AWS https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
  2. skonfiguruj połączenie aws cli
    1. sprawdź plik ~/.aws/credentials, powinien zawierać coś takiego jak
[default]
aws_access_key_id = .......
aws_secret_access_key = .......
  1. przetestuj połączenie, wpisz coś takiego jak poniżej, aby zobaczyć swój bucket s3
aws s3 ls

7. Zaktualizuj config.toml

  1. otwórz swój hugo.toml lub config.toml w projekcie hugo
  2. dodaj na końcu (zamień ponownie microsoft.com na swój):
[[deployment.targets]]
# Dowolna nazwa dla tego celu.
name = "lfs3"

# S3; zobacz https://gocloud.dev/howto/blob/#s3
# Dla S3-zgodnych punktów końcowych, zobacz https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# Jeśli korzystasz z CDN CloudFront, wdrażanie będzie nieważne, jeśli konieczne będzie odświeżenie pamięci podręcznej.
cloudFrontDistributionID = 	""

Jeśli przechowujesz swoje konfiguracje w config.yml, powinien wyglądać tak:

deployment:
  targets:
    name: "lfs3"
    URL: "s3://microsoft.com?region=ap-southeast-2"
    cloudFrontDistributionID:	"E123123123"
  1. zapisz ten plik
  2. skompiluj swoją stronę
hugo
  1. wdróż ją za pomocą polecenia hugo deploy
hugo deploy
  1. otwórz adres URL swojej strony w przeglądarce, aby zobaczyć, czy wszystko zadziałało

Przydatne linki

Mam nadzieję, że ten mały dokument instrukcji pomoże Ci. Miłego dnia!