【AWS】CloudFrontとS3を連携させてWebアプリを公開する

当記事では、AWSのCoudFrontとS3を使って、WebアプリケーションをHTTPSで公開する手順を解説します。

こんな悩みをお持ちの方にオススメ！

AWSでWebアプリをHTTPSで公開したい
CloudFrontでWebアプリを公開する方法が知りたい
S3とCloudFrontを連携する方法が知りたい
AWSでWebアプリを公開する手順が知りたい

AWSなどのサーバーレスサービスは、サーバーやミドルウェアのインストールが不要で、すぐにアプリケーションを公開できて便利ですよね。

一方で、サーバーレスサービスでのWebアプリの構築経験がないと、どのような手順で開発したら良いかわかりません。

今回紹介するWebアプリケーションの公開もその一つで、HTTPSでアプリを公開するにはサービスを組み合わせる必要があります。

Webアプリケーションでは通信内容の漏洩防止のため、HTTPSによる通信の暗号化が必須です。

ストレージサービスのS3だけでもWebアプリケーションを公開できますが、HTTP通信のみでの公開となり通信が漏洩する可能性があります。

HTTPS通信を利用するにはCloudFrontを利用することが一般的ですが、サービスを組み合わせるため手順が複雑になりがちです。

そこでこの記事では、CoudFrontとS3を連携してWebアプリを公開する手順を解説します。

CloufFrontを利用することで、HTTPS通信が可能となりセキュリティが大幅に向上します。

実際の開発に役立つ内容となってますので、ぜひ最後までご覧ください。

S3だけでWebアプリを公開した場合の弱点
1. 問題点１：HTTPS通信ができない
2. 問題点２：ブロックパブリックアクセスを許可しなければならない
CloudFrontと組み合わせることで得られるメリット
CloudFrontの設定方法
まとめ

S3だけでWebアプリを公開した場合の弱点

最初にも紹介しましたが、S3のみでもWebアプリを公開することが可能です。

「静的Webホスティング機能」を利用することでS3のみでWebアプリを公開できます。

しかし、この機能を利用してWebアプリを公開した場合、二つの問題点が存在します。

問題点１：HTTPS通信ができない

通常、Webアプリケーションを利用する際には、ユーザーとの通信内容が傍受されないようにHTTPS通信を行います。

しかし、S3のみでWebアプリケーションを公開するとHTTP通信しか利用できません。通信内容が暗号化されないため、悪意のある第三者によって通信内容が盗み見られる可能性があります。

補足

SAPアプリケーションの場合、S3への通信は初回アクセスでのコンテンツ取得時のみです。

実際の利用者との通信は、HTTPS通信とすればセキュリティ上問題ないとは思いますが、アプリケーションの中でHTTP通信を行うとユーザーに不信感を持たれます。

そのため、初回アクセスも含めた通信のすべてをHTTPS通信することを推奨します。

問題点２：ブロックパブリックアクセスを許可しなければならない

S3でのみで、Webアプリを公開するには「静的Webサイトホスティング機能」を利用します。

S3では、「ブロックパブリックアクセス」は通常「無効」となっています。

「静的Webサイトホスティング機能」を利用するには「ブロックパブリックアクセス」を「有効」にする必要があります。

セキュリティレベルが低下する設定となるため、あまり実施したくありません。

ブロックパブリックアクセスとは、S3上のコンテンツを外部からアクセスを可能とさせる設定です。

S3では、ブロックパブリックアクセスを有効にした場合でも「リソースポリシー」という設定によって、対象の利用者やIPアドレスのみアクセスを許可する設定が可能です。

しかし、設定を誤った場合、許可したい利用者以外からも参照できてしまうリスクがあります。

そのため、できる限りブロックパブリックアクセスの設定を有効にせずにWebアプリを公開すること推奨します。

セキュリティレベルが低下してしまう設定であるため、会社によっては設定ができない場合もあります。

CloudFrontと組み合わせることで得られるメリット

CloudFrontを利用することで、上で紹介した二つの問題が解消され、以下のことが可能になります。

HTTPS通信でのWebアプリへのアクセス

CloudFrontはHTTPS通信をサポートしています。利用者はCloudFrontが発行したURLにアクセスすることでHTTPS通信でWebアプリを利用できます。

不必要なファイルへのアクセス防止

CloudFrontを利用することで、S3はCloudFrontからのアクセスのみ許可され、利用者がS3のコンテンツへ直接アクセスできなくなります。

ユーザーがWebアプリを利用する際は、CloudFrontがユーザーとS3のコンテンツの橋渡しを行います。

ユーザーからの不必要なコンテンツへのアクセスを防止できることでセキュリティが向上します。

ブロックパブリックアクセスを有効のままWebアプリケーションの公開

S３の対象バケットはCloudFrontからのアクセスしか許可しなくなります。

これにより、S3側のブロックパブリックアクセスを有効のままでWebアプリを公開できます。

この設定により、S３のバケットをグローバルに公開せずにアプリケーションを公開できます。

ブロックパブリックアクセスを無効にする必要はありませんが、S3のバケットポリシーにはCloudFrontからの通信を許可する設定が必要です。

AWS公式でも、「HTTPS通信でWebアプリケーションを公開する場合は、CloudFrontを使用してください」との記述があります。

CloudFrontの設定方法

ここからは、CloudFrontとS3を連携する設定を解説します。

利用にあたっての料金

CloudFrontには無期限の無料枠があります。通常利用するくらいでは充分な量で無料で試せます。

AWS クラウド無料利用枠 | AWS (amazon.com)

公式ドキュメントの内容

AWSのS3のドキュメントには以下の記載があります。

簡単に説明すると「HTTPSを使用する場合は、CloudFrontを利用しなさい」という内容です。CloudFrontはCDNで利用するサービスだと思ってましたが、ウェブサイトを公開するためにも利用されるサービスらしいです。

詳細はAWS公式サイトの以下を参照ください。

Amazon S3 を使用して静的ウェブサイトをホスティングする – Amazon Simple Storage Service

CloudFrontとS3の連携設定方法

CloudFrontとs3を連携する設定を行っていきます。

検証用のS3バケットの作成

CloudFrontと連携させるS３のバケットを作成しておきます。作成するバケットは、すべてデフォルト値で作成します。

ポイント；静的ウェブサイトホスティングを有効にしない

S3でWebアプリケーションを公開する際に利用した「静的Webサイトホスティング」は有効にしません。CloudFrontと連携してWebアプリを公開する場合は有効にしないので間違えないようにしてください。

バケット作成後、後ほどの動作確認用にindex.htmlを配置しておきます。

index.htmlの内容は、なんでもOKです。

CloudFrontの作成

CloudFrontのサービスに移動して、「ディストリビューションを作成」をクリックします。

オリジンドメインに先ほど作成したS3のバケットを選択します。

オリジンアクセスにはOACを選択します。他の設定はすべてデフォルトです。

オリジンアクセスとは

CloudFrontがS3にアクセスする種類です。

OACの他にOAIというアクセス方法がありますが、OAIはレガシーな技術であるため、現在はOACを利用するのがベストプラクティスらしいです。OACを利用することでS3オリジンへのアクセスをCloudFrontからのみに制限ができます。

プロトコルはHTTPのみしか選択できないため、そのまま作成します。

このプロトコルは、CloudFrontからS3へアクセスする際のプロトコルです。

利用者がCloudFrontを利用する際にはHTTPSでアクセスしますので、混乱しないようにご注意ください。

オリジンパスや名前などもそのままです。試行回数やタイムアウトの設定もできますが、これもデフォルトで作成します。

キャッシュや通信方式も設定できますが、今回は作業を単純にするため、必要箇所以外はデフォルトのまま進めます。

関数の関連付けも特に設定しません。

WAFの設定もしません。

WAFの利用には料金がかかりますが、接続元のIPアドレスを制限したい場合は利用が必須です。

以下の項目も、デフォルト値。

以上で作成完了です。

作成後、「S3のバケットポリシーを編集が必要」というメッセージが表示されます。

CloudFrontからアクセスできるようにS3のバケットポリシーを編集します。S3のバケットの設定画面で、バケットポリシーを編集してください。

バケットポリシーはこちら。CloudFrontからのみアクセスを許可するポリシーとなります。

{
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::test-cloud-front-app/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::578278346296:distribution/[各自のcloudFrontが設定される]"
                    }
                }
            }
        ]
      }