この記事はかなり古いのでこちらの追記を確認してください

（上の日付は記事の並べ替えに使っているだけです。更新日は下をご覧ください）

HUGOで生成したHTMLをS3に配置し、静的ウェブサイトホスティングで公開します。
この時、CloudFrontを使い、SSL証明書はAWS Certificate Managerで発行します。
またドメインもAWSで購入し、Route53に設定します。

このステップで独自ドメイン のホームページを公開するところまでいけます。

■独自ドメイン取得

1. AWS Route53で登録

AWS管理コンソール利用

• Route53で　登録済みドメイン＞ドメイン の登録
• 適当なドメインを選択して登録(本サイトでは brownmorning.net)

■S3の静的フェブサイトホスティング

1. AWS S3設定

AWS管理コンソール利用

• S3でバケット作成
• バケットの「アクセス権限」で「ブロックパブリックアクセス」をOFF
• バケットの「プロパティ」で「Static website hosting」を選択し、以下の設定
  ・インデックスドキュメント：index.html
  ・バケットポリシーは以下のようにしてパブリックアクセス

{
    "Version": "2012-10-17",
    "Id": "Policy1588296685743",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*"
        }
    ]
}

• バケットにファイルアップロード
  先にHUGOで生成したHTMLファイルをそのままアップロードしておく

2. ドメインとの紐付け

AWS管理コンソール利用

• Route53で　登録済みドメイン＞ドメイン で brownmorning.netを選択
• レコードセットの作成
  ・名前：空白
  ・タイプ：A-IPv4アドレス（デフォルト）
  ・エイリアス：はい
  ・エイリアス先：S3webサイトエンドポイントを選択

ここまでやると http://brownmorning.net でアクセス可能になる

■SSL証明書取得

AWS管理コンソール利用（リージョンを「米国東部（バージニア北部）」に切り替える）

• AWS Certificate Manger で「証明書のプロビジョニング」
• 「今すぐ始める」
• パブリック証明書のリクエスト
• ステップ１ドメイン名の追加：brownmorning.net
• ステップ２検証方法の選択：DNS検証
• ステップ３タグの追加：何もしない
• ステップ４確認とリクエスト：内容を確認
• ステップ５検証：検証状態が「検証保留中」になっているので brownmorning.net を選択し、「Route53でのレコードの作成」
• 成功していたら、続行

数分で状況が「発行済み」になる

■CloudFrontで公開

AWS管理コンソール利用

• AWS CloudFrontで「Create Distribution」
• Webで「Get Started」
  ・Origin Domain Name：S3 バケットの Static website hosting のエンドポイント(http://より下の部分)
  ・Default Cache Behavior Settings > Viewer Protocol Policy：Redirect HTTP to HTTPS
  ・Distribution Settings > SSL Certificate：Custom SSL Certificateで作成した証明書を選択
  ・Distribution Settings > Default Root Object：index.html
• 「Create Distribution」

数分でStatusが「Deployed」になる

Origin Domain Name設定について (参考1)
HUGOではサブディレクトリのインデックスファイルを利用可能にしないといけないので
S3 バケットの Static website hosting のエンドポイントを指定しています。
こうしておかないと、S3で公開後にサブメニューを開いたときに、
下のようなメッセージが出てしまいます。

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>EA44DB04106A1902</RequestId>
<HostId>
ZslQyfgBnRJ/XPC2mVpNk8k/EBhCk+zE9Qa4zJ5pJIFwgeGKqekH0pF+gJoeQwrjPkD4uHGsFG4=
</HostId>
</Error>

■brownmorning.net をCloudFrontのDistributionにルーティングさせる

AWS管理コンソール利用

• AWS CloudFrontで「Distribution」
• Generalタグで Edit
• 「Alternate Domain Names」にbrownmorning.net と入力し「Yes,Edit」

この設定大事です(参考2)
これをやっとかないと次のRoute53でエイリアス先にCloudFrontが選べません

• Route53で「ホストゾーン」
• brownmorning.net　でAレコード選択
  ・エイリアス先：クラウドフロントディストリビューション

ここまでやると https://brownmorning.net でアクセス可能になる

■旧サイトからのリダイレクト設定

本サイトは元々S3の静的ウェブサイトホスティングで公開していました。
旧サイトへのアクセスを全て新サイトへリダイレクトさせています。

AWS管理コンソール利用

• S3：旧サイトのバケットプロパティで
  Static website hosting＞リダイレクトルールに以下のXML(参考3)

<RoutingRules>
    <RoutingRule>
        <Redirect> 
            <HostName>brownmorning.net</HostName>
            <ReplaceKeyWith></ReplaceKeyWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

■Google Analytics設定

AnalyticsのトラッキングIDを取得後

• config/_default/params.tomlのgoogle_analytics にトラッキングID設定

デプロイオプションについてはStep2参照

初期構築内容の一覧はこちら

■参考URL

(参考1)
CloudFrontでのOrigin Domain Name設定パターンについて＞
CloudFront + S3 で静的サイトを運用する際の注意点
https://qiita.com/ooxif/items/d28b7caf72bf5290588c

本サイトでは使っていないけど、こういう手もあるらしい。。
Hosting The Hugo QuickStart Project on AWS Cloudfront with Lambda@Edge
https://dev.to/starpebble/hosting-the-hugo-quickstart-project-on-aws-cloudfront-with-lambda-edge-5g5f

(参考2)
CloudFrontでのCNAME＞
Route 53 エイリアスリソースレコードセットを作成する際に目的のエイリアス先が選択できないのはなぜですか?
https://aws.amazon.com/jp/premiumsupport/knowledge-center/route-53-no-targets/

CloudFront が HTTPS 経由でドメイン名を処理しないのはなぜですか?
https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudfront-domain-https/

代替ドメイン名 (CNAME) を追加してカスタム URL を使用する
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html#CreatingCNAME

(参考3)
S3でのリダイレクト設定＞
Amazon S3 でリダイレクトを扱う
https://dev.classmethod.jp/articles/amazon-s3-redirect-website/

＜S3での静的ウェブサイトホスティング＞
【Amazon S3】サーバーレスで独自ドメインの静的サイトを公開しよう①
https://devlog.arksystems.co.jp/2019/08/27/8883/

【AWS Certificate Manager＋Amazon CloudFront】サーバーレスで独自ドメインの静的サイトを公開しよう② HTTPS対応編
https://devlog.arksystems.co.jp/2019/10/07/7210/

Host a Static Site on AWS, using S3 and CloudFront
https://www.davidbaumgold.com/tutorials/host-static-site-aws-s3-cloudfront/

新規作成：2020/05/04
最終更新：2020/05/04

• IT覚書
• FIRSTMAKE
• AWS
• S3
• Route53
• CloudFront
• Certificate Manager