皆様こんにちは、ネットワーク事業部の生方と申します。

今回は、AWSのサービスに関するお話となります。
通常Webサイトを公開する場合には、Webサーバを構築してコンテンツデータを載せるという形になります。AWSでサーバ構築する際はEC2やLightsailで「Apache」や「Nginx」を利用するのが一般的ですが、それ以外の方法でもWebサイトを公開することが可能です。
そのひとつの方法として、ストレージサービスである「Amazon S3」やCDNの「Amazon CloudFront」を利用した静的Webサイトの公開手順をご紹介したいと思います。

S3・CloudFrontによる静的ウェブサイトホスティングの概要

今回の構成では、Webサイトのページや画像などのコンテンツファイルはS3へアップロードし、その前段にCloudFrontを挟みます。CloudFrontのキャッシュサーバとしての機能により、ユーザへレスポンスを返す仕組みです。
加えて、httpsによる通信を可能にするために、ACM（AWS Certificate Manager）で発行したSSL証明書をCloudFrontに適用します。

静的ウェブサイトホスティングのメリット

サーバレスでメンテナンス不要

EC2やLightSailといったサービスでWebサイトを公開する場合、最初のサーバ環境構築に時間がかかったり、不定期に発生するAWS側のメンテナンスによるダウンタイムが発生したりなど管理の手間が発生します。
ですが、S3とCloudFrontによるホスティングの場合はサーバレスでサイト公開が可能なため、このような面倒な環境構築やメンテナンスの手間無く利用することが可能です。

コスト効率に優れる

EC2やLightSailの場合は、サーバ自体が稼働している時間によって課金される仕様となっています。アクセスの多寡にかかわらず、サーバが稼働している限りは料金が発生してしまいます。
一方でS3とCloudFrontによるホスティングの場合、主に課金対象となるのはS3のデータ保存量とCloudFrontのデータ転送量となります。
おおよそですが、S3の利用料は0.025ドル/GB、CloudFrontのデータ転送料金は0.114ドル/GBとなっていますので、よほど大規模なサイトでない限りは安価にサイト公開できるのではないでしょうか。※1
また今回はhttpsによるサイト公開もしますが、有料のSSL証明書を使わずにACM（AWS Certificate Manager）を使用しますので、これもコストを押さえられる要因となります。

※1　2024年9月現在、アジアパシフィック（東京）リージョン基準の価格
Amazon S3 の料金、Amazon CloudFront の料金

パフォーマンス、セキュリティの向上

S3は年間99.99%とされる高い可用性がメリットとされるサービスとなっており、さらにCloudFrontの機能によって複数のエッジサーバにデータをキャッシュすることで安定したコンテンツの配信が可能になります。
またCloudFrontにはオプションとしてWAFの機能も備えられており、セキュリティ面でも優れた環境を構築することが可能です。

静的ウェブサイトホスティングの手順

S3バケットを作成する

コンテンツデータを保存するためのS3バケットを準備します。

Amazon S3 > バケット > バケットを作成

• バケットタイプ：汎用
• バケット名：［任意のバケット名］
• オブジェクト所有者：ACL 無効 (推奨)
• パブリックアクセスをすべてブロック：解除

アクセス許可のパケットポリシーを編集します。

［バケット名］ > アクセス許可 > バケットポリシー > 編集

以下のように記述します。

S3を使用してWebサイトを公開する場合の機能として「静的ウェブサイトホスティング」という機能が用意されています。この機能を有効化して、Webサイトとしての設定をします。
トップページとして表示したいページをインデックスドキュメント、エラーの場合に表示したいページをエラードキュメントとして指定します。

［バケット名］ > プロパティ > 静的ウェブサイトホスティング > 編集

• 静的ウェブサイトホスティング：有効にする
• ホスティングタイプ：静的ウェブサイトをホストする
• インデックスドキュメント：index.html
• エラードキュメント – オプション：error.html

最後に、Webサイトとして必要なHTMLファイルや画像などを対象のバケットへアップロードすれば、S3バケットの準備は完了です。
バケット直下がドキュメントルートの扱いとなりますので、バケット内にフォルダを作成して階層化するなども可能です。

［バケット名］ > オブジェクト > アップロード

ACMでSSL証明書を発行する

ここからは、HTTPSが利用できるようにSSL証明書を適用します。
有料の証明書をインポートして適用することもできますが、ACMを使用すれば無料で証明書が発行できます。

！！！注意！！！
今回はこの後CloudFrontを使用することになりますが、2024年現在、CloudFrontで使用可能な証明書は米国東部 (バージニア北部) リージョン (us-east-1) に登録されたものだけです。それ以外のリージョンで発行・登録しないように注意しましょう。

（参照）https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/acm-regions.html
AWS Certificate Manager から証明書を関連付けます。証明書は、米国東部 (バージニア北部) リージョン (us-east-1) にある必要があります。

AWS Certificate Manager (ACM) > リージョンを「バージニア北部(us-east-1)」に切り替える > 証明書をリクエスト

• 証明書タイプ：パブリック証明書をリクエスト
• 完全修飾ドメイン名：［公開するドメイン名］
• 検証方法：DNS 検証 – 推奨
• キーアルゴリズム：RSA 2048

登録後の画面で、CNAME名とCNAMEレコードが発行されます。この値を公開するドメインのDNSに設定することで認証が完了します。

Route53を利用している場合には自動的に反映も可能ですが、外部のDNSを利用している場合には手動でCNAMEレコードを追加する必要があります。
DNSを更新してしばらくして、先程リクエストした証明書のステータスが「発行済み」になれば完了です。

CloudFrontを設定する

S3へのアクセスを制御するためのリバースプロキシとして、CloudFrontと連携します。
また、先程発行したACMのSSL証明書を適用して、HTTPSでサイト表示できるようにします。今回は最低限の環境のため使用していませんが、セキュリティ対策の為WAFを利用することも可能です。

CloudFront > ディストリビューション > ディストリビューションを作成

• Origin domain　：［S3バケットのエンドポイント］
• 名前　：［S3バケットのエンドポイント］
• ビューワープロトコルポリシー：Redirect HTTP to HTTPS
• ウェブアプリケーションファイアウォール (WAF)：セキュリティ保護を有効にしないでください
• 料金クラス：北米、欧州、アジア、中東、アフリカを使用
• 代替ドメイン名 (CNAME) – オプション：［公開するドメイン名］
• Custom SSL certificate – optional：［ACMで発行したSSL証明書名］

登録完了後に割り当てられるディストリビューションドメイン名を確認します。

公開するドメイン名に対してCNAMEでディストリビューションドメイン名を適用します。これにより、公開する独自ドメイン名でアクセスするとCloudFrontを経由してアクセスすることになり、S3の静的ウェブサイトホスティングで指定したindex.htmlが表示できます。

これですべての設定が完了となります。ブラウザから公開ドメイン名として指定したURLへアクセスして、アップロードしたindex.htmlのページが表示されれば正常に動作しています。
httpでアクセスしても、httpsへリダイレクトされます。

https://［公開するドメイン名］

おわりに

S3・CloudFrontによる静的ウェブサイトホスティングについてご紹介いたしましたが、メンテナンスフリーでコストパフォーマンスも高い環境でWebサイトを公開できるのは素晴らしいと感じます。ただし、静的という名前の通りPHP等の動的なコンテンツは利用することができませんので、ページ数も限られたシンプルなWebサイトやランディングページなどの公開に向いていると思います。
簡単な設定でhttpsやWAFなどが利用できますのでセキュリティ面でも十分な機能が提供されています。EC2やLightSailだけでなく目的に合わせてこのような利用方法も検討してみてはいかがでしょうか。

この記事を読んだ方はこちらも読まれています

【小ネタ】AWS AmazonSSLの取得を楽にしよう 【Amazon RDS】プライマリ／リードレプリカのアップグレードは順序が大事 クラウドセキュリティの守護神 Amazon GuardDuty について Amazon Linux 2023 を技術者が触ってみた