S3でホスティングしたウェブサイトにドメインを当てたい
この記事は最終更新日から1年以上が経過しています。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fi-0.webp?alt=media&token=f20f8de7-4b04-4ab1-b9e0-eb5b3ef129d8)
S3にホスティングしたウェブサイトのURLがバケット名なのでドメインを当てたいと思います。
こちらのドキュメントを参考にしました。(https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/website-hosting-custom-domain-walkthrough.html)
私の場合は、ムームードメインから取得したドメインを使うので、ドキュメントは無視して下記の設定をしました。
Route53に入りDNS管理のホストゾーンの作成を選択します。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fi-02.webp?alt=media&token=225853ec-22c8-4c9d-83b9-04582c88ae11)
ドメイン名にムームードメインから取得したドメインを入力しました。
ホストゾーンの作成を選択すると下記の画面にネームサーバーのルーティング先が発行されていました。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fi-03.webp?alt=media&token=6f1a8ed3-d148-42ef-a13a-07e0a79260c5)
こちらの値をムームードメインの管理画面に入力しました。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fi-04.webp?alt=media&token=c8c1af19-7940-4856-8e52-a53fbfb80e59)
ドキュメントに戻り「ステップ 2: バケットを 2 つ作成する」を実行していきます。
wwwなしのドメインバケットとwwwありのサブドメインバケットを作成します。
ドメインバケットバケットの作成はこちらを参照ください(https://uiux.tokyo/page/17/)
サブドメインバケットを設定していきます。
サブドメインバケットを選択し遷移した画面のプロパティタブ内にある「静的ウェブサイトホスティング」の編集を選択します。静的ウェブサイトホスティングを有効にし、ホスティングタイプのオブジェクトのリクエストをリダイレクトを選択します。
ホスト名にドメイン名を入れます。プロトコル - オプションはhttpを選択します。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fi-05.webp?alt=media&token=9f57b507-7338-4cb6-8e10-a0ee1d1ab59d)
設定完了なので下記を参考に「ステップ 11: ドメインとサブドメインのエイリアスレコードを追加する」を実行していきます。(https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/website-hosting-custom-domain-walkthrough.html#root-domain-walkthrough-add-record-to-hostedzone)
Route53のホストゾーンを選択し登録したドメインを選択します。
遷移した画面で「レコードを作成」を選択します。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fi-06.webp?alt=media&token=3429cd23-631c-4856-93fe-50149954ef5c)
遷移した画面で「ウィザードに切り替える」を選択します。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fi-07.webp?alt=media&token=2257b6d9-9ef2-4d93-aef3-ee575a1503d5)
シンプルルーティングを選択して次へを選択します。
「シンプルなレコードを定義」を選択します。
「レコードタイプ」は「A ‐ IPv4 アドレスと一部の リソースにトラフィックをルーティングします」を選択します。
「値/トラフィックのルーティング先」のselectboxで「S3 ウェブサイトエンドポイントへのエイリアス」を選択します。
「リージョンを選択」のselectboxでS3のリージョンを選択します。
S3のエンドポイントを入力します。
「ターゲットの正常性の評価]で「いいえ」を選択します。
そして「シンプルなレコードを定義」を選択します。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fi-08.webp?alt=media&token=2483ee35-4313-443e-bf83-4b2556a7615b)
そしてレコードを作成を選択します。
レコードが作成されていました。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fi-09.png?alt=media&token=f94abf1b-1422-4ac9-9f01-ea36dbb2dae8)
次にサブドメイン(www)のエイリアスレコードを追加していきます。
レコードを作成からシンプルルーティングを選択します。
シンプルなレコードを定義を選択し、「レコード名」に「www」と入力します。
その他は先ほどと同じです。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fi-10.png?alt=media&token=bcf33799-30b5-4f71-986d-6f1714cc7820)
では設定したドメインにブラウザからアクセスします。無事に表示されていました。
次回はS3にホスティングしたサイトをhttps化したいと思います。お読みいただきありがとうございました。