Wdrażanie strony Hugo na AWS S3

Hugo to generator statycznych stron.

Page content

Gdy strona zostanie wygenerowana przy użyciu Hugo, czas ją wdrożyć na platformę hostingową. Poniżej znajduje się przewodnik, jak przesłać ją do AWS S3 i serwować za pomocą CDN AWS CloudFront.

Strona statyczna Hugo wdrożona w AWS

Ten poradnik jest częścią klastru Infrastruktura sieciowa — publikacja statyczna, CDN, indeksowanie i usługi domenowe.

Pełny przepływ wdrażania oparty na CLI znajdziesz w Wdrożenie strony Hugo do AWS S3 za pomocą AWS CLI.

Przygotowanie strony

Nie będę tutaj opisywał, jak utworzyć projekt strony Hugo lub dodać do niej artykułów i wpisów blogowych. Zakładam, że już to zrobiłeś.

Jeśli nie, oto Szybki start z Hugo

Opcje wdrożenia

Dostępnych jest kilka opcji wdrażania i hostowania stron generowanych przez Hugo (https://gohugo.io/hosting-and-deployment/). Osobiście lubię:

Jak strona Hugo może być hostowana na GitHubie
Budowanie i wdrażanie przy użyciu AWS Amplify.
oraz wdrażanie do S3 przy użyciu polecenia hugo deploy i serwowanie jej z wykorzystaniem CDN AWS CloudFront, AWS Route53 oraz AWS Lambda.

Alternatywy takie jak Netlify znajdziesz w Netlify dla Hugo i stron statycznych: cennik, plan darmowy i alternatywy.

Poniżej opisuję dokładnie tę ostatnią metodę.

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

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

utwórz bucket o nazwie takiej jak nazwa strony, np. “microsoft.com”
kliknij na bucket => właściwości, dalej do sekcji => hostowanie statycznej witryny
kliknij edytuj, a następnie - włącz i “hostuj statyczną witrynę”

edycja hostowania statycznej witryny

podaj również tam w polu index: index.html oraz w polu error: 404.html
kliknij zapisz, zapamiętaj “punkt końcowy witryny bucketu” (bucket website endpoint), będzie wyglądał tak: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
przejdź do uprawnień bucketu, zobacz poniższe obrazki. Dostęp publiczny nie może być zablokowany.

Blokuj dostęp publiczny - wyłączone 1

Blokuj dostęp publiczny - wyłączone 2

polityka bucketu (zastąp microsoft.com 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 menedżera certyfikatów AWS https://console.aws.amazon.com/acm wybierz odpowiednią region.

kliknij żądaj
certyfikat publiczny
nazwy domen: podaj dwie, np. “microsoft.com” i “www.microsoft.com”
możesz poprosić o więcej pod domen, np. “blog.microsoft.com”, “xmpp.microsoft.com” itd.
wykonaj walidację DNS. Jest to znacznie łatwiejsze do wykonania/wysłania przez konsolę Route53, jeśli Twoim rejestratorem jest AWS.

3. Wdrożenie funkcji Lambda do Lambda@Edge

Funkcja Lambda@Edge służy do przepisywania adresów URL projektu Hugo QuickStart dla katalogów na domyślny obiekt index.html. Dzięki temu CloudFront obsługuje URI ‘/posts/my-post/’ z zawartością ‘/posts/my-post/index.html’, zwracając kod 200 zamiast 404.

Kod Lambda@Edge Flavor Cafe (Scotch)

// Hugo na Cloudfront, funkcja Lambda@Edge 
// Flavor Cafe (Scotch)
// @starpebble na github
//
// Dwie reguły przepisywania dla podkatalogów URI Hugo.
// Przykład:
//   1. przepisz URI /posts/ na /posts/index.html
//   2. przepisz URI /posts na /posts/index.html
//
// Dodaj dowolną liczę rozszerzeń plików dla reguły 2.
// URI kończące się na znane rozszerzenia plików nie są przepisywane przez regułę 2.

'use strict';

// @starpebble na github
// 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 CDN AWS CloudFront

To nie będzie działać z nowym interfejsem konsoli AWS, będziesz musiał użyć polecenia aws cli - zobacz Utwórz rozkładanie AWS CloudFront w modelu płatności za zużycie (nie plan darmowy)

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

Utwórz rozkładanie (Distribution)
utwórz źródło (origin) wskazujące na Twój bucket S3

Utwórz źródło

Certyfikat dla Twojej strony
gdy zaoferuje konwersję na witrynę statyczną - zaakceptuj
utwórz zachowanie (behaviour) wskazujące na Twoje źródło oraz przekieruj HTTP na HTTPS

Edytuj zachowanie

poniżej w powiązaniach zachowań/funkcji - w Origin Request - wybierz swoją funkcję Lambda

Funkcja Lambda

Zapisz
Przejdź do zakładki General Twojego rozkładania i skopiuj nazwę domeny rozkładania (Distribution domain name). Powinna wyglądać tak: asdfasdfasdf.cloudfront.net

Przykład nazwy domeny rozkładania

5. Skieruj DNS AWS Route53 do swojego CloudFront

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

utwórz lub kliknij na strefę hostowaną (hosted zone) swojej strony. Powinna być nazwana tak jak Twoja strona, np. “microsoft.com”
utwórz rekord “A” pusty wskazujący na Twoje rozkładanie CloudFront (nazwa domeny rozkładania)
utwórz rekord “A” “www” wskazujący jako alias na swój pierwszy rekord “A”

6. Zainstaluj AWS CLI

Zainstaluj narzędzia wiersza polecenia klienta AWS https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
skonfiguruj połączenie AWS CLI
1. sprawdź plik ~/.aws/credentials, powinien zawierać coś takiego

[default]
aws_access_key_id = .......
aws_secret_access_key = .......

przetestuj połączenie, wpisz coś poniżej, aby zobaczyć swój bucket S3

aws s3 ls

7. Zaktualizuj swój config.toml

otwórz swój plik hugo.toml lub config.toml w swoim projekcie Hugo
dodaj na koniec (zastąp ponownie microsoft.com swoją domeną):

[[deployment.targets]]
# Dowolna nazwa dla tego celu.
name = "lfs3"

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

# Jeśli używasz CDN CloudFront, wdrożenie niezupełnie invaliduje pamięć podręczną w razie potrzeby.
cloudFrontDistributionID = 	""

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

deployment:
  targets:
    name: "lfs3"
    URL: "s3://microsoft.com?region=ap-southeast-2"
    cloudFrontDistributionID:	"E123123123"

zapisz ten plik
skompiluj swoją stronę

hugo

wdroż ją przy użyciu polecenia hugo deploy

hugo deploy

otwórz URL swojej strony w przeglądarce, aby sprawdzić, czy wszystko zadziałało

Więcej tematów dotyczących infrastruktury sieciowej znajdziesz w filarze infrastruktury sieciowej.

Przydatne linki

Wysyłanie formularza Google na stronie Hugo
Dodawanie znaczników danych strukturalnych do strony Hugo
ściągawka Hugo
Wdrożenie strony Hugo do AWS S3 za pomocą AWS CLI
Używanie Gitea Actions do wdrażania strony Hugo do AWS S3
Szybki start z Hugo: https://gohugo.io/getting-started/quick-start/
Duża lista przykładów motywów Hugo: https://themes.gohugo.io/
Hosting i wdrażanie Hugo: https://gohugo.io/hosting-and-deployment/
Obsługa obrazów w motywie Mainroad dla Hugo: Obsługa obrazów w motywie Mainroad
Instalacja interfejsu wiersza polecenia AWS (AWS CLI): https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
Najpopularniejsze motywy dla Hugo
Jak przechowywać miniaturki obrazów w folderze bundle strony dla stron Hugo z motywem Mainroad

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