💻

Route53 でドメイン取得しS３にてウェブホスティングしてみた。

2022/12/03に公開

AWS

やってみたこと

Route53でドメインを購入し、S3にHTMLファイルを配置しました。
そちらを連携させると簡単にウェブサイトを公開できるみたいなので
実際に試してみました。

ドメインの取得

AWSコンソールにてドメインを取得します。
①Route53ダッシュボードにて「ドメインの登録」に登録したいドメイン名を入力して「チェック」をする。
今回は「zenntest」と入力しました。

②ページが転移して使用できるドメイン名および1年間あたりの金額が一覧に表示されます。
今回購入するドメインを「カートに入れる」を押して、登録期間を決めます。
登録は後で自動更新したりできるので迷ったら1年で問題ないかと問題なければ続行する。

ステータスが「利用可能」とあれば購入が可能
登録者の連絡先が出てきますのでこちらは情報を登録してください。

④「登録者の連絡先」登録画面が出ますので入力
　入力後「続行」
⑤ドメインの自動更新を無効化して規約に☑を付けたら「注文を完了」
⑥注文直後はRoute53の「保留中のリクエスト」にて購入できたこと&ドメイン登録が進んでいることが確認できる
⑦注文完了後メールが届きます。メールを確認すると「登録者の連絡先」欄が「検証待ち⇒検証済み」に代わりました

⑦の手順まで進めるとドメインの取得が完了です。
自分は注文からメールが届いてドメインが使えるようになるまで4時間程でした。
※最大3日間ほど待つみたいです。

S3にコンテンツを設置する

①「バケットを作成」を押してS3にバケットを作成

②「パブリックアクセスをすべてブロック」に☑が入っていますのでそちらを外す。後はデフォルトで問題ありません

②Web上に表示するhtmlをS3にアップロード
　今回は挙動を確認したいだけなので、テンプレート的なコードを使用しました。

<html>
    <head>
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>
        サンプル
        <input type="button" value="クリック" onclick="alert('クリック')"/>
    </body>
</html>

➂作成したバケット内にて「アップロード」
　「ファイルを追加」より②の手順で作成したhtmlを選択し「アップロード」
以上でS3への静的コンテンツ設置が完了です。

S3の設定

①作成したS3のバケットの「プロパティ」より「静的ウェブサイトホスティング」を編集
設定を有効にしてインデックスドキュメントを先ほどアップロードした「index.html」を指定

②次に「アクセス許可」のバケットポリシーに下記内容を保存して設定完了
　※「S3バケット名」は今回作成したバケット名を入れる

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::S3バケット名/*"
        }
    ]
}

③設定完了後、「静的ウェブサイトホスティング」にURLが生成される

こちらのURLをクリックすると、先ほど設定した「index.html」がウェブ上に表示されました

ネームサーバにAレコードを追加

①Route53のダッシュボードより「ホストゾーン」を選択
②「ホストゾーン」内で取得したドメイン名を選択
③「レコードを作成」をクリック
④「クイック作成へ切り替える」を押して下記のように入力してレコードを作成します

入力箇所	入力内容
レコードタイプ	A
トラフィックのルーティング先	「エイリアス」に変更してS3ウェブサイトエンドポイントのエイリアス。選択後リージョンが出現しますので先ほど作成したS3のリージョンを選択

1時間ほどして作成したドメインを検索すると実際にページが表示されました。

失敗、躓いたポイント