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

Hugo を使用してサイトを生成したら、次にホスティングプラットフォームへのデプロイが必要です。 ここでは、AWS S3 にプッシュし、AWS CloudFront CDN で配信する方法について解説します。

このガイドは、Web インフラストラクチャ — 静的な公開、CDN、インデックス作成、ドメインサービス クラスタの一部です。

CLI ベースのデプロイワークフローについては、AWS CLI を使用して Hugo サイトを AWS S3 にデプロイする をご覧ください。

サイトの準備

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

まだ行っていない場合は、Hugo クイックスタート を参照してください。

デプロイオプション

Hugo で生成されたサイトをデプロイし、ホスティングするためのいくつかのオプションがあります (https://gohugo.io/hosting-and-deployment/)。 個人的には以下の方法を好みます。

• Hugo サイトを GitHub でホスティングする方法
• AWS Amplify を使用したビルドとデプロイ
• hugo deploy コマンドを使用して S3 へデプロイし、AWS CloudFront CDN、AWS Route53、AWS Lambda を使用して配信する方法

Netlify などの代替案については、Hugo と静的サイト向けの Netlify: 価格設定、無料枠、および代替案 をご覧ください。

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

1. 権限を緩和した S3 バケットを作成

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

1. サイト名と似た名前のバケットを作成します（例：“microsoft.com”）。

2. バケットをクリックし、「プロパティ」を選択し、下にスクロールして「静的 Web サイトホスティング」を選択します。

3. 「編集」をクリックし、「有効化」を選択し、「静的 Web サイトをホスティングする」を選択します。

4. また、インデックスに index.html を、エラーページに 404.html を設定します。
5. 「保存」をクリックし、「バケットの Web サイトエンドポイント」をメモしてください。以下のような形式になります： 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. 証明書を作成

AWS 証明書マネージャーに移動します：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 クイックスタートプロジェクトのディレクトリ 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 を作成

新しい AWS コンソール UI では動作しません。AWS CLI コマンドを使用する必要があります。詳しくは 従量課金（無料プランではない）で AWS CloudFront を作成する を参照してください。

https://console.aws.amazon.com/cloudfront に移動します。

1. ディストリビューションを作成
2. 作成した S3 バケットを指すオリジンを設定

3. サイト用の証明書を設定
4. 静的 Web サイトへの変換を提案されたら同意する
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. 最初の “A” レコードをエイリアスとして指す “A” “www” レコードを作成します。

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 プロジェクト内の hugo.toml または config.toml を開きます。
2. 末尾に以下を追加します（再度、microsoft.com をあなたのドメインに置き換えてください）：

[[deployment.targets]]
# An arbitrary name for this target.
name = "lfs3"

# S3; see https://gocloud.dev/howto/blob/#s3
# For S3-compatible endpoints, see https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# If you are using a CloudFront CDN, deploy will invalidate the cache as needed.
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 を開き、すべてが正常に動作しているか確認します。

より多くの Web インフラストラクチャトピックについては、Web インフラストラクチャの柱 をご覧ください。

参考リンク

• Hugo サイトで Google フォームを送信する
• Hugo サイトに構造化データマークアップを追加する
• Hugo チートシート
• AWS CLI を使用して Hugo サイトを AWS S3 にデプロイする
• 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 サイトで、ページバンドルフォルダーにサムネイル画像を保存する方法

この小さなハウツー文書が皆様のお役に立てれば幸いです。良い一日を！