はじめに
この記事で取り扱う内容
この記事では、S3 + Certificate Manager + CloudFront + Route53を利用したHTTP/2対応、独自ドメインの静的ウェブサイトホスティングのセットアップ手順を共有するためのものです。
この記事で取り扱わない内容
- AWS自体の解説
- AWSアカウントの作成方法の詳細（概要と公式チュートリアルのみをご紹介します）
- ドメインの取得方法の詳細
想定する読者
- フロントエンド技術については知識がある
- サーバー側の技術については専門外
- AWSについての基本的な知識を学習したい
という方を想定して記事を書いています。そのため、操作はCLIではなくWEBコンソールで行い、各ステップごとにスクリーンショットを使って解説を行います。
サーバーサイドの知識、経験のある方には冗長な解説になるかと思いますが、ご承知ください。
文中の絵文字について
⭕️推奨する作業をこのアイコンでお知らせします。
❗詰まりポイントはこのアイコンでお知らせします。
❌してはいけないことはこのアイコンでお知らせします。
環境
この記事は2018/07時点でのAWSを元に製作されています。 今後AWSのUIや設定項目がバージョンアップとともに変更になる可能性がありますのでご注意ください。
AWSのWEBコンソールは、ログインしている状態ならリンクから移動できます。例としてこのリンクからS3コンソールへ移動できます。文中には操作に必要なコンソールへのリンクを埋め込んでいます。
表題の費用について
今月の私の概算請求金額です。期間は月、単位はドルです。
S3をホスティング以外にアーカイブにも利用しています。
アクセス数、総転送量、保存容量にもよりますが、個人の静的サイトは月1ドル以下で運営できるはずです。
なお、独自ドメイン自体の取得および維持の費用は表題の費用に含まれていません。
ご注意ください。
手順
この記事は公式チュートリアルAmazon S3 での静的ウェブサイトのホスティングを基準に作業を進めていきます。
- 事前準備
- S3で静的ウェブサイトのホスティング
- S3 + Route53で独自ドメインのホスティングを行う
- S3 + Certificate Manager + CloudFront + Route53でHTTP/2に対応した静的ウェブサイトのホスティングを行う
では始めましょう。👍
事前準備
AWSでの独自ドメインホスティングには、アカウントの作成とドメインの取得が必要になります。ここではその作業の概要を説明します。
AWSアカウントを作成する
まずはここからAWSのアカウントを作成します。
AWSアカウントが作成できたら、次はIdentity and Access ManagementコンソールでIAMユーザーを製作します。アカウントの管理はIAM のベストプラクティスにしたがって管理しましょう。
この記事の範囲では上記3つの手順を行えば準備完了です。以降は手順2で製作したIAMユーザーとしてログインし、作業を続けます。
❗作成したAWSアカウントは漏出すると経済的な損失が発生します。取り扱いには十分注意してください。
⭕️AWSアカウントを保護するための設定と手順の記事をご紹介します。すべてのAWSユーザーにこの記事をオススメします。
AWSアカウントを取得したら速攻でやっておくべき初期設定まとめ
ドメインを取得する / ドメイン名を決めておく
独自ドメインでのホスティングを行う場合、この段階でドメイン名を決めておきましょう。ドメインを購入する先はどこでも構いません。またAWSのサービスの一環としてもドメインは購入できます。
S3で静的ウェブサイトのホスティング
S3はAWSのストレージを担当するサービスです。S3はストレージですが単体での静的サイトホスティングができます。
S3の設定はS3コンソールから設定が行えます。
バケットを作成する
まずは、S3コンソールから新規のバケットを作成します。静的ウェブサイトホスティングに使用するバケット名は、使用するドメイン名と同じでなくてはいけません。
この記事では、ドメイン名を仮にあなたのドメイン.comとして表記します。
バケットを作成するボタンを押すと、バケットの初期設定ウィザードが開きます。
❗バケット名を後から変更することはできません。事前に決めた、今後使用する予定のドメイン名をつけてください。
その他の設定はデフォルトのまま「バケットの作成」を完了させてください。
バケットの作成が完了すると、S3コンソールのトップ画面にバケット一覧が表示されますので、バケット名をクリックすると詳細設定画面に移動します。
バケットにStatic website hostingを設定する
公式ドキュメント
バケットの静的ウェブサイトホスティング機能を有効化します。
図の箇所をクリックすると、設定ウィンドウが開きます。
インデックスドキュメントは、たとえばhttp://あなたのドメイン.comにアクセスしたときデフォルトで表示されるドキュメントを示します。
上記の例の場合
http://あなたのドメイン.com/index.html
がデフォルトで表示されます。
バケットにパブリックアクセスを許可する
バケットをインターネット側からアクセスできるように設定を行います。
公式ドキュメントより設定例を抜粋します。
Resourceをご自身のバケットのものに書き換えると、対象のバケットがインターネットに公開されます。
arnは「Amazonリソースネーム」の略で、AWS上のあらゆるリソースに割り振られた固有IDです。S3のバケットにも割り振られています。S3のバケットのARNは「バケットポリシーエディター ARN: ...」という部分に表示されています。
{
"Version":"2012-10-17",
"Statement":[{
"Sid":"PublicReadGetObject",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":[
"arn:aws:s3:::あなたのドメイン.com/*"
]
}]
}
❗️Versionは単純な日付ではありません。ファイルフォーマットのバージョンを示す固定値です。これを書き換えると動かなくなります。
❌この設定を行うと、インターネットから自由にバケット内のデータを読み込めます。（書き込みはできません）
公開してはいけない情報 / するつもりのない情報が含まれるバケットには設定をしてはいけません。
バケットにファイルをアップロードする
バケットの「概要」タブからファイルのアップロードが可能です。テスト用のindex.htmlファイルをバケットにアップロードしてください。
確認する
ファイルのアップロードが終わったら、Static website hostingの画面で表示された「エンドポイント」のURLリンクをクリックします。テスト用のindex.htmlが表示されたら設定は完了です。
🎉
S3 + Route53で独自ドメインのホスティング
S3単体では、S3が任意に生成したサブドメインでしかサイトにアクセスできません。そこでAWS内のDNSサーバー、Route53を利用します。Route53はドメインとAWS内の各種サービスを結びつける役割をします。S3とRoute53を併用することで独自ドメインでのホスティングを可能にします。
各種設定はRoute 53コンソールから行えます。
ドメインを確保する
まずはドメインを正式に確保します。事前準備の段階で確保している場合は不要です。
Route 53経由でドメインを購入する場合はこの公式ドキュメントをご参照ください。
wwwサブドメインのリダイレクト用バケットを作る
www.あなたのドメイン.comにアクセスが来た場合あなたのドメイン.comにリダイレクトする機能を持ったバケットを製作します。
バケットを作成するで解説した方法でwww.あなたのドメイン.comという名前のバケットを作成します。
www.あなたのドメイン.comバケットのStatic website hostingを設定するときに、上記のようにリクエストのリダイレクト設定を行います。
Route 53にHosted Zoneを追加
ホストゾーンとは公式ドキュメントによると
パブリックホストゾーンは、あるドメイン、たとえば example.com とそのサブドメイン (apex.example.com や acme.example.com) のトラフィックをインターネットまたは特定のドメインでルーティングする方法についての情報を保持するコンテナです。
です。
簡単にいうとドメイン1個に限定されたルーターです。
操作はRoute 53コンソールから行えます。
Route 53経由でドメインを購入した場合、Hosted Zoneは自動で作成されます。
外部でドメインを購入した場合は新規にHosted Zoneを追加します。
Route53とS3バケットを結びつける
先ほど作成したHosted Zone内で、Create Record Setを行います。
作成したHosted Zoneにあなたのドメイン.comのS3バケットを指すAレコードを追加します。Alias Targetsにフォーカスを当てるとリストを表示してくれるので、リスト内からS3バケットを指定します。
また同様の手順を繰り返してwww.あなたのドメイン.comのS3バケットを指すAレコードも追加します。
外部ドメインレジストラーにRoute53のDNSサーバーのアドレスを教える
この手順は、Route 53でドメインを購入した場合は不要です。外部のドメインレジストラーを利用した場合だけ設定が必要になります。
DNSサーバーのアドレスを確認する
Route 53コンソールのType NSの部分に書いてあるのがDNSサーバーのアドレスです。
外部ドメインレジストラーに教える
今回はお名前.comを例にします。
取得したドメインを選択、他のネームサーバーを使用するに、Route 53コンソールで取得したアドレスを入力します。
これでS3内のファイルが、あなたのドメイン.comからブラウズできるようになります。
🎉🎉
S3 + Certificate Manager + CloudFront + Route53でHTTP/2に対応した静的ウェブサイトのホスティング
CloudFrontは、世界全体に散らばるキャッシュサーバーです。リクエストに対する応答速度を上昇させ、またS3からの転送料金を抑えることができます。
CloudFrontは、httpsで通信できます。この機能を利用して独自ドメインサイトをHTTP/2対応にします。
Certificate Managerで証明書を発行
Certificate Managerコンソールから証明書を発行します。
❗これから利用するCloudFront用の証明書は、必ず米国東部（バージニア北部）リージョンで作成する必要があります。その他のリージョンで作成した証明書は利用できません。
Amazon CloudFront で ACM 証明書を使用するには、米国東部（バージニア北部） リージョンで証明書をリクエストまたはインポートする必要があります。
Certificate Managerコンソールに移動したら、まずリージョンを変更してください。
証明書のリクエストを行います。
証明書のドメイン名を指定します。
ドメイン名はあなたのドメイン.comと*.あなたのドメイン.comです。アスタリスクをつけるとワイルドカード指定になりますので、すべてのサブドメインが証明書の対象になります。
次にあなたがドメインの正式な所有者であることを証明する必要があります。検証方法を「DNSの検証」にします。
検証進行中の画面が表示されますので、Route53でのレコードの作成ボタンをクリックします。今回はRoute53がDNSサーバーなので、これで検証が終わります。
CloudFrontのDistributionの製作と設定
S3をオリジンとしたCloudFrontの配信設定を行います。
これらの設定はCloudFrontコンソールから行うことができます。
新規Distributionを作成します。
Web用Distributionを作成します。
新規Distributionの設定手順を解説します。
まずはOrigin Domain NamesからS3のバケットを選択します。
❌入力欄にフォーカスを当てると自動でリストを表示してくれますが、この中から選択してはいけません。
Original Domain Nameは「バケットにStatic website hostingを設定する」で表示されたS3バケットのStatic Website Hostingsエンドポイントを指定します。
参考記事 :
- CloudFront + S3 Website: “The specified key does not exist” when an implicit index document should be displayed
- Route53+S3+CloudFrontでhttpsのurlをリダイレクトさせる
Distribution Settingから上の図の設定を変更します。
これで「Certificate Managerで証明書を発行」の手順で作成した証明書を参照してSSL通信ができるようになります。
CloudFrontコンソールに戻ると、新規Distributionのdeploy状態がin progressになっています。この状態はS3からCloudFrontへファイルのコピーが行われている状態です。まだ利用できません。数分経つと勝手に完了します。
同様の手順でwww.あなたのドメイン.com用のDistributionも作成します。SSL Certificateはサブドメインも指定しているので、あなたのドメイン.com用のものがそのまま使用できます。
Route53とDistributionを結びつける
Route 53とS3バケットを結びつけると同じ手順で、新規に作成したCloudFrontのDistributionをRoute53のAlias Targetにします。
また、www.あなたのドメイン.com用のAレコードも、同様にwww.あなたのドメイン.com用DistributionをAlias Targetにします。
これでCloudFrontを経由したHTTP/2でのホスティングが可能になります。
🎉🎉🎉
HTTP/2での通信が行われているかの確認方法は、こちらの記事で解説されています。
CloudFrontでHTTP2対応する方法とChromeでの確認方法
以上で設定は完了です。
🏆