S3 + Route 53 + CloudFrontで静的サイト配信する(with HTTPS)
この記事は私の所属する研究室、田胡研究室のアドベントカレンダー4日目の記事です。
S3とRoute53とCloudFrontを使ってHTTPSで静的サイト配信する。
タイトルの通りです。最近やってちょっとハマったりしたので研究室とは何の関係もないですが、記事にしてみます。
この記事でやること
この記事の内容を全部やると、AWS(Amazon Web Service)のS3(Simple Storage Service)・Route53・CloudFrontを用いてお名前.comで取得した独自ドメインでアクセスできるサイトを作ることができます。
似たような記事がたくさんあるのですが、AWSの画面が微妙に変わったりすることがあるのでココに記しておきます。この記事に掲載されているスクリーンショットは2017/12/04取得のものです。
AWSで配信するメリット
静的サイト配信と言えばGithub Pagesなども思いつくかと思いますが、AWSでやるメリットを強いて言えば…
- サーバ用意不要
- ウェブサーバーの設定なども不要！
- サイトのレスポンスも爆速！！
- HTTPS
という感じ。
必要なもの
この記事の内容をそのまんまやろうとすると以下のものが必要になりますが、適宜自分の環境に読みかえながらやってください。
- AWSのアカウント(これはAmazonでお買い物するのとは別のものです)
- お名前.comにより取得された独自ドメイン(お名前で取得している必要は別に無いですがこの記事ではお名前.comでの操作手順を書きます。)
- 配信したいサイトの中身(HTML/CSS/JavaScriptなどなど)
AWSの操作について
タイトルにもあるようにこの記事では様々なAWSのサービスを横断して使っていきます。
サービス間の移動は、上部のタブの「サービス」のところをクリックして、検索欄に先頭何文字か入れるのが速いと思います。
「○○に移動」みたいな表記が出てきたらこんな感じでやってみるといいと思います。
では本題。
本題に入っていきます。手順はざっとこんな感じ。
- Route53にHosted Zoneを作成
- お名前.comで取得したドメインのネームサーバーをRoute53のものに変更
- HTTPS配信するために鍵を作成
- S3にバケットを作成
- サイトの中身をアップロード
- S3の設定を変えて、静的サイト配信する
- CloudFrontの各種設定
- Route53の設定を変更して独自ドメインからサイトにアクセスできるようにする
という感じ。ちょっと長いですが、頑張りましょう。慣れれば大したことないです。
Route53の設定
最初はS3かと思いきやRoute53の設定です。Route53はAWSのDNSサーバーです。
別にあとでやってもかまわないのですが、使っているDNSによっては変更が効くまでに時間が掛かったりするので最初にやってしまいます。
AWSのコンソールからRoute53に移動しましょう。
Route53に移動したら、左側から「Hosted zones」を選び、青の「Create Hosted Zone」を選びます。
そうすると右側に入力欄が出現するので、ここに自分が使いたいドメインを入れましょう。
今回はテスト用に私がクソドメインマスターとしてブイブイ言わせていたときの遺産を使うことにしました。
doutei.me………童貞 ドット ミー！！！！！
なんてひどいドメインだ…。
入力が済んだら「Create」押しちゃってね。
そうするとこんな画面になるはず。
Typeが「NS」になってる行を選びます。とりあえず上のスクリーンショットの状態になってたらOKです。
お名前.comのネームサーバーを書き換える
ちょっと寄り道、AWSを離れてお名前.comの管理画面に移動します。
そうしたら、ドメインの一覧から使いたいドメインを選びましょう。
ひどいドメインばっかやないか…。
気を取り直して、今回使う「doutei.me」を選びましょう。
選ぶと途中にネームサーバー情報というのが出てきます。右下の「ネームサーバーの変更」をクリックします。
そうしたら、ネームサーバーの変更画面が出てくるので「その他のネームサーバー」を選んで、入力欄に先程のRoute53の最後の手順で出てきた、値を上から改行ごとに貼り付けていきます。
AWSの方の画面に出てくるアドレスの末尾には.がついてますが、それは外して大丈夫です。
こんな感じで入力できたら、確認を押してOK押してネームサーバーを変更しちゃいましょう。
お名前.comでの作業は以上です。
ACMで鍵を作る
AWSのコンソールに帰ってきたら、S3に行くと見せかけてCertificate Managerに移動しましょう。あ、ちなみにACMというのはAmazon Certificate Managerの略らしいです。
ここがとても重要なのですが、この作業だけはリージョンを選ぶ必要があります。
右上のところが、「米国東部（バージニア北部）」になっていない場合はそこをクリックしたら変更できるので変更しましょう。
コレ忘れると後で詰みます。
そうしたら、「証明書のリクエスト」というボタンがあるので力を込めてクリックします。
ドメイン名を入れる画面が出て来るので、今回使うドメインを入れます。
入れたら次へ進み、次の画面でDNSの検証を選び、次へ…の文字がなんか消えてますが次へだと思われる次へっぽいボタンを押します。
確認が出てくるので「確定とリクエスト」をクリック。
次の画面で、ドメイン名が出て来るのでそこの横にあるちっちゃい▼を押して出て来る「Route53でのレコードの作成」をクリックします。
確認が出てくるので作成を押しちゃいましょう。
そうするとこんな画面↓になるので、5分から10分位待ちます。リロードかけて「検証保留中」のところが「検証済み」になればこの手順は終了です。
S3にバケット作ってコンテンツを放り込んで設定をいじる
さぁお待たせしました。(待ってない?)
S3です。S3に移動しちゃってください。
こんな画面が出て来る(僕はすでに前作ったやつが出ちゃってますが普通は何もないはず)ので、「バケットを作成する」をクリックします。
そうするとなんか、モーダルみたいなのが出てくるので、以下の画像のようにバケット名のところに公開したいドメイン名を入力します。
あとは特に弄るところもないので、左下の作成ボタンを押しちゃいます。
作成されたら「アップロード」ボタンを押して、出てきたモーダルに静的サイトの画像やらHTMLやらをまとめてドラッグアンドドロップします。
良さそうなら左下のアップロードボタンを押します。
アップロードが終わったら、上部タブからプロパティを選びます。選んだら「Static website hosting」の「無効」みたいになってるあたりをクリックします。
そうすると以下の画面が出て来るので、「このバケットを使用してウェブサイトをホストする」を選択して、インデックスドキュメントのところには、ファイル名指定なし(今回であればhttps://doutei.me/)でアクセスしてきたときに表示したいファイル名を入れておくといいでしょう。エラードキュメントは用意していれば入れてもいいですが僕はなにもいれませんでした。
それが終わったら「保存」をクリック。
そうしたら、先程の上部タブから「アクセス権限」を選び、その下の選択肢から「バケットポリシー」を選びます。
これは、バケットの閲覧権限を指定するようなもので、今回は公開するサイトなので、匿名ユーザー(*)からReadできるというような設定にします。今回使ったポリシーは以下。
{ "Version": "2012-10-17", "Statement": [ { "Sid": "AddPerm", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::doutei.me/*" } ] }
基本的にはコピペで大丈夫だけど、Resourceのところは自分のバケット名に合わせて指定してね。
ここまででS3の諸々は終了。おつかれさまでした。
CloudFrontの設定をする
急に出てきたCloudFront。一体何者かというのは、このへんをご覧ください。
本来全世界に向けて静的なデータを高速に配信するために用いられるCDNと呼ばれるものなのですが、今回はHTTPSでのアクセスに対応するために使ってみたいと思います。(もちろんS3からの静的サイト配信も高速化することができます♪)
というわけで、AWSのコンソールからCloudFrontに移動しましょう。
こんな画面が出てきます。(例によって僕が以前やったやつが残っちゃってますが気にしないでください)
青い「Create Distribution」をクリックします。そうすると、WebかRTMPかみたいな選択肢が出てくるのでWebを選んで「Get Started」をポチッといきます。
ズラーッと長い設定画面が出て来るので、いくつかの設定を変更します。間違えたらあとからでも変更できるのですが、CloudFrontの特性上、一度の設定変更に20分位の時間を要するので間違えないように一発でやることをおすすめします。
まずいちばん上、Origin Settings。
「Origin Domain Name」のところにカーソルを合わせると先程作成したバケットが出てくるのでそれを選びます。
次は、「Default Cache Behavior Settings」です。変更するのは一箇所だけ、Viewer Protocol Policyを「Redirect HTTP to HTTPS」にしてやります。これで、HTTPでアクセスしてきても自動的にHTTPSにリダイレクトさせることができます。
次は「Distribution Settings」。これは3箇所変更します。
一箇所目・二箇所目はこれ
「Alternate Domain Names(CNAMEs)」のところに今回使うドメイン名を入れる。これ忘れると、あとでDNSの設定を変えるときに出てこなくて詰む。罠。
二箇所目は「SSL Certificate」のところを、「Custom SSL Certificate (example.com)」選んで、ドロップダウンのところから今回使うドメインの鍵をえらんでやります。ACMのリージョンを間違えているとここで鍵が出てこなくて詰むという。罠。
そしてもう一箇所は、「Default Root Object」ここにはindex.htmlとか入れておくといいでしょう。そうすれば、/でアクセスが来たときにindex.htmlを返してくれます。
ここまでやったら一番下、「Create Distribution」をおしてやります。
すると一覧の画面に戻って、「In progress」みたいなのが無限に回り続けてるかと思います。これ、20分くらいかかるのが普通なのでしばらくう放置して、YouTubeでもみてましょう。
「In Progress」が「deployed」に変わればココの手順も終わり。おつかれさまでした。
Route53にCloudFrontのアドレスを設定
さあ最後のステップです。
Route53に戻りましょう。
Route53に戻ったら、Hosted zonesを開いて、先程設定したドメインをクリックします。
そうしたら「Create Record Set」をクリックして、右側のフォームをこんな感じで埋めます。
ポイントとしては
- Typeを
Aに。 - Aliasを
Yesに。 - Alias Targetにカーソルを当てると、先ほど作成したCloudFrontのアドレスが出て来るのでそれをクリック。(これ候補出るまで結構時間かかる)
という感じ。
ココまでやれば、無事！自分のドメインでアクセスできるはず！！
僕のサイトはこちら
お疲れ様でした〜！
雑談
二回目なので詰んだりしないやろーと思いつつ、CNAMEsのところ設定し忘れたり、いろいろやらかして時間掛かっちゃったなぁ。
明日は@namazu510さんがしょうもないことをしてくれるらしいです。
お楽しみに。
