カスタムドメインへの統一

CloudFrontのデフォルトドメインからカスタムドメインへのリダイレクトしたい

このブログは、AWS S3での静的ウェブサイトホスティングと、コンテンツ配信を高速化するためのCloudFrontを利用した構成になっています。 CloudFrontを利用すると、以下のような形式のデフォルトドメインが自動的に割り当てられます。

dxxxxxxxxxxxxx.cloudfront.net

より多くのAWSサービスに触れるため、わざ　わざ年間10$も払ってRoute53で独自ドメインuntilcoffeecools.comも取得しています。 このカスタムドメインに301リダイレクトする設定が完了したため、その手順を残しておきます。

1. CloudFront Functionの作成

AWSのサービス一覧からCloudFrontを選択します。 Functionを押下し、Create Functionへと進みます。 NameとDescriptionは適当に入力し、RuntimeはデフォルトのままCreate Functionに進みます。

2. Developmentステージのコード保存

Buildタブを押下し、Developmentを開きます。 次のソースをペーストし、ドメイン名を書き換えてSave changesで保存します。

function handler(event) {
  var request = event.request;
  var headers = request.headers;
  // CloudFrontの標準ドメインにアクセスした場合だけリダイレクト
  if (headers.host && headers.host.value.endsWith('.cloudfront.net')) {
    return {
      statusCode: 301,
      statusDescription: 'Moved Permanently',
      headers: {
        location: {
          value: 'https://yourdomain.com' + request.uri
        }
      }
    };
  }
  // 通常処理（リダイレクトしない）
  return request;
}

3. Publishする

Test FunctionでHTTPステータス：200が帰ってきたら問題ないです。 PublishタブからPublish Functionを選択し、公開します。

4. Distributionsの設定

CloudFrontのメニューに戻り、Distributionsの中のBehaviorsを選択します。 Path pattern:Default (*)のレコードを選択してEditへと進みます。

スクロールダウンし、Function associations - optionalに次の内容を追加します。 （CloudFrontの基本的な設定は省略）

Viewer request

5. 動作確認

4の内容をSave changesで保存し、CloudFrontのデフォルトドメインにアクセスしてみます。 https://yourdomain.comにリダイレクトされていればOKです！！

6. まとめ

細部にこそプロフェッショナルであれって偉い人が言ってました