ムームードメインで独自ドメインを取得し、それをAWSのS3+CloudFront+Route53+ACM上で動かす必要があったので、メモがてら残しておきます。

しかしまさかあんなトラップがあったとは...
(ハマってないところはササっと書きます、詳しく書いて欲しい旨があればコメントください！書き直します！)

ムームードメインでドメインを取得

まずはムームードメインで、ドメインを取得しましょう！！
イベント系のページだったので、ここは自分の生まれの都道府県ドメインを取得しましょう！！！

あれ！？.okinawaってドメインがある！！良さそう！これにしよう！！

というわけで、xxxxx.okinawaというドメインを取得しました

一応この時のDNSは初期設定になっています。

AWSのS3にindex.htmlを上げる

まず、S3に保存したhtmlファイルに直接ブラウザからアクセスできるようにしましょう。

以下のように適当に作ったhtmlファイルを用意します

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h2>例のサイト</h2>
</body>
</html>

そしてこのhtmlファイルをアップロードするためのバケットを用意します。

AWSのS3にてバケットを作成、一応名前は上記で取得したドメインライクにしておきます。
リージョンはどこでもいいです、東京にしておきましょう。

バケットができたら、そのバケットのルートに先ほど作ったhtmlファイルをアップロードします。

この時、一旦publicアクセスを許可しておきます。目視できるように。
アップロードが完了したら、そのindex.htmlをクリックして、右側にメニューが出ることを確認してください。

そのメニュー内に、 [リンク] という項目があり、URLがあることを確認したら、クリックして開いてみましょう。

アクセスできることを確認したら、次にこのindex.htmlを静的サイトホスティングします。あれです、ルートにアクセスしたらindex.htmlを返すみたいなやつです(多分)

バケットのページに戻って、 [プロパティ] をクリックし、 [Static website hosting] をクリックします。

[このバケットを使用してウェブサイトをホストする] にチェックを入れると、インデックスドキュメントやエラードキュメントを指定するフォームが出現すると思います。 そうです、インデックスドキュメントに先ほど上げたindex.htmlを指定しましょう。 OKを押すとおそらく静的Webサイトホスティングできているはずです。

cloudfrontで配信して確認できるようにしてみましょう。

CloudFrontでS3オブジェクトを配信

S3にアップしたindex.htmlに直接アクセスさせてもいいですが、ドメインを設定したり、SSL/TSL接続に対応させることができないらしいです。また、S3から毎回毎回リソースを取得する形式だと、お金も取得時間もかかるので、なんとかキャッシュしておきたいところです。

そこでCloudFrontを使います。

CloudFrontではなんか静的コンテンツをキャッシュしておき、それを各地で配信できるから早いよ！みたいなことらしいです。(ざっくり)

NginxとかApacheとかみたいなものなのかなーと思っています。

というわけで、CloudFront経由でS3オブジェクトを配信するようにします。

CloudFrontのコンソールにて、初めてであればGetStartedか何かのボタンを押した後、2回目以降であればCreateDestributionをクリックした後に、 Webの欄の[Get Started]ボタンをクリック します。

チェックするのは以下の項目くらい

[OriginDomainName]の欄をクリックするとS3のバケットが選べるはずなので、先ほど作ったS3のバケットを選択します。
今回HTTPSでサイトを公開しようとしているので、[Viewer Protocol Policy ]では、[Redirect HTTP to HTTPS]にチェックを入れておきます。
[Alternate Domain Names (CNAMEs)]には、www.xxxxx.okinawaとかにしておきます、*.xxxxx.okinawaとかのワイルドカードも使えます。
[SSL Certificate]でSSL証明書を指定したいのですが、今はまだ証明書を作っていないので、[Default CloudFront Certificate (*.cloudfront.net)]とかにしておきます。

とまぁ上記くらいの設定をしておいて、[Create Distribution]でDistributionを作成します。

Distributionの一覧ページに遷移するので、しばらくすると、先ほど作成したDistributionにDomainNameが割り当てられます。(d1xxxxxxxxxxx.cloudfront.net)

うまくいっていれば割り当てられたDomainNameにアクセスすると、先ほど静的Webサイトホスティングしたindex.htmlが表示されます。

ここまで順調ですね！！

ただし、ここから先は場合によっては2~3日かかります。気をつけましょう。。。

ACMでSSL証明書を取得し、Route 53でDNSを管理する

ここ、個人的にはめちゃくちゃハマリどころでした

AWS Certificate Manager、通称ACMでは、証明書を発行することができる便利なやつです。しかも、AWSリソースに対して課金されるので料金は無料！これは積極的に使っていきたい。

まずは証明書の発行をリクエストしてみる

ACMでCloudFrontをSSL対応したいので、先ほど作成したCloudFrontのDistributionを編集します。

[SSL Certificate]の欄で、[Custom SSL Certificate (example.com)]を選択したいところですが、今はまだ証明書が発行されていないので、選択できません。というわけで、[Request or Import a Certificate with ACM]をクリックしてリクエストしましょう。

画面が遷移したので、ここで証明書の発行をしていきます。

注意点1: リージョンは必ずバージニア北部にすること

実はこのACM、基本的にはELB(Elastic Load Balancer)にしか対応しておらず、CloudFrontに対応出来る証明書が発行できるのは バージニア北部 の証明書だけなのです。

ここではリージョンを必ず バージニア北部 にしておきましょう。

リージョンを変更したら、ドメイン名を入力します。一応今回はwww.xxxxx.okinawaとしましたが、ワイルドカードも使えるので、*.xxxxx.okinawaも大丈夫です。

一度[確認とリクエスト]をクリックします。

注意点2: ドメインの管理者メールを作っておくこと

ここで確認をし、[確定とリクエスト]を発行...したいところですが、ここで[確定とリクエスト]をすると、メールがドメインの管理者の元へ届き、そのメールの元で認証リンクをクリックすると、晴れて証明書が発行できるという形になります。

なお、どうやらメールアドレスがないのに発行してしまうと、以降しばらくの間メールが届かないという珍事が発生するようです。

ムームーメールを使う場合

そのため、ここで証明書をリクエストする前に、独自ドメインのメールアドレスを作成する必要があります。ムームードメインなので、ムームーメールを使える人は、以下のメールアドレスを作成してください。

admin@<ドメイン>
administrator@<ドメイン>
hostmaster@<ドメイン>
postmaster@<ドメイン>
webmaster@<ドメイン>

これらのメールアドレスにメールが届きます(一つでもない場合はちゃんとメールが送られないっぽい？)

届いて承認した後は、DNSをRoute 53に切り替えないとCloudFrontにドメインをアタッチできません。なので、証明書の発行が終わったら以下の DNSを切り替える を参考にして切り替えておいてください。(ただし、そのためにはメールをすべて削除する必要があります！！)

結局切り替えるなら最初からSESを使うのがオススメですが、若干わかりにくいです。

SESを使う場合

もし、AWSのSESを使ってメールを受信したい場合は、先にいくつかやらないといけないことがあります。

DNSを切り替える

Route 53でHosted Zoneを作っておく
ムームードメインで取得したドメインのネームサーバーを[取得したドメインで使用する]に変更する
作成されたHosted Zoneの NS に紐付いているDNSを2で表示されているネームサーバーに一つずつ設定する(末尾の,は取り除くこと)
[ネームサーバーの設定変更]をクリックしてDNSが切り替わるまでしばらく待つ(1~2時間くらい?)

これで、ネームサーバーがRoute 53に切り替わりました。切り替わった後は、SESの設定ができるようになるので、クラスメソッドさんの[ACM] SSL証明書発行時のドメイン認証メールをSESで受け取ってみたあたりを参考にしてRoute 53とSESを活用し、独自ドメインでメールを受け取れるようにしておきましょう。

さて、これでメールが受け取れるようになったかと思いますので、ACMにて証明書を発行する[確認とリクエスト]をクリックしてメールを送りましょう。SESで受け取ったメールをDLしてhtmlファイルの中からリンクを抽出し、証明書をacceptしましょう。(ここは努力w)

これでやっと証明書が発行されたと思うので、この証明書をCloudFrontに適用します。

CloudFrontに証明書を適用する

地味にここもハマりどころ

何が悪かったのか、上記の手順で進めると、CloudFrontに先ほど発行できたはずの証明書がアタッチできません。。。ちくしょう。。。なぜだ。。。と思っていたら、どうやらこの証明書のアタッチ、できるようになるまで時間がかかる様子。(参考: 超初心者向け動かないつながらないには必ず理由がある Jaws-ug osaka awsのおjawsな使い方 / P19あたり)

何が悪いのかと思って設定を弄らないように1日待ちましょう。。。

1日経ったら証明書がアタッチできるようになるので、これで証明書はOK。

最後に独自ドメインでCloudFrontにアクセスできるようにする

長かったですが、最後にここができれば多分All OKです。

DNSはすでにRoute 53に切り替わっており、xxxxx.okinawaドメインの証明書も取得でき、S3→CloudFrontの配信もOKという状態なので、最後にCloudFrontとRoute 53のDNSをつなげます。

Route 53にAとCNAMEを追加する

先ほど作成したRoute 53のHosted Zoneを開き、[Create Record Set]をクリックします。
まずは Type Aを作りましょう、ここではNameは空白のまま、[Alias]のチェックを Yes にします。

するとターゲットを選べるようになるので、フォームをクリックすると、CloudFrontが選べるようになっているはずなので、S3と繋がっているCloudFrontを選択して[Save Record Set]をクリックします。

次に、Type CNAMEを作ります。ここでは、Nameに*を入れておき、[Alias]はNoのまま、[Value]にxxxxx.okinawaを入力しておきます。これにより、すべてのサブドメインへのアクセスを、先ほど作成したType Aのレコードのリソースを読みに行く形にしているんだろうな、多分と思っています。

その後、しばらく時間が経つと、www.xxxxx.okinawaにアクセスすると、S3にて静的Webサイトホスティングしたページが見られるようになっているはず！！！

長かった！！！！お疲れ様でした！！！

まとめ

ムームードメインでは、ネームサーバーを追加して設定することができなかったり、.okinawaドメインはRoute 53でドメインの移管ができなかったりと、結構つまりどころが多くてしんどかったですが、なんとかまぁそれなりに動くようにはなりました。。。

今S3のバケットは公開されている形になるので、必要に応じてアクセス権を変えたり、CloudFrontからのみのアクセスだけを受け付けるように設定を変更してあげたりしてください。

あと、いろいろ至らないところとかあると思うので、よかったらコメントとかでご指摘いただければと思います。

誰かの助けになっているといいなぁ(遠い目)

ムームードメインで取得したドメインをS3+CloudFront+Route 53+ACMに適用させるときにハマった