AWSで独自ドメインのhttpsな静的Webサイトを構築する（ACM+S3＋CloudFront+Route53）

どうも、Tです。

静的なWebサイト(HTML+CSS+JavaScript）を構築する必要があり、AWSで公開することにしたので備忘録です。

結論から申し上げると、非常にめんどうでした。(一回やったら簡単だけど・・・・）

やりたいこと

具体例

具体的にやりたいこととサービス連携をまとめました。

文字にすると下記の2つだけです。

静的Webサイトを公開する
Webサイトはhttpsで接続できる

使うサービス

今回使うサービスです。全部AWSのサービスです。

Amazon Simple Storage Service（以下、Amazon S3）
Amazon Route 53（以下、Route53）
Amazon CloudFront（以下、CloudFront）
AWS Certificate Manager（以下、ACM）

それぞれ必要な理由も書いておきます。

Amazon S3

AWSのストレージサービスです。コンテンツ（HTMLファイルなど）を保存するために必要です。

Route 53

AWSのDNSサービスです。外部のDNSでも大丈夫なのですが、AWSで固めた方が簡単なので使います。

CloudFront

AWSのCDNサービスです。S3単体では、https化（SSL対応）ができないので、使います。

ACM

AWSのSSL/TLS証明書のプロビジョニング・管理サービスです。使わない理由がないほど便利なので使います。

レンタルサーバーじゃだめなの？

レンタルサーバーではなく、なぜAWSを使うのか？の理由です。

レンタルサーバーのOSレベルのお守りが面倒
小規模ならレンタルサーバーより格安（のはず・・・）
HTML、CSS,Javascriptしか使わないからレンタルサーバーいらない（PHPとか使わない）
AWS使ってみたい

一番の理由は、最後のAWS使ってみたい（もとい勉強しておきたい）です。

各種料金

細かい算出は実際に運用してみてからですが、料金のポイントをまとめてみました。

最初のサインアップからの12か月無料枠は無視しています。特記がない場合、東京リージョンで記載しています。

円で記載している部分は、1USD=100円で計算しています。

Amazon S3

料金のポイントは3つです。

ストレージ容量
リクエストとデータの取り出し
データ転送(S3からの送信のみ・S3への送信は無料）

もう1点マネジメントとレプリケーションもありますが、マネジメント(インベントリ、分析、オブジェクトのタグ付け)やれレプリケーションは使わないので割愛します。

ストレージ容量

利用しているストレージ容量に対しての課金です。

S3標準を利用します。静的サイトなので1GBもあれば十分なので、「0.025USD（約2.5円）」が必要そうです。

リクエスト数

S3に対して発生したGET/PUT/POST/LIST/COPYリクエスト数により課金量が変わります。

今回は、静的サイトのみなのでGETの「1000リクエストあたり0.00037USD（約0.037円）」が必要です。

が、今回はGETリクエストがかかるのはCloudFrontに対してなので、S3のリクエスト数に対しての課金は「0.00USD/GB（0円）」です。

データ転送(S3からの送信のみ・S3への送信は無料）

S3からデータが転送されたデータ量に対しての課金です。

S3へのアップロード（インターネットから Amazon S3 へのデータ転送受信）は、「0.00USD/GB（0円）」です。

また、静的サイトの場合、「Amazon S3 からインターネットへのデータ転送」がかかりますが、今回の構成ではデータ転送を行うのはCloudFrontなのでここも課金対象にはなりません。

そして、S3からCloudFrontへのデータ転送は、「0.00USD/GB（0円）」です。

よって、今回の構成ではこちらも課金はありません。

Amazon Route 53

料金のポイントは3つです。

ホストゾーンの管理
DNSクエリへの応答
ドメイン名の管理

そのほか、トラフィックフロー・ヘルスチェック・Route 53 リゾルバーが課金対象となりますが、今回は利用していないため割愛します。

ホストゾーンの管理

ホストゾーン(ドメイン)に対しての課金です。

今回は、ドメイン1つなので、「0.50USD（約50円）」必要です。

DNSクエリへの応答

DNSクエリの応答数に対しての課金です。

大きく3種類ありますが、今回は一般的な標準クエリを利用します。算出が難しいところですが、小さいサイトのため100万クエリもあれば十分かと考えているので「0.40USD（約40円）」必要です。

ドメイン名の管理（年間）

ドメインの取得に関しての課金です。年1回の支払いです。

今回は、.comドメインを取得したいので「12.00USD（約1200円）」必要です。

他のドメイン料に関しては、下記に公開されています。

https://d32ze2gidvkk54.cloudfront.net/Amazon_Route_53_Domain_Registration_Pricing_20140731.pdf

Amazon CloudFront

料金のポイントは3つです。

データ転送アウト (インターネット/オリジン)
HTTP/HTTPS リクエスト
無効リクエスト

そのほか、「フィールドレベル暗号化リクエスト」「専用 IP カスタム SSL 証明書」が課金対象となりますが、今回の構成では使用しないため割愛します。

データ転送アウト (インターネット/オリジン)

CloudFront→インターネットへのデータ転送課金です。

「0.114 USD/GB（約11.4円）」必要になります。

2MB/ページ×1万アクセス=20GBとすると、20GB×11.4円で228円必要になります。

CloudFront→リージョン内オリジンへのデータ転送課金です。

今回の構成では発生しないので、0円です。

HTTP/HTTPS リクエスト

Webのリクエストに対しての課金です。

HTTPSリクエスト1万件あたり、「0.0120 USD（約1.2円）」必要です。

リクエストなので大きくなりそうですが、10万クリエストとしても12円です。

無効リクエスト

無効リクエスト（キャッシュの手動更新）の課金です。

CloudFrontのキャッシュを削除した場合にかかるもので、1000パスまでは無料で利用できます。基本的にはキャッシュ削除しない、しても1000個ものファイル更新はない想定なので0円と考えます。

AWS Certificate Manager

料金のポイントは2つです。

パブリック証明書を利用する
プライベート証明書を利用する

今回は、パブリック証明書のみを利用するためプライベート証明書の説明は割愛します。

パブリックSSL/TSL証明書

パブリック証明書は無料のため、0円です。

AWS Certificate Manager注意事項

ACM証明書は、下記5つのAWSサービスで利用可能です。EC2など他のAWSサービスで証明書を利用する場合は、下記のサービスと併用する必要があるので注意しましょう。

Elastic Load Balancing
Amazon CloudFront
Amazon API Gateway
AWS Elastic Beanstalk
AWS CloudFormation

料金まとめ

今回必要となる月額費用は、下記のように概算しました。

Amazon S3

ストレージ容量：0.025USD（約2.5円）　※容量1GB
リクエストとデータの取り出し：0USD(0円)　※CloudFrontでクエリ処理を行うため
データ転送：0USD(0円)　※CloudFrontへのデータ転送のみのため

合計：0.025USD（約2.5円）

Amazon Route 53

ホストゾーンの管理：0.50USD（約50円）　※ドメイン1つ分
DNSクエリへの応答：0.40USD（約40円）　※100万クエリ
ドメイン名の管理：12.00USD（約1200円）/ 12 = 1.00USD（約100円） ※年間を月額換算

合計：1.9USD(約190円)

Amazon CloudFront

データ転送アウト：2.28USD（約228円）　※2MB/ページ×1万アクセス
HTTP/HTTPS リクエスト：0.12 USD（約12円）　※10万リクエスト
無効リクエスト：0USD(0円)

合計：2.4USD(約240円)

AWS Certificate Manager

パブリック証明書:0USD(0円)

合計：0USD（0円）

合計額

Amazon S3：0.025USD（約2.5円）
Amazon Route 53：1.9USD(約190円)
Amazon CloudFront：2.4USD(約240円)
AWS Certificate Manager：0USD（0円）

合計：4.325‬USD（約440円）

安いけど、クエリが増えると高くなるという感じですね。それだけアクセスあるとウハウハになりますが。

事前準備

下記は事前に準備済みの前提で進めます。

AWSアカウント、IAMユーザーの設定
Route 53で独自ドメインの取得
公開用のコンテンツファイル（HTML・CSSファイルなど）の作成

方法

設定の流れ

下記の流れで進めていきます。

AWS Certificate Managerで証明書を取得
AWS S3でバケットの作成
AWS S3の静的Webページのホスティング設定
AWS S3バケットへのコンテンツのアップロード
AWS CloudFrontと証明書の紐づけ
AWS CloudFrontへのアクセス制御
Amazon Route53のDNSルーティング設定
動作確認

AWS Certificate Managerの設定

パブリック証明書の取得

ドメインは取得済みなので、ACMでパブリック証明書を取得します。

ACMをCloudFrontで利用する場合は、米国東部（バージニア北部）us-east-1で発行された証明書のみ利用することが可能です。

ACMを開いて、「証明書のプロビジョニング」の「今すぐ始める」をクリックします。

「パブリック証明書のリクエスト」を選択して、「証明書のリクエスト」をクリックします。

「ドメイン名」に取得した独自ドメイン名を入力して、「次へ」をクリックします。

検証方法に「DNSの検証」を選択して、「次へ」をクリックします。

証明書にタグをつけて管理しやすくできるようです。1つしか使わないので何もせってせず「確認」をクリックします。

※タグの編集は、後でも可能です。

内容を確認して「確定とリクエスト」をクリックします。

「続行」をクリックします。

証明書の発行にDNSへCNAMEレコードの登録が必要です。ドメインを開くと「Route53でのレコードの作成」をクリックするとRoute53へ自動的にCNAMEレコードを登録してくれます。

ここで登録されたCNAMEレコードは、今後ACMが証明書の自動更新に使います。設定が終わったあとも削除せずに残しておきましょう。

確認画面が表示されるので、「作成」をクリックします。

下記のメッセージが表示されます。数分程度で反映されました。

成功
DNS レコードは Route 53 ホストゾーンに書き込まれました。変更が反映され、AWS がドメインを検証して証明書を発行するまでに最大で 30 分以上かかる場合があります。

状況が「発行済み」であることを確認します。

以上で、ACMの設定は終わりです。

Amazon S3の設定

バケットの作成

S3を開いて「バケットを作成する」をクリックします。

パケット名とリージョンを選択し次へをクリックします。

オプションの設定です。デフォルトのまま次へをクリックいします。

アクセス許可の設定です。デフォルトのまま次へをクリックします。

必要なアクセス設定は、後述のCloud Frontの設定で自動的に入るようになります。

確認画面です。設定内容を確認して「バケットを作成」をクリックします。

バケットが作成されたことを確認します。

静的Webページのホスティング

作成したバケットをWebサイトとして利用できるようにします。

作成したバケットをクリックします。

プロパティタブの「Static Website hosting」をクリックします。

「このパケットを使用してウェブサイトをホストする」を有効にします。サイトのルートパスに配置するインデックスドキュメントのファイル名を入力し、保存をクリックします。

Static Website hostingのステータスが「パケットホスティング」になったことを確認します。

コンテンツのアップロード

コンテンツとなるHTMLファイルをバケットにアップロードします。

先ほどインデックスドキュメントで指定したindex.htmlをアップロードしていきます。

概要タブのアップロードをクリックし、アップロードするindex.htmlファイルを選択します。

ファイル名を確認し次へをクリックします。

アクセス権を設定します。デフォルトのまま次へをクリックします。

S3のどのサービスに配置するか選択します。スタンダードを選択し次へをクリックします。

内容を確認して、アップロードをクリックします。

アップロードが完了すると概要タブにファイル名が表示されます。

Amazon CloudFrontの設定

S3バケットと証明書を紐づけ

CloudFrontを開き、「Create Distribution」をクリックします。

WebのGet Startedをクリックします。

Origin SetingsのOrigin Domain Nameに作成したS3バケット名を入力します。※マウスカーソルを移動するとリストが表示されるのでその中から選択します。

Default Cache Behaivor SettingsのViewer Protocol PolicyにRedirect HTTP to HTTPSを選択します。

Distribution Settingsの下記を設定します。

Alternate Domain Names:独自ドメイン名

SSL Certificate:Custom SSL Certificateで独自ドメイン名を選択

Default Root Objectにルートドキュメントのファイル名(ここではindex.html)を入力し、Create Distributionをクリックします。

設定したDomain NameのStatusがIn Progresになり、AWSの中で設定が進みます。

5分～10分ほどで、In ProgresがDeployedになり設定が完了します。

アクセス制限

S3バケットに対して、CloudFrontディストリビューションからのアクセスのみ許可する設定をします。

Origins and Origin Groupstabタブで設定したS3バケットにチェックを付けて、Editをクリックします。

Origin Settingsの下記を設定し「Yes,Edit」をクリックします。

Restrict Bucket Access:Yes　

※ユーザーがアクセスしたときにCloudFront URLを使用してS3バケットにアクセスすることを指定しています。

Origin Access Identity:Create a New Identity

※ユーザーがCloudFront URLでアクセスするためにオリジン(S3)にCloudFrontユーザー（オリジンアクセスID）を割り当てます。

Grant Read Permissions on Bucket:Yes, Update Bucket Policy

※CloudFrontがAmazon S3バケット内のオブジェクトにアクセスできるように、CloudFrontがディストリビューションの作成時にオリジンアクセスIDに読み取り権限を自動的に付与します。

アクセス制限確認（S3バケットポリシー）

S3にアクセス制限の設定が入っていることを確認します。

S3に開いて、対象のSバケット→アクセス制限タブ→バケットポリシーをクリックします。下記のようにポリシーが設定されています。

このポリシーはJSON形式で記述されています。以下のような意味になっています。

“Version”: ポリシーのバージョンです。2012-10-17と2008-10-17があり機能が異なります。

“Id”: ポリシーの識別子です。任意の識別子名を設定できます。

“Statement”:主要の必須エレメントです。Statementエレメントの中に単一もしくは複数のStatementを記述できます。

“Sid”: ステートメントIDで任意の識別子です。Statement配列内の各Statementに割り当てることができます。

“Effect”: 必須エレメントです。Resourceへ許可(Allow)・拒否(Deny)を指定します。

“Principal”: Resourceへのアクセスを許可または拒否するPrincipal（アカウントまたはユーザー）を設定します。

“Action”: Resourceに対しるオペレーションの指定です。

“Resource”: 対象のリソースの指定です。Amazon リソースネーム (ARN)で指定します。

詳しくはこちらを参照してください。

Amazon Route 53の設定

DNSルーティング設定（Aレコード登録）

Route53の名前解決の設定を行います。

Route53を開き、ホストゾーンから取得した独自ドメイン名を選択します。

「レコードセットの作成」をクリックします。

下記を設定し、作成をクリックします。

名前：空白

タイプ：A-IPv4アドレス

エイリアス：はい

エイリアス先：CloudFrontディストリビューションで設定したCNAMEの値

ルーティングポリシー：シンプル

レコードが追加されたことを確認します。

動作確認

事前認識

動作では、下記の動作になります。

独自ドメインでアクセス：httpsで接続できる
S3バケットのエンドポイント名でアクセス：403で接続できない

S3バケットのエンドポイント名の確認

バケットポリシー設定が誤っていた場合、CloudFront経由ではなく、S3のエンドポイントのURLを使ってアクセスが可能になってしまいます。

S3->バケット選択->プロパティタブ->Static website hostingからエンドポイント名を確認できます。

独自ドメイン名への接続確認

独自ドメインで接続するとindex.htmlに記載した「Hellow world!!! 」が表示されました。

証明書を確認するとAmazonから発行されていることが確認できます。

S3バケット名への接続確認

S3のエンドポイント名でアクセスすると403(アクセス権エラー)で表示されないため、バケットポリシーが有効であることがわかります。

参考

Amazon S3 & Route 53

Amazon S3による静的Webサイトホスティング from Yasuhiro Horiuchi

Amazon CloudFront

AWS Certificate Manager

まとめ

所感ですが、すげぇめんどくせぇ！

一度作って、AWSのサービス連携や仕組みを覚えれば次回からは割と簡単にできると思いますが、やはり一発目は各種の設定が正しいのか？まずい設定がないか？などを確認しながら進めるとかなりの労力でした。

また、AWSの運用のノウハウも必要になってくるので、この記事以上に色々調べております。AWSにこだわりがなく・小規模サイトであればレンタルサーバーを借りた方が一般的には良いかなと考えています。

Hello worldの綴り間違えてた・・・恥ずかしい・・・。