https対応した独自ドメインのWebサイトをS3 + CloudFrontで運用する手順

インフラ

こんにちは。Enjoy IT Life管理人の仁科(@nishina555)です。

Webサイトを作成する方法にはいくつかありますが、サーバーをレンタルする方法が一般的です。
しかしサーバーを利用するとサーバー管理の手間がかかってしまいます。

サーバーサイドの動的処理が不要な場合はサーバーを用意しなくてもWebサイトを公開できます。

今回は静的ファイルで構成されたWebサイトをS3とCloudFrontを利用して構築する方法について紹介します。

下準備: 独自ドメインをRoute53に登録する

まずは独自ドメインをAWSで利用できるように設定を行います。

独自ドメインを取得する

まずは独自ドメインを取得します。
今回は例として、ムームードメインdeliciouslif.comという独自ドメインを取得しました。

Route53に独自ドメインの情報を追加する

Route53とは独自ドメインの登録やDNSレコードの管理が行える権威DNSサービスです。AWSでドメイン管理をする場合はRoute53を利用します。

AWSマネージメントコンソールで『Route53』を選択します。

『DNS管理』の『今すぐ始める』を選択します。

『ホストゾーンの作成』を選択します。

『ドメイン名』に取得した独自ドメインを入力、『タイプ』に『パブリックホストゾーン』を指定して『作成』を選択します。

作成後、ホストゾーンにNSレコードとSOAレコードが作成されていればOKです。

レコードのタイプの意味と役割の詳細は『Amazon Route 53 がパブリックホストゾーンに作成する NS レコードと SOA レコード』を参照してください。

独自ドメインのネームサーバー情報を変更する

次に、独自ドメインのネームサーバー情報を変更します。
独自ドメインの管理画面にアクセスし、ネームサーバーの設定を変更する場所を見つけます。

今回例として利用しているムームードメインの場合ですと、以下の部分にネームサーバーの情報が記載されています。

Route53で取得したネームサーバーの情報はNSレコードに記載されています。
ですので、独自ドメインのネームサーバー情報を、Route53のNSレコードに記載されているサーバー情報に変更します。

なお、NSレコードに記載されているネームサーバーの末尾は.com.のようにドットで終わっています。ネームサーバー登録時には末尾のドットは不要ですので注意してください。

これで、Route53のネームサーバーで独自ドメインを利用する準備が整いました。

下準備: 独自ドメインのSSLサーバ証明書を用意する

独自ドメインをHTTPSで運用するため、独自ドメインに対するSSLサーバ証明書の発行を行います。

ACMでSSLサーバー証明書を発行する

ACMとはAWS Certificate Managerの略で、SSLサーバー証明書を発行できるサービスです。
ACMはELBやCloudFrontをはじめとしたACM統合サービスにおいて利用可能です。

AWSマネージメントコンソールで『Certificate Manager』を選択します。

『証明書のプロビジョニング』の『今すぐ始める』を選択します。

『パブリック証明書のリクエスト』にチェックをし、『証明書のリクエスト』を選択します。

『ドメイン名』にSSL化対象の独自ドメインを入力し、『次へ』を選択します。

ACMでSSLサーバー証明書を発行するためにはまず独自ドメインの所有認証を行う必要があります。 ACMでは『DNSの検証』と『Eメールの検証』の2つの認証方法が用意されています。

今回は『DNSの検証』を利用して認証を行います。
『DNSの検証』にチェックを入れ『次へ』を選択します。

必要であれば、タグの設定をします。

記載内容に問題なければ『確定とリクエスト』を選択します。

この段階では検証が済んでいないため『検証保留中』というステータスになっていることがわかります。

ドメインの検証を行う

ACMを利用したSSLサーバ証明書の発行を完了させるにはドメインの検証が必要です。
今回は『DNSの検証』を利用した認証手順について紹介します。

先ほどのACMの証明書リクエスト画面にある『DNS設定をファイルにエクスポート』を選択します。

ダウンロードしたファイルにはCNAMEタイプのレコードが記載されています。

CNAMEとは、acme.example.comなどの現在のレコードの名前に対する DNS クエリを、別のドメイン (example.comexample.netなど) またはサブドメイン (acme.example.comzenith.example.orgなど) にマッピングするレコードです。1

ダウンロードしたファイルに記載されているCNAMEをRoute53に登録することでDNS検証は完了します。

『Route53ダッシュボード』を開き、『ホストゾーン』にある紐付け対象のドメインをクリックします。

『レコードセットの作成』を選択します。

『タイプ』に『CNAME – 正規名』を指定します。
csvでエクスポートした情報を記載し、『作成』を押します。

作成後、CNAMEレコードが表示されていればOKです。

CNAMEレコードの登録が完了したら、ACMの画面を確認します。
対象のドメインの状況が『発行済み』になればOKです。

ステータスが『発行済み』になるのにはCNAME登録から数分がかかります。

なお、今回はDNS検証を利用してドメインの所有認証を行いましたが、メール認証にした場合はRoute53にCNAMEを登録する作業は不要となります。

S3でWebサイトをホスティングする

S3とはSimple Storage Serviceの略で、オンラインストレージ機能を提供するAWSのサービスです。

S3に用意されているホスティング機能を利用することで、S3にファイルをアップロードするだけでWebサイトとしてネット上に公開されます。

ここではS3でWebサイトをホスティングする手順について紹介します。

バケットを作成する

S3のダッシュボードの『バケットを作成する』を選択します。

必要項目を入力してバケットを作成します。
Webサイトを公開状態にするため、アクセス許可の設定で『パブリックアクセスをブロック』のチェックを外します。

一覧にS3バケットが表示されればOKです。

Webサイトのホスティング機能を有効にする

作成したS3バケットの『プロパティ』項目にある『Static website hosting』を選択します。
『このバケットを使用してウェブサイトをホストする』をチェックし、インデックスドキュメントを指定します。
今回はindex.htmlをインデックスドキュメントにしました。

パケットホスティングにチェックがついていればOKです。

ファイルをアップロードする

今回はインデックスドキュメントとして指定したindex.htmlをアップロードしてみます。

『アップロード』を選択します。

静的ファイルを指定してアップロードを実行します。このとき、『このオブジェクトにパブリック読み取りアクセス権限を付与する』を選択してファイルを公開状態にします。

S3のWebサイトのエンドポイント(xxx.s3-website-xxx-amazonaws.com)にアクセスして画面が表示できればOKです。

エンドポイントは『Static website hosting』の詳細で確認できます。

S3のコンテンツを配信するCloudFrontを構築する

ここまでで、S3のエンドポイントにアクセスするとWebサイトが表示される環境を用意できました。

あとはS3のエンドポイントと独自ドメインをRoute53を利用して紐づければ、独自ドメインでS3にアクセスできます。
しかし、S3では独自ドメインのSSLサーバ証明書が適用できないため、S3のエンドポイントに独自ドメインを適用するとHTTPSでアクセスできません。

S3のコンテンツをhttps対応した独自ドメインで配信するにはCloudFrontを導入する必要があります。

CloudFrontとはコンテンツ配信ネットワークサービスを提供するAWSの機能です。
コンテンツ配信ネットワークサービスは総称してCDNと呼ばれています。つまり、CloudFrontはCDNの一種といえます。

CDNにはコンテンツのキャッシュ機能が搭載されています。
ですので、CloudFrontを利用することで『HTTPS + 独自ドメイン』によるホスティングが可能になるだけでなく、Webサイトの高速化の効果も期待できます。

CloudFrontのダッシュボードを開き、『Create Distribution』を選択します。

Webの『Get Started』を選択します。

『Origin Domain Name』にS3静的ウェブサイトのエンドポイント(xxx-s3-website-xxx.amazonaws.com)を指定します。
S3バケットのエンドポイント(xxx.s3.amazonaws.com)ではないので注意してください。

そのほかの設定はデフォルトで指定されているものを選択します。

設定に問題がなければ、設定完了後しばらくするとステータスが『Deployed』になります。

CloudFrontのドメイン名でアクセスして画面が表示できればOKです。

なお、CloudFrontのドメイン名は一覧画面から確認できます。

独自ドメインをCloudFrontに適用する

独自ドメインでWebサイトにアクセスできるようにするため、CloudFrontと独自ドメインの紐付けを行います。

Route53の編集

『Route53ダッシュボード』を開き、『ホストゾーン』にある紐付け対象のドメインをクリックします。

『レコードセットの作成』を選択します。

『タイプ』に『A – IPv4アドレス』を指定し、『エイリアス』を『はい』にします。
『エイリアス先』は『CloudFrontディストリビューション』と記載されたCloudFrontのDNS名を選択し、『作成』を押します。

作成後、Aレコード(エイリアス)が表示されていればOKです。

CloudFrontの設定の編集

『Distribution Settings』を選択します。

『Edit』を選択します。

『Alternate Domain Names(CNAMEs)』にCloudFrontへ適用させる独自ドメインを指定します。

『SSL Certificate』の『Custom SSL Certificate』にチェックをし、ACMで取得したSSLサーバ証明書を指定します。
SSLサーバ証明書が選択肢に表示されない場合はACMでドメインの検証が完了しているか確認しておきましょう。

https://[独自ドメイン]でアクセスして画面が表示できればOKです。

まとめ

以上でhttps対応した独自ドメインのWebサイトをS3 + CloudFrontで運用する手順の紹介を終わります。

今回のまとめ
  • 静的ホスティング機能を利用することでS3でWebサイトを公開できる
  • CloudFrontを組み合わせることでサイトのSSL化や高速化を実現できる
  • 独自ドメインとエンドポイントをRoute53を利用して紐づけることで、独自ドメインでWebサイトを運用できる。

この記事がいいなと思いましたらTwitter(@nishina555)のフォローもよろしくお願いします!

AWSオススメ参考書