独自ドメインを購入し、個人の静的ページをAmazon S3で公開する方法

Amazon Simple Storage Service (S3)
Amazon Simple Storage Service (S3)

お名前.comで独自ドメインを1円で購入し、低コストで静的ウェブサイトを作ってみたが、予想以上に簡単にできた。EC2のように複雑な仕組みではなくS3でシンプルに簡単に。個人として使う分には申し分ない。

前提.AWSアカウントを作成していること

以下が参考になる。予想以上に敷居は低い。支払い方法はLINE PAYカードで問題なかった。本当に10分でできるのかは微妙だが。

■たった 10 分で構築できる!無料で AWS クラウドを始める方法| AWS
https://aws.amazon.com/jp/try-cloud/

お名前.comでドメインを購入

以下のお名前.comにてドメイン購入。
https://www.onamae.com/
初回のみ1円で購入できるので嬉しい(※2021年8月26日時点)。
こちらも何をしたのか残しておけばよかったが、AWSのアカウント作成と同様、何も難しいことはなく購入完了。こちらはLINE PAYカードは使えなかった。

S3の設定

以下の記事が秀逸。基本的にこの通りに進めていけば問題なし。一部、AWS上でドメインを購入する手順となっているがそれ以外はその通り。最後にお名前.com側でネームサーバの設定を行う(AWS側のネームサーバーを見るようにする)必要があるが、きちんと理解していないためか、非常に時間がかかった。

■Route 53 に登録されたカスタムドメインを使用した静的ウェブサイトの設定 – Amazon Simple Storage Service
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/website-hosting-custom-domain-walkthrough.html

以下、ステップごとに解説する。

ステップ 1: カスタムドメインを Route 53 に登録する

既にドメインを取得しているが、Route 53において、「ホストゾーンの作成」を行う。そうすると、NSレコードとSOAレコードが作成される。

ステップ 2: バケットを 2 つ作成する

S3にて、ドメインバケット(twinkangaroos.com)と、サブドメインバケット(www.twinkangaroos.com)を作成する。

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

「静的ウェブサイトホスティングを有効にする」ことにより、ウェブサイトとして扱えるようにする。

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

www.twinkangaroos.com → twinkangaroos.com にリダイレクト設定しておく。

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

念のためログを記録。

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

index.htmlを適当に作成してアップロード。

ステップ 7: エラードキュメントのアップロード

必須ではないのでスキップ。

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

「すべてのパブリックアクセスをブロックする」のチェックボックスを外す。

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

記載されているバケットポリシーを編集して貼り付ける。

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

「バケットウェブサイトエンドポイント」をクリックして、ブラウザで閲覧できればOK。

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

Route 53にて、twinkangaroos.com と www.twinkagaroos.com のAレコードを設定する。

www.twinkangaroos.com の設定画面

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

このままでは動かないため、Route 53 のNSレコードの「値/トラフィックのルーティング先」を複数コピーし・・・

AWS側

お名前.com側のネームサーバー設定にて「その他のネームサーバーを使う」に先ほどのルーティング先を登録すると・・・

お名前.com側

閲覧できるようになりました!