More than 3 years have passed since last update.

外部ドメインを用いたS3静的サイト構築(HTTPS通信)

Last updated at 2021-07-31Posted at 2021-07-31

はじめに

Route53でドメイン取得したものではS3静的サイト構築したことあったが、
外部ドメイン（お名前ドットコム）でやったことなかったので書いてみました。
ほとんど同じですが。。。

今回はあるコーポレートサイトをAWSへ移行した時の学びをアウトプットします。
NSレコード書き換えやMX、CNAMEレコード書き換えで混乱、失敗したのでこの点は注意が必要です（＾＾；）

AWSリソース

・S3
・Cloudfront
・Route53
・Certificate Manager

以下のようなアーキテクチャー。

S3設定

バケット作成

※今回はドメインを仮のyamato.comで表記してるので置き換えてください。

S3のstatic hosting機能を用いて構築します。
まずは指定ドメインでアクセスするには、
バケット名をドメインと同じ名前にする必要があります。

今回https://www.yamato.com(仮)でアクセスしたかったので、
バケット名をwww.yamato.comで作成します。
※そうしないとRoute53からアクセスができない仕様のため

作成したらバケットにリソースを配置。

アクセス許可

配置したリソースを書くセス可能にするために設定します。

まずはアクセス許可のタブを選び以下のように設定します。

次にバケットポリシーを設定します。
編集ボタンを押し以下のように設定。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.yamato.com/*"
        }
    ]
}

これでどこからでも該当バケットへのGetObjectを許可していることになります。

静的ウェブサイトホスティング

この機能を有効にする設定です。
プロパティタブから一番下にある静的ウェブサイトホスティングを有効にします。バケット作成時に有効にできます。

バケットウェブサイトエンドポイントとしてURLが表示されるのでここで正常に表示されるか確認できます。

Route53設定

Route53の画面でまずはホストゾーンを作成します。
よこのタブのホストゾーンを選択し、ホストゾーン作成ボタンを押します。

ドメイン名にyamato.comを指定します。
タイプはパブリックホストゾーンを選びます。

そしてホストゾーンの作成ボタンを押して作成。

作成すると一覧に表示され、ホストゾーンを選択するとレコードを作成できる画面が表示されます。

今回のドメインはyamato.comをお名前.comで取得していたため、お名前.com側でNSレコードをRoute53のものを設定します。（Route53に記載のNSレコード４つ）

その場合はもともと設定してあったTXT、MX、CNAMEレコードは忘れずにRoute53側に設定してください。

レコード作成のボタンから作成できます。

※注意
TXTレコードが複数ある場合はダブルクオーテーションで囲い一つにまとめて登録する。
MXレコードについて、サブドメインに@は不要です。
もともと＠が設定していたので、Route53側で＠を設定するとメールが使用できなくなりテンパリました＾＾；
空白でよいです。

S3向けのレコード作成

以下のように設定します。

レコード名にwww
ルーティングポリシーはシングルルーティングのままで。
レコードタイプはAレコード
ルーティング先にエイリアスを有効に
選択できるようになるのでS3ウェブサイトエンドポイントを選択。
リージョンは東京リージョンを選択。
エンドポイントを入力に作成したバケットが選択肢にでてくるので選択。

レコード作成のボタンを押して作成完了します。

ここまでの設定でHTTP通信で指定ドメインを用いてアクセスが可能になります。
http://www.yamato.comで正常に表示されるか確認。

次にSSL化（HTTPS通信）します。