背景・目的

以前、Amazon Route53 でドメインを登録してみたでは、ドメインを登録しましたが
今回は、S3バケットの静的ウェブサイトにドメインを使用してみます。

実践

Amazon S3 バケットの静的なウェブサイトにドメインを使用するを基に試します。

ステップ 1: ドメインを作成する

Amazon Route53 でドメインを登録してみたで作成したドメインを使用します。

ステップ 2: ルートドメイン用の S3 バケットを作成する

S3に移動します
バケットを作成します

ステップ 3 (オプション): サブドメイン用に別の S3 バケットを作成する

サブドメイン用にステップ2と同じ手順で、S3バケットを作成します。

ステップ 4: ウェブサイトホスティング用にルートドメインのバケットを設定する

ステップ2で作成したバケットを選択します
「プロパティ」タブをクリックします
静的ウェブサイトホスティングで「編集」をクリックします
静的ウェブサイトホスティングを「有効にする」を選択します
下記を入力し、「変更の保存」をクリックします
- ホスティングタイプ：「静的ウェブサイトをホストする」
- インデックスドキュメント：index.htmlとしました
- エラードキュメント：error.htmlとしました
エンドポイントをメモしておきます。（あとで使用します）

ステップ 5 (オプション): ウェブサイトのリダイレクト用にサブドメインバケットを設定する

ステップ 3 (オプション): サブドメイン用に別の S3 バケットを作成するで作成したバケットに対して設定します。

ステップ3で作成したバケットを選択します
「プロパティ」タブをクリックします
静的ウェブサイトホスティングで「編集」をクリックします
静的ウェブサイトホスティングを「有効にする」を選択します
ホスティングタイプを「オブジェクトのリクエストをリダイレクトする」を選択します
下記を入力し、「変更の保存」をクリックします
- ホスト名：ステップ2で作成したバケットに遷移するドメイン
- プロトコル：http

ステップ 6: インデックスをアップロードしウェブサイトのコンテンツを作成する

下記のHTMLコードをindex.htmlとしアップロードします

<html>
<head>
<title>Amazon Route 53 Getting Started</title>	
</head>

<body>

<h1>Routing Internet Traffic to an Amazon S3 Bucket for Your Website</h1>

<p>For more information, see 
<a href="https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/getting-started.html">Getting Started with Amazon Route 53</a> 
in the <emphasis>Amazon Route 53 Developer Guide</emphasis>.</p>

</body>

</html>

errorページも作成しアップロードします

ステップ 7: S3 のパブリックアクセスのブロック設定を編集する

パブリックアクセスのブロック設定を外します。これによりインターネットの誰でもバケットにアクセスできますので、
ご自身の責任で実施してください。

S3に移動します
ステップ2で作成したバケットを選択します
「アクセス許可」タブをクリックします
ブロックパブリックアクセス (バケット設定)で「編集」をクリックします
パブリックアクセスをすべてブロックをオフにし「変更の保存」をクリックします
ポップアップが表示されるので、「確認」をクリックします

ステップ 8: バケットポリシーをアタッチする

「アクセス許可」タブをクリックします
バケットポリシーの「編集」をクリックします

下記のバケットポリシーを貼り付けます。※your-domain-nameは適宜変更してください

{
   "Version":"2012-10-17",
   "Statement":[{
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal":"*",
      "Action":[
         "s3:GetObject"
      ],
      "Resource":[
         "arn:aws:s3:::your-domain-name/*"
      ]
    }]
}

ステップ 9: ドメインエンドポイントをテストする

エンドポイントをテストします
表示されました

ステップ 10: ドメインの DNS トラフィックをウェブサイトバケットにルーティングする

Route　53に移動します
ナビゲーションペインで「ホストゾーン」をクリックします
ドメインをクリックします
レコードを作成をクリックします
ウィザードに切り替えるをクリックします
シンプルルーティングを選択し、「次へ」をクリックします
「シンプルなレコードを定義」をクリックします
ポップアップが表示されるので、下記を入力し、「シンプルなレコードを定義」をクリックします
- レコード名：入力しない
- レコードタイプ：A-IPv4アドレスと一部のリソースにトラフィックをルーティングします
- 値/トラフィックのルーティング：
  - S3ウェブサイトエンドポイントへのエイリアス
  - リージョン：作成したリージョン
  - バケット名：作成したバケット名を選択します。※ リストに表示されないときは、S3ウェブサイトエンドポイントを指定する
  - ターゲットのヘルスを評価：オフ
レコードを作成をクリックします

（オプション）サブドメインのエイリアスレコードを作成する

レコードを作成をクリックします
シンプルルーティングを選択し、「次へ」をクリックします
「シンプルなレコードを定義」をクリックします
作成したバケット名を設定し、レコードを作成をクリックします

ステップ 11: ウェブサイトをテストする

通常

ウェブサイトが正常に動作しているか確認します

作成したレコード名でアクセスします。表示されました
エラーも表示されます

リダイレクト

作成したレコード名でアクセスします。リダイレクトされました
エラーページを指定してもリダイレクトされます

考察

今回、S3バケットの静的なウェブサイトにドメインを使用しました。S3バケットをWebホスティングとして、それほど使用したことがなかったので、最初はイメージが持てませんでしたが、最終的には理解できたと思います。
次回は、CloudFrontで試してみようと思います。

【Route 53】S3バケットの静的なウェブサイトにドメインを使用してみた