初めに

この記事では、AWSのAmazon S3とCloudFrontのオリジンアクセスコントロール (OAC) を活用して、HTTPS通信でセキュリティを強化しつつ静的ウェブサイトを公開する方法を説明します。

S3で静的ファイルをホスティングする際のリスク

Amazon S3で静的ホスティングする際によくある構成として、S3バケットのブロックパブリックアクセス設定を無効にしてコンテンツにパブリックアクセスさせるというのがあると思います。

しかし、パブリックアクセスの許可にはいくつかリスクがあります。
主には以下です⁽¹⁾
データ漏洩のリスク:
パブリックアクセスが許可されているバケットやオブジェクトは、インターネット上の誰でもアクセス可能になるため、機密情報が漏洩するリスクが高まります。

不正アクセスのリスク:
パブリックアクセスを許可することで、不正アクセスや悪意のある攻撃のターゲットとなりやすくなります。

対策

上記の対策としてはAmazon S3バケットをオリジンとして使用し、CloudFrontを介してコンテンツを配信することができます。セキュリティを確保するために、オリジンアクセスコントロール (OAC) を使用して、CloudFrontディストリビューションのみがS3バケットにアクセスできるように設定します⁽²⁾。

この構成の利点は、ブロックパブリックアクセス設定を有効にしたまま配信出来ることと、エンドユーザーのリクエストがHTTPSを使用するように強制出来ることです。

以下今回のソリューションのアーキテクチャ図です。

実装手順

HTMLファイルの準備

まず前提として、今回ホスティングさせる静的ファイルを用意してください。
特にない場合は、以下URLから私のGithubページにあるHTMLファイルをダウンロードできます。
https://github.com/Sorao-high/-Capybara-homepage

S3バケットの設定

1). S3バケットを作成します。AWSマネジメントコンソールにログインし、S3を開きます。
「バケットを作成」を押します。

2). バケットタイプは「汎用」を選択し、バケット名を入力します。あとはデフォルトの値のまま「バケットを作成」を押します。

この時、バケット名はグローバルに一意である必要があります。他のAWSアカウントが既に使用しているバケット名は使用できません。あと大文字も使用できないので気を付けましょう⁽³⁾。バケット名の詳細な命名規則は参考文献を参照ください。

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

1). 作成したバケットの「アップロード」を押します。

2). ホスティングさせるファイルをアップロードします。
私のGithubからダウンロードした方は「AWStest.html」と「AWStest.png」をアップロードしてください。このとき「-Capybara-homepage-main」ファイルや「AWStest」ごとまとめてアップロードすると、後述の作業とパスが変わる可能性があるので、「AWStest.html」と「AWStest.png」をひとつずつアップロードしてください。

CloudFrontの設定

1). CloudFrontを開き、「CloudFront ディストリビューションを作成」を押します。

2). 以下項目を入力し、「ディストリビューションを作成」。
Origin Domain：先ほど作成したS3バケットを選択
名前：オリジンの名前
オリジンアクセス：「Origin access control settings(recommended)」を選択
Origin access control：「Creat new OAC」を押下
ウェブアプリケーションファイアウォール(WAF)：「セキュリティを有効にしないでください」を選択

3). CloudFrontからS3へのアクセスを許可するための作業です。
「ポリシーをコピー」を押し、念のためにメモなどにペーストしておいてください。
「S3バケットの権限に移動してポリシーを更新する」を押してください。S3に遷移します。

4). S3に遷移したら、「アクセス許可」を押します。

5). 下へスクロールしていくとバケットポリシーの項目があるので、「編集」を押します。

6). 赤枠に、先ほどコピーしたポリシーを貼り付けます。

「変更の保存」を押します。

7). CloudFrontページに戻り、作成したディストリビューションを選択し詳細設定の「一般」から「最終更新日」に日時が表示されているかと、「ディストリビューションドメイン名」を確認し、作業は完了となります。

ディストリビューションドメイン名はこのあとコンテンツへのアクセスの時に必要になりますのでコピーなどしてください。

結果確認

ちゃんとアクセスできるか確認します。
CloudFrontからコンテンツにアクセスするには、ディストリビューションドメイン名とアクセスさせたいコンテンツファイルのバケット内パスを組み合わせ、ディストリビューションドメイン名/コンテンツパスのようなURLを使用します⁽⁴⁾。

今回手順通り私のHTMLファイルを使用していれば、以下のURLになります。「ディストリビューションドメイン名」を自身のものに書き換えてください。

https://ディストリビューションドメイン名/AWStest.html

問題なければこのような画面が表示されるはずです。

削除手順

このまま運用する予定がない方は必要以上に料金が発生しないようにリソースを削除します。
アーキテクトの構造上まずディストリビューションの削除をして、その次にS3バケットを削除する順番となります。

ディストリビューションの削除

1). CloudFrontを開いて作成したディストリビューションを選択し、「無効」を押します。

2). 「無効」を押します。

3). 最終変更日が「デプロイ」から具体的な日時に更新されるまで待ちます。数分かかる場合があります。

日時が更新されたら「削除」を押します。

4). 「削除」を押し、ディストリビューションが消えてることを確認して完了です。

S3バケットの削除

1). S3を開き作成したバケットを選択し「空にする」を押します。

2). バケット～削除しますか？に「完全に削除」と入力し、「空にする」を押します。

3). もう一度バケットを選択し、「削除」を押します。
バケット～削除しますか？にバケット名を入力し、「バケットを削除」を押します。

4). 削除されたことを確認して削除作業完了です。

終わりに

この記事ではAWSのS3とCloudFrontを使用して、セキュリティを重視しつつ静的ウェブサイトを公開する方法についてご紹介しました。パブリックアクセスのリスクを避けつつ、アクセスコントロールをきちんと設定することで、セキュアなウェブサイト運営をすることができます。

この記事が参考になりましたらぜひ「いいね」「フォロー」など励みになるのでよろしくお願いします！

参考文献