AWS S3 に Hugo サイトをデプロイする

サイトが hugo で生成されると、それをホスティングプラットフォームにデプロイする時間です。 ここでは、AWS S3 にプッシュし、AWS CloudFront CDN で提供する方法について説明します。

サイトの準備

ここでは、Hugo サイトプロジェクトの作成や、記事やブログ投稿の追加については説明しません。 すでにそれを行っていることを前提とします。

そうでない場合は、Hugo quickstart を参照してください。

デプロイオプション

Hugo で生成されたサイトをデプロイおよびホストするためのいくつかのオプションがあります（https://gohugo.io/hosting-and-deployment/）。 私は特に次が好きです。

• Hugo サイトを GitHub でホストする方法
• AWS Amplify での構築とデプロイ
• そして、hugo deploy コマンドを使用して S3 にデプロイし、AWS CloudFront CDN、AWS Route53、AWS Lambda で提供すること

以下では、この最後の方法について詳しく説明します。

1. パーミッションを緩和した S3 バケットの作成

https://console.aws.amazon.com/s3 にアクセスしてください。

1. サイト名のような名前のバケットを作成します。例えば: “microsoft.com”

2. バケットをクリックし、プロパティをクリックし、下部にある「静的ウェブサイトホスティング」を選択してください。

3. 編集をクリックし、有効にして「静的ウェブサイトをホスト」を選択してください。

4. また、インデックス: index.html とエラー: 404.html を入力してください。

5. 保存をクリックし、「バケットウェブサイトエンドポイント」を覚えておいてください。それは次のようになります: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com

6. バケットの権限に移動し、下記の画像をご覧ください。パブリックアクセスはブロックされていない必要があります。

7. バケットポリシー（microsoft.com をドメイン名に置き換えてください）:

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

2. 証明書の作成

https://console.aws.amazon.com/acm にアクセスしてください。 正しいリージョンを選択してください。

1. 「リクエスト」をクリックします。
2. 「パブリック証明書」を選択します。
3. ドメイン名: “microsoft.com” と “www.microsoft.com” の2つを入力します。
4. “blog.microsoft.com”、“xmpp.microsoft.com” などのサブドメインを追加することもできます。
5. DNS 検証を行います。レジストラが AWS である場合、Route53 コンソールからこの操作を行うのが簡単です。

3. Lambda@Edge への Lambda 関数のデプロイ

Lambda@Edge 関数は、Hugo QuickStart プロジェクトのディレクトリ URL をデフォルトオブジェクト、index.html にリライトします。 これにより、Cloudfront は URI ‘/posts/my-post/’ を ‘/posts/my-post/index.html’ で提供し、404 ではなく 200 を返します。

Flavor Cafe (Scotch) Lambda@Edge コード

// Hugo on Cloudfront, Lambda@Edge function 
// Flavor Cafe (Scotch)
// @starpebble on github
//
// Two rewrite rules for hugo sub directory uri's.
// Example:
//   1. rewrite uri /posts/ to /posts/index.html
//   2. rewrite uri /posts  to /posts/index.html
//
// Add as many file extensions as you like for rule 2.
// uri's that end in a known file extensions are not rewritten by rule 2.

'use strict';

// @starpebble on 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) === '/') {
    // e.g. /posts/ to /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)$/)) {
    // e.g. /posts to /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
}; 

4. AWS CloudFront CDN の作成

https://console.aws.amazon.com/cloudfront にアクセスしてください。

1. ディストリビューションの作成
2. あなたの S3 バケットを指すオリジンを作成してください

3. サイトの証明書
4. 静的ウェブサイトに変換するオプションが提示されたら、同意してください
5. あなたのオリジンを指す動作を作成し、HTTP を HTTPS にリダイレクトしてください

6. 動作/関数の関連付けの下で、オリジンリクエストで、あなたの Lambda 関数を選択してください

7. 保存
8. あなたのディストリビューションの「一般」タブに移動し、ディストリビューションドメイン名をコピーしてください。それは次のようになります: asdfasdfasdf.cloudfront.net

5. AWS Route53 DNS を CloudFront にポイント

https://console.aws.amazon.com/route53/v2/hostedzones にアクセスしてください。

1. あなたのサイトのホストゾーンを作成またはクリックしてください。それはあなたのサイトのように呼ばれるべきです。例えば: “microsoft.com”
2. あなたの CloudFront ディストリビューション（ディストリビューションドメイン名）を指す「A」レコードを作成してください
3. 「www」レコードを作成し、最初の「A」レコードにエイリアスとしてポイントしてください

6. AWS CLI のインストール

1. AWS クライアントコマンドラインツールをインストールしてください https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
2. AWS CLI 接続を構成してください
   1. ファイル ~/.aws/credentials を確認してください。それは次のようになっているはずです

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

3. 接続をテストするために、次のコマンドを入力してください。あなたの S3 バケットを確認するために

aws s3 ls

7. config.toml の更新

1. あなたの hugo.toml または config.toml を開いてください
2. 末尾に次の内容を追加してください（再度 microsoft.com をあなたのドメイン名に置き換えてください）:

[[deployment.targets]]
# このターゲットの任意の名前
name = "lfs3"

# S3; 詳しくは https://gocloud.dev/howto/blob/#s3 を参照
# S3 互換のエンドポイントについては https://gocloud.dev/howto/blob/#s3-compatible を参照
URL = "s3://microsoft.com?region=ap-southeast-2"

# CloudFront CDN を使用している場合、デプロイ時にキャッシュを必要に応じて無効化します。
cloudFrontDistributionID = 	""

config.yml を使用している場合は、次のようになります

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

3. このファイルを保存してください
4. サイトをコンパイルしてください

hugo

5. hugo deploy コマンド でデプロイしてください

hugo deploy

6. ブラウザでサイトの URL を開いて、すべてがうまく動作しているか確認してください

有用なリンク

• Google フォームを Hugo ウェブサイトに送信する
• Hugo ウェブサイトに構造化データマークアップを追加する
• Hugo クイックスタート
• Gitea Actions を使用して Hugo ウェブサイトを AWS S3 にデプロイする
• Hugo クイックスタート: https://gohugo.io/getting-started/quick-start/
• Hugo テーマの例の大きなリスト: https://themes.gohugo.io/
• Hugo ホスティングとデプロイ: https://gohugo.io/hosting-and-deployment/
• Mainroad Hugo テーマでの画像処理: Mainroad テーマ画像処理
• AWS コマンドラインインターフェース (AWS CLI) のインストール: https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
• Hugo で最も人気のあるテーマ
• Mainroad テーマを使用した Hugo サイトでページバンドルフォルダにサムネイル画像を保存する方法

この小さなハウツー文書が役に立つことを願っています。素晴らしい一日を！