エンジニアブログを自作しました

AWS S3等を利用した独自ドメインの静的サイトホスティング

 Posted on April 20, 2023  |  4 minutes  |  Mame

こんにちは！

このブログは自分で設定したホストから配信してます。 その構成や設定方法について紹介します。

に分けて記載してます。 2023年4月時点での情報になります。古くなってしまっている場合もありますのでご了承下さい。

下記のやり方で、設定することにより、 「https://[サブドメイン].[独自ドメイン]/」のURL(このサイトの場合https://tech-blog.ma299.me)で自身のブログにアクセスできるようになりました。

構成

以下のような構成になってます。 blogserver_figure

  • 独自ドメイン取得サービス
    • 私の場合は既にムームードメインで独自ドメインを登録済みだったため、それを利用しました。
  • AWS
    • S3
      • ブログのhtml等を配置するために利用してます。
    • CloudFront
      • 配信用に利用します。
    • Route53
      • DNSとして利用してます。
    • Certificate Manager
      • 証明書管理してます。

設定の流れ

設定の流れは下記のようになります。

  1. 独自ドメイン取得する。

  2. Route53でパブリックホストゾーンを登録する。

  3. 独自ドメインサービスへRoute53のNS値を登録する。

  4. S3 バケットを登録する。

  5. Certificate Managerで証明書を発行する。

  6. Route53にCNAMEレコードを登録する。

  7. CloudFront オリジンアクセスコントロールを登録する。

  8. CloudFront ディストリビューションを登録する。

  9. S3 バケットポリシーを登録する。

  10. Route53にAレコードを登録する。

設定の詳細

個人的に設定の際、迷ってしまう部分や注意点があった箇所のみ、下記に記載しました。

独自ドメインサービスへRoute53のNS値を登録する。

  • Route 53 > ホストゾーン > [ホストゾーン名] のタイプNSの行のチェックをONにすると、右側の画面の値という項目にNS値が表示されました。

Certificate Managerで証明書を発行する。

  • 「米国東部(バージニア北部)」[us-east-1]のリージョンで証明書のリクエストをします。
  • 検証方法は「DNS検証」にします。

Route53にCNAMEレコードを登録する。

  • Certificate Manager > 証明書 から上で登録した証明書IDのリンクをクリックして、「ドメイン」の「Route53でレコード作成」ボタンをクリックすることで、CNAMEレコードが登録できます。
  • 少し待ち、証明書のステータスが「発行済み」になればOKです。

CloudFront ディストリビューションを登録する。

  • オリジンアクセスは「Origin access control setting」にし、Origin accsess controlは上で登録したオリジンアクセスコントロールを登録します。
  • 代替ドメイン名(CNAME)には、「[サブドメイン].[独自ドメイン]」のように設定し、カスタムSSL証明書は上でリクエストした証明書を設定します。

S3 バケットポリシーを登録する。

  • 下記のようにS3バケットポリシーに設定します。
  • 私のやった時はCloudFront デイストリビューション登録完了の通知バーからコードをコピーできました。
  • 下記の[バケット名][AWSアカウントID][ディストリビューションID]を各々のものに書き換えます。
{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[バケット名]/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::[AWSアカウントID]:distribution/[ディストリビューションID]"
                }
            }
        }
    ]
}

Route53にAレコードを登録する。

  • 「エイリアス」をONにし、トラフィックのルーティング先を「CloudFront ディストリビューションへのエイリアス」に設定します。

推奨設定

URLが"/“で終わる時にindex.htmlを保管する設定

  • CloudFront > ディストリビューション のデフォルトルートオブジェクトに「index.html」を設定します。
  • CloudFront > 関数で下記の関数を登録します。
  • CloudFront > ディストリビューション のビヘイビアのビューワーリクエストに上で作成した関数を設定します。
AWS  S3  blog 

See also