CloudFront+S3構成でhugoをホスティングする。構成は下記で。 リクエストは全てCloudFrontで受けるようにして、S3は公開せずCloudFront経由でしかアクセスできないようにする。 CloudFrontはただのCDNなのでリクエストにマッチするコンテンツがあれば返すが、無いと何も返さない。index.htmlまで指定しないといけないため、リクエストが/で終わっているものは全て末尾にindex.htmlを付けてるスクリプトをかませる。

make cloudfront

やること

  1. S3バケット作成
  2. CloudFront設定
  3. アクセス確認
  4. index.htmlへリダイレクト設定
  5. 独自ドメインを設定

1. S3バケット作成

サイトのコンテンツを置くS3 bucketを作成する。 S3へのアクセスはCloudFrontからのみ許可するため、パブリックアクセスをすべてブロックする設定にて作成する。

make s3

2. CloudFront設定

オリジンドメインに作成したS3を指定。オリジンアクセスにOAC(Origin access control settings)を選択する 「コントロール設定を作成」をクリックしOACを作成する。

make cloudfront

2.1 OAC作成

デフォルト設定から変更せずそのまま作成する

make oac

2.2 CloudFront作成

警告「S3バケットポリシーを更新する必要があります」が出るが、そのまま作成

alarm s3policy

2.3 S3 バケットポリシー変更

作成後画面上部にS3ポリシーを変更するようにpop upがでるので、ポリシーをコピーでポリシーをコピーする。

copy-s3-policy

S3バケットポリシーは「アクセス許可」タブの「バケットポリシー」編集で変更できる。コピーした内容をそのままペーストする。

s3-modify-policy

3. アクセス確認

作成したS3に適当なindex.htmlを設置し、ディストリビューションドメイン名 + /inde.htmlでアクセスしてみる。

show-hello-world

hello worldが表示された！もちろんCloudFrontを通さずS3へ直接アクセスした場合は弾かれる。

access-denied

4. index.htmlへリダイレクト設定

リクエストurlがhttps://aaa.com/のように/で終わる場合でもhttps://aaa.com/index.htmlへリダイレクトさせる。 Lambdaを使う方法もあるがCloudFrontへのリクエストにJavascriptを噛ませれるCloudFront Functionsを使って実現する。 需要がありすぎて公式にコードごと設定が載っているため、まんま設定する。

4.1 関数作成

CloudFront関数を作成する。

make-cloudfront-script

4.2 関数の発行

コードは公式で公開されているものをコピペ。 公開しないと作成したCloudFrontディストリビューションに紐付けれないため公開する。

release-cloudfront-script 
function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // Check whether the URI is missing a file name.
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    }
    // Check whether the URI is missing a file extension.
    else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }

    return request;
}

4.3 関数の紐づけ

公開後、CloudFrontディストリビューションに紐付け設定メニューが下にでてくる。

attach-cloudfront-script

4.4 接続確認

リクエストurlがhttps://aaa.com/のように/で終わる場合でもhttps://aaa.com/index.htmlへリダイレクトさせることを確認する。

5. 独自ドメインを設定

AWS以外で取得したドメインをブログ(CloudFront)のドメインに設定する。

5.1 証明証発行

AWS Certificate Manager(ACM)にて証明証をリクエストする。 WHOIS情報はGMOペパボの代理公開としているため、Eメール検証は使用できない。検証方法としてDNS検証を選択し、払い出されたCNAMEをドメインに設定する。ドメインはムームードメインにて取得したため、そっちに設定する。 設定に癖がありサブドメインには払い出されたCNAME名、文字列羅列.example.comの文字列羅列部分のみを設定する。また、内容にはCNAME値の末尾.を除いた値を設定する。

5.2 代替ドメインを設定

設定するディストリビューションを選択し、編集をクリック。カスタムSSL証明証のプルダウンから先程作成した証明証を選択する。代替ドメイン名に設定したい独自ドメインを入力する。

cloudfront_cname

ドメインを取得したムームードメインにCNAMEとしてCloudFrontのディストリビューションドメイン名を設定する。コレで独自ドメインにてアクセスすることができるようになった。

mumu-cname-cloudfront