どうも、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.325USD(約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レコードを登録してくれます。
確認画面が表示されるので、「作成」をクリックします。
成功DNS レコードは Route 53 ホストゾーンに書き込まれました。変更が反映され、AWS がドメインを検証して証明書を発行するまでに最大で 30 分以上かかる場合があります。
状況が「発行済み」であることを確認します。
以上で、ACMの設定は終わりです。
Amazon S3の設定
バケットの作成
S3を開いて「バケットを作成する」をクリックします。
パケット名とリージョンを選択し次へをクリックします。
オプションの設定です。デフォルトのまま次へをクリックいします。
アクセス許可の設定です。デフォルトのまま次へをクリックします。
確認画面です。設定内容を確認して「バケットを作成」をクリックします。
バケットが作成されたことを確認します。
静的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 CloudFront
AWS Certificate Manager
まとめ
所感ですが、すげぇめんどくせぇ!
一度作って、AWSのサービス連携や仕組みを覚えれば次回からは割と簡単にできると思いますが、やはり一発目は各種の設定が正しいのか?まずい設定がないか?などを確認しながら進めるとかなりの労力でした。
また、AWSの運用のノウハウも必要になってくるので、この記事以上に色々調べております。AWSにこだわりがなく・小規模サイトであればレンタルサーバーを借りた方が一般的には良いかなと考えています。
Hello worldの綴り間違えてた・・・恥ずかしい・・・。