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

どうも、Tです。

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

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

スポンサーリンク
アドセンス1

やりたいこと

具体例

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

文字にすると下記の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つです。

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

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

料金 - Amazon S3 |AWS
Amazon S3 の料金は、実際に使用した分だけです。無料利用枠を使用することで、無料で開始いただけます。リージョンごとのストレージ料金やストレージマネジメント料金、リクエスト、データ転送、レプリケーション等の料金についてご覧いただけます。

ストレージ容量

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

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 リゾルバーが課金対象となりますが、今回は利用していないため割愛します。

料金 - Amazon Route 53 | AWS

ホストゾーンの管理

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

今回は、ドメイン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 証明書」が課金対象となりますが、今回の構成では使用しないため割愛します。

料金 - Amazon CloudFront | AWS
AWS 無料枠を含む、Amazon CloudFront のグローバルコンテンツ配信ネットワーク (CDN) の料金の詳細。顧客へのコンテンツ配信に使用されたデータ転送とリクエストに対してのみ支払いが発生します。CloudFront に前払い料金や固定基本料金、長期使用契約、動的コンテンツの割増料金はありません。また、...

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

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 | AWS
AWS Certificate Manager の料金 – アマゾン ウェブ サービス (AWS)

AWS Certificate Manager注意事項

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

  1. Elastic Load Balancing
  2. Amazon CloudFront
  3. Amazon API Gateway
  4. AWS Elastic Beanstalk
  5. AWS CloudFormation
よくある質問 - AWS Certificate Manager | AWS
このページでは、AWS Certificate Manger をご利用いただく際に役立つよくある質問についてご紹介します。

料金まとめ

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

Amazon S3

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

合計:0.025USD(約2.5円)

Amazon Route 53

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

合計:1.9USD(190円)

Amazon CloudFront

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

合計:2.4USD(240円)

AWS Certificate Manager

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

合計:0USD(0円)

合計額

  1. Amazon S3:0.025USD(約2.5円)
  2. Amazon Route 531.9USD(約190円)
  3. Amazon CloudFront2.4USD(240円)
  4. AWS Certificate Manager0USD(0円)

合計:4.325‬USD(約440円)

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

事前準備

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

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

方法

設定の流れ

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

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

AWS Certificate Managerの設定

パブリック証明書の取得

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

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

CloudFront のカスタム SSL 証明書に関する問題のトラブルシューティング

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)で指定します。

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

ポリシーとアクセス許可 - AWS Identity and Access Management
AWS ポリシーとその仕組みについて説明します。
バケットポリシーとユーザーポリシーの使用 - Amazon Simple Storage Service
IAM ポリシーを使用して、AWS アカウント内に複数のユーザーを作成し、そのユーザーにセキュリティ認証情報を割り当て、アクセス許可を管理します。

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

AWS初心者の私がAmazon S3のStatic website hostingを利用して静的Webページをホスティングしてみました | ニフティものづくりブログ
はじめに こんにちは。Webサービス開発グループの2019年度新入社員の熊谷です。 今回は、AWSのサービスのひとつであるAmazon S3を利用して、簡単な静的Webページを作成しました。サーバーレスで、とても間単にWebページを公開することができたので、その手順について書きたいと思います。 Amazon S3とは ...
【Amazon S3】サーバーレスで独自ドメインの静的サイトを公開しよう① | そるでぶろぐ
各企業などのサービス紹介には静的サイトは欠かせないでしょう。ただし、肝心のコンテンツではなくサーバーなどの環境準備に時間がかかることが多いと思います。今回はAWSサービスを使い、低...
【AWS Certificate Manager+Amazon CloudFront】サーバーレスで独自ドメインの静的サイトを公開しよう② HTTPS対応編 | そるでぶろぐ
各企業などのサービス紹介で静的サイトを公開するときには、セキュリティ対策も気にすることが多いでしょう。今回はAWSサービスを使い、静的サイトのHTTPS化とコンテンツへのアクセス制...

Amazon CloudFront

Amazon CloudFrontとは
「**Amazon CloudFront**」はAWS上で提供されているコンテンツ配信ネットワーク(CDN)サービスです。S3やEC2から配信するコンテンツをキャッシュし、訪問者へ高速配信します。 ## Amazon CloudFrontの特徴 Amazon CloudFrontには以下のような特徴があります。 ###...
いますぐ使う CloudFront - Qiita
CloudFrontとは 台数不明で性能不明ですが、グローバルに配置された、キャッシュサーバー。 効果 CloudFrontをリバースプロキシキャッシュとして立ててみました。お問い合わせページなど動的ページを除いて、ほぼ全...
AWSでCloudFrontを導入する際に注意する点
AWSでCloudFrontを導入する際にデフォルトの設定そのままだと注意が必要な点がありますので、そちらについて説明します。
Amazon CloudFrontとは
「**Amazon CloudFront**」はAWS上で提供されているコンテンツ配信ネットワーク(CDN)サービスです。S3やEC2から配信するコンテンツをキャッシュし、訪問者へ高速配信します。 ## Amazon CloudFrontの特徴 Amazon CloudFrontには以下のような特徴があります。 ###...

AWS Certificate Manager

AWS Certificate Manager (ACM) を利用したSSLサーバ証明書の運用・管理 - Qiita
1. 概要 SSL証明書のインストール作業や更新作業は地味だけど、失敗や更新を忘れると大障害になる。私も過去に2、3回くらいSSL証明書作業で失敗して大反省した経験がある。 昔のSSL証明書作業のことを思い出して書いてもいまさ...
AWS Certificate Managerを使ってみた!
こんにちは、開発部の森です。最近、AWS Certificate Manager(以下、ACMとする)を使用する機会があったのでその機能について紹介したいと思います。※そんなの知っているよーって方も是非見て頂ければと思います。AWS Certificate Managerとは?A...

まとめ

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

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

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

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

スポンサーリンク
アドセンス1
アドセンス1
ブログランキング・にほんブログ村へ

シェアする

フォローする