S3へ配置したVeu.jsS3へドメイン名でアクセスできるようにする

ドメインを Route 53 に登録

既に実施済みのため割愛

バケットを 2 つ作成する

ドメインが「suzuki-app.work」のため以下の2つを作成する

ドメインバケット　　　：suzuki-app.work
サブドメインバケット　：www.suzuki-app.work

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

①ドメインバケット「suzuki-app.work」をクリック

②「プロパティ」タブをクリック

③1番下にある「静的ウェブサイトホスティング」の「編集」をクリック

④「有効にする」にチェックを入れる

⑤「インデックスドキュメント」に「index.html」を入力する

⑥「変更の保存」をクリック

ウェブサイトのリダイレクト用にサブドメインのバケットを設定

①サブドメインバケット「www.suzuki-app.work」をクリック

②「プロパティ」タブをクリック

③1番下にある「静的ウェブサイトホスティング」の「編集」をクリック

④「有効にする」にチェックを入れる

⑤「オブジェクトのリクエストをリダイレクトする」にチェックを入れる

⑥「ホスト名」にルートドメインである「suzuki-app.work」を入力する

⑦「プロトコル – オプション」に「http」を入力する

⑧「変更の保存」をクリック

ウェブサイトトラフィックのログ記録を設定する

①ログ記録用のバケットを作成
logs.suzuki-app.work

②ログ記録用のバケット配下にフォルダ「logs」を作成

③ルートドメインである「suzuki-app.work」をクリック

④「プロパティ」タブをクリック

⑤「サーバーアクセスのログ記録」の「編集」をクリック

⑥「有効にする」にチェックを入れる

⑦「ターゲットバケット」に「ログ記録用のバケット」配下のフォルダ「logs」設定する
※「S3 の参照」をクリックして設定

⑧「変更の保存」をクリック

インデックスとウェブサイトのコンテンツをアップロードする

①ルートドメインである「suzuki-app.work」をクリックする

②「アップロード」をクリック

③「ファイルを追加」や「フォルダを追加」をクリックして以下を追加する
・ファイル「index.html」
・フォルダ「css」
・フォルダ「script」

④「アップロード」タブをクリック

⑤「閉じる」タブをクリック

⑥「アクセス許可」タブをクリック

⑦「ブロックパブリックアクセス (バケット設定)」の「編集」をクリック

⑧「ブロックパブリックアクセス (バケット設定)」のチェックを全て外す

⑨「確認」を入力して「確認」をクリック

バケットポリシーをアタッチする

①ルートドメインである「suzuki-app.work」をクリックする

②「アクセス許可」タブをクリック

③「バケットポリシー)」の「編集」をクリック

④エディタに以下を貼り付け

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

⑤「変更の保存」をクリック

ブラウザでアクセス

ルートドメインである「suzuki-app.work」の「プロパティ」タブの1番下にある「静的ウェブサイトホスティング」の「バケットウェブサイトエンドポイント」のリンクをクリック

例) http://suzuki-app.work.s3-website-ap-northeast-1.amazonaws.com/

ドメインとサブドメインのエイリアスレコードを追加する

①左上の「サービス」をクリック

②「ネットワーキングとコンテンツ配信」をクリック

③「Route53」をクリック

④「ホストゾーン」をクリック

⑤登録済みのホストゾーン(suzuki-app.work等)をクリック

⑥「レコードを作成」をクリック

⑦「ウィザードに切り替える」をクリック

⑧「シンプルルーティング」を選択された状態で「次へ」をクリック

●ドメインのエイリアスレコードを追加
⑨「シンプルなレコードを定義」をクリック

⑩以下を選択する
レコード名 ： 何も入力しない
レコードタイプ ： デフォルトのまま　(A ‐ IPv4 アドレスと一部の リソースにトラフィックをルーティングします)
値/トラフィックのルーティング先 ： S3 ウェブサイトエンドポイントへのエイリアス」
リージョン ： アジアパシフィック(東京)
エンドポイント ： 表示されるやつ　(s3-website-ap-northeast-1.amazonaws.comなど)
ターゲットのヘルスを評価 ： いいえ

⑪「シンプルなレコードを定義」をクリック

●サブドメインのエイリアスレコードを追加
⑫「シンプルなレコードを定義」をクリック

⑬以下を選択する
レコード名 ： www
レコードタイプ ： デフォルトのまま　(A ‐ IPv4 アドレスと一部の リソースにトラフィックをルーティングします)
値/トラフィックのルーティング先 ： S3 ウェブサイトエンドポイントへのエイリアス」
リージョン ： アジアパシフィック(東京)
エンドポイント ： 表示されるやつ　(s3-website-ap-northeast-1.amazonaws.comなど)
ターゲットのヘルスを評価 ： いいえ

●レコードを作成
⑭「レコードを作成」をクリック

ブラウザでアクセス

●ドメイン
http://suzuki-app.work/
●サブドメイン
http://www.suzuki-app.work/

参考

上記は公式サイトの通りに実施した。