Route53+S3で独自ドメインの静的Webサイト作れるってマジ！？
マジです。
この記事では、Route53とS3を使って独自ドメイン（今回はお名前.comで取得）での
Webサイト公開までをまとめて説明します。
この構築、何がいいの？
速い!（生成処理がないため、レスポンスは動的ウェブサイトより速い）
安い！(使用状況によって違いますが、無料枠の範囲内では1ヶ月あたり約0.50USD[1]らしい)
簡単！(AWS初心者でも作れる！)
ざっくり説明
S3→静的Webサイト構築
Route53→独自ドメイン設定
になります。
さっそく作ろう！
今回、作成する流れはこんな感じです。
- お名前.comで独自ドメイン取得
- S3で静的ウェブサイト作成
- Route53でドメイン設定
S3を先に作ってもいいですが、今回は独自ドメインを取得してから構築することにします。
最終的に作成できればどちらでも構いません。
お名前.comでドメイン取得！
有名ドメインポータルサイト「お名前.com」で今回は取得します。
検索して
取得すればOK！
今回は、koukaon.siteを取得しました。
また、このドメイン名がS3のバケット名になりますので、
取得したらそのドメインを記録しておきましょう。
S3で静的Webサイト構築
続いて、S3を構築していきましょう！
AWSのアカウントを作成します。
このようなAWSマネジメントコンソールに入ることができたら、
左上、検索欄で「S3」を検索しましょう。
右上、「バケットを作成」で今回使うバケットを作ります。
「バケット名」は先ほどお名前.comで取得したドメイン名にしておいてください。
ここで別の名前で設定すると、Route53登録時に取得したドメインで公開できなくなります。
また、「ブロックパブリックアクセス設定」を全て解除し、
下に注意書きがポップアップされるので、承認していきましょう。
他は、全てデフォルトで大丈夫です。
お好みで、オブジェクトの暗号化や、バージョニングをしましょう。
注意としては、バージョニングでは、オブジェクトがどんどん増えていくので
古いものは削除していくライフサイクルなどで利用料を削減するような対処も
別途、必要になるかもです。
バケットを作成したら、次にバケット自身の詳細な設定に移ります。
今のところ何も入っていないので、表示するhtmlを追加しましょう。
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
サンプル
<input type="button" value="クリック" onclick="alert('クリック')"/>
</body>
</html>
今回は、index.htmlを用意しました。
こちらを
S3にアップロードします。
次に静的ウェブサイトホスティングを有効にします。
そして、静的ウェブサイトホスティングを有効にして、インデックスドキュメントを
先ほどアップロードしたindex.htmlを指定します。
最後に、バケットポリシーを画像のような形で書けば設定は完了。
ポリシー内の"Resource"には、自身が作成したS3のバケット名を記入する必要があります。
実際に、S3でホスティングできているかどうかについては、「プロパティ」タブの
バケットウェブサイトエンドポイントをチェックすれば大丈夫です。
こんな感じで、表示されたらS3の設定は終了です。
Route53で独自ドメインでのルーティング
続いてRoute53で、お名前.comにおいて取得したドメインをS3に割り当てましょう。
Route53をコンソールから検索し、DNS管理のホストゾーンをクリックしましょう。
こちらの画面から「ホストゾーンの作成」をクリックします。
ドメイン名には、自分が取得したドメイン名を入力してください。今回は「koukaon.site」と
入力しました。
それ以外は、デフォルトで大丈夫です。ホストゾーンを作成をします。
このように、正常に登録されたらホストゾーンは作成されております。
ここから、詳細な設定に移ります。 こちらの画面からレコードを作成します。
今回はシンプルルーティングを選択しております。
これが一般的なDNSの設定になりますが、ルーティングには、
一台目（プライマリ）がエラーを吐いてヘルスチェックをパスできなかった時、
二台目（セカンダリ）に割り振られるようにする、フェイルオーバールーティングや
応答速度が短いサーバーの結果を返すレイテンシールーティング（日本からのアクセスだと、
東京リージョンのサーバーの結果が相対的に早いので、東京の結果が返ってくる。）など
種類は色々とあります。自分の状況に合わせて、ここは設定してください。
次に、シンプルなレコードを定義します。
レコードタイプはAを選択、値/トラフィックのルーティング先は画像のように、
S3ウェブサイトエンドポイントのエイリアスを選び、S3を作ったリージョンを設定し、
最後にS3のエンドポイントを入力します。入力後に。
「シンプルなレコードを定義」を押します。
これにて、Route53の設定は完了です。
お名前.comにてネームサーバー設定
忘れてはいけないのが、ネームサーバーの変更です。
これによってAWSのサーバーにドメインを紐付けられます。
Route53に初めから設定されているNSタイプをお名前.comに登録します。
「その他のサーバーを使う」で、4つ登録してください。
これで、ネームサーバーが更新されれば、全ての設定が完了です。
更新は時間が少しかかりますが、気長に待ちましょう。
最後に、確認します。
しっかりと、独自ドメインで表示されていますね。
まとめ
いかがだったでしょうか？
今回は、Route53+S3で独自ドメインによる静的ホスティングを行いました。
意外と簡単だと思いますので、簡易的なホームページなどを構築したり
試しに作る分には、ちょうどいい構築だと思います。
この記事を読んで参考になれば幸いです。
最後に
本格的に構築する場合は、CloudFrontをRoute53とS3の間に入れて
https化するのもいいかもしれないですね。
Discussion
「最後に」のところにも記載ありますが、ページが頻繁に更新されないのであればCloudFrontはさんだ方が良さそうですね。
無料枠も大きくなりましたので、結構使えると思います。
キャッシュクリアのために無効化(Invalidation)を沢山する場合、そちらにも別途料金が発生するのでご注意ください。
(といっても月間1,000件は無料なので、こちらもあまり問題にならない気がしますね。)