当記事では、SPAのアプリケーションをAWS上で公開する手順を紹介します。
AWSを使ってWebアプリを公開するスタンダードな方法を知りたい！
と、思ってる方におすすめです。
この記事では、以下のことを紹介してます。
- S3とCloudFrontを連携してWebアプリを公開する理由
- CloudFrontでWebアプリを公開する方法
S3でもWebアプリを公開できますが、実際にサイトを公開する時にはCloudFrontと組み合わせる理由があります。
本記事では、その理由とCloudFrontとS3を連携してWebアプリを公開する方法を手順を追って紹介します。
CloudFront経由で公開する理由
SPAアプリケーションを公開するのに、CloudFrontを利用する理由について紹介します。
AWSドキュメントによると、SPAアプリケーションの公開は、S3の機能である「静的Webホスティングとして利用する」が利用できると記載があります。
ただし、この機能を利用してS3のみで公開する場合、以下の二つの問題点が存在します。
問題点１：HTTPS通信ができない
Webアプリケーションを利用する場合は、通信内容が傍受されないようにHTTPS通信を行うことが求められます
しかし、S3のみでWebアプリケーションを公開するとHTTP通信でしかアプリケーションを公開することができません。HTTP通信の場合クライアントの送信情報が悪意のある第三者によって通信が傍受される見えてしまう恐れがあります。
SAPアプリケーションの場合、HTTP通信を行うのは、初回アクセスのコンテンツ取得時のみのため、重要な情報はLambdaなどの呼び出しをHTTPS通信するの場合問題ないとは思います。
しかし、HTTP通信を利用している構成だと、ユーザに不安感を与えてしまうため、WebアプリケーションのすべてをHTTPS通信とした方がよいです。
問題点２：ブロックパブリックアクセスを許可しなければならない
S3の静的Webサイトホスティング機能を利用する場合、S3の該当バケットの設定の一つであるブロックパブリックアクセスを許可する必要があります。
ブロックパブリックアクセスとは、コンテンツを誰でもアクセスさせないようにする設定です。この設定をオフにして、対象の利用者やIPアドレスのみ許可するような制限をかけて公開するもできますが、設定を誤った場合、許可したい利用者以外からも参照できてしまうリスクがあります。
このようなヒューマンエラーによって、セキュリティレベルが意図せず低下してしまう設定項目であるため、セキュリティ要件が厳しい会社によっては、推奨されない設定となっている場合もあります。
CloudFrontと連携して問題を解決する
CloudFrontを利用することで、上で紹介した二つの問題が解消され、以下のことが可能になります。
HTTPS通信でのWebサイトアクセス
CloudFrontはHTTPS通信をサポートしているため、利用者がWebアプリケーションを利用する際、CloudFrontが発行するドメインにアクセスすることでHTTPS通信での利用が可能となります。また、CloudFrontとS3を連携することで利用者は直接S3のWebアプリケーションのコンテンツにアクセスできなくなります。CloudFrontが利用者とS3のコンテンツの橋渡しを行い、S3はCloudFrontからのアクセスのみを許可することになります。
ブロックパブリックアクセスを許可せずWebアプリケーションの公開
S３の対象バケットはCloudFrontからのみしかアクセスを許可しなくなるため、S3側のブロックパブリックアクセスを許可する設定は不要となります。代わりにS3のバケットポリシーにCloudFrontからの通信のみ許可する設定が必要ですが、この設定により、S３のバケットをグローバルに公開せずにアプリケーションを公開できます。
CloudFrontの設定方法
S3とCloudFrontの連携設定について、紹介します。
公式ドキュメントの内容
AWSのS3のドキュメントには以下の記載があります。
簡単に説明すると「HTTPSを使用する場合は、CloudFrontを利用しなさい」という内容です。CloudFrontはCDNで利用するサービスだと思ってましたが、ウェブサイトを公開するためにも利用されるサービスらしいです。
詳細はAWS公式サイトの以下を参照ください。
Amazon S3 を使用して静的ウェブサイトをホスティングする – Amazon Simple Storage Service
CloudFrontとS3の連携設定方法
CloudFrontとs3を連携し、ウェブサイトにアクセスしてみます。
CloudFrontは以下のように無期限の無料枠があるので、よほどヘビーな検証をしなければ無料で試せます。
AWS クラウド無料利用枠 | AWS (amazon.com)
設定の流れ
以下のAWS公式ドキュメントの手順に従って設定していきます。
CloudFront を使用して Amazon S3 でホストされた静的ウェブサイトを公開する | AWS re:Post (repost.aws)
内容を抜粋すると以下の流れで設定します。
ポイントとして、ブロックパブリックアクセスをオンのまま、S3上で静的ホスティングでサイトを公開しておく必要があります。CloudFrontの設定方法は以下のようにいくつか存在しており、プロジェクトにあった設定を選択できます。
本記事では、一番上のOACを使ったアクセス制限を試します。
AWSのドキュメント上にも書いてありますが、OAIはレガシーな技術であるため、現在はOACを利用するのがベストプラクティスらしいです。OACを利用することでS3オリジンへのアクセスをCloudFrontからのみに制限ができます。
本記事では検証しませんが、他の設定内容についても簡単に紹介します。
- 一番目の方法は、今回採用した設定です。
- 二番目の方法は、全てのアクセスを許可する設定となります。
- 三番目の方法は、Refer情報の特定の情報で制限する設定です。Refer情報はツールによって偽装できるので注意が必要です。
- 四番目の方法は、IaCでの自動設定です。IaCはあまり詳しくないので、今回は採用しませんでした。
CloudFrontでHTTPSを処理する際に、AWS公式サイトの下記記事を参考にしました。
CloudFront を使用して Amazon S3 バケットの HTTPS リクエストを処理する | AWS re:Post (repost.aws)
検証用のS3バケットを作成する
CloudFrontと連携前に連携先のS３のバケットを作成します。このバケットに今回検証用のファイルをデプロイします。
バケット名を以下のように設定して、他はデフォルト値を設定します。
バケットの作成後、静的Webサイトホスティングを有効にしません。
静的ウェブサイトホスティングの機能を利用する場合は、有効にしますが、CloudFrontの場合は有効にしないので間違えないようにしてください。
アクセスのテスト用にindex.htmlを適当に作成してアップロードします。
CloudFrontを作成する
AWSマネジメントコンソールのCloudFrontのサービスに移動し「ディストリビューションを作成」をクリックします。クリック後以下の画面が表示されます。
オリジンドメインに上で作成したS3のバケットを選択します。オリジンアクセスにはOACを選択します。
プロトコルはHTTPのみしか選択できないため、そのまま作成します。
オリジンパスや名前などもそのままです。試行回数やタイムアウトの設定もできますが、これもデフォルトで作成します。
キャッシュや通信方式など設定できるみたいですが、今回は検証目的のため、複雑な設定はせずにデフォルトのまま進めます。
関数の関連付けも特に設定しません。
WAFの設定もできるみたいですが、WAFを利用すると料金がかかるため今回は設定しません。接続元のIPアドレスを制限したい場合は利用が必須です。
以下の項目も今回の検証には必要がないため、デフォルトのまま進めます。
以上で作成完了です。
下記のように画面上部にS3のバケットポリシーを編集する旨のメッセージが表示されます。CloudFrontからアクセスできるようにバケットポリシーを編集します。
バケットポリシーの設定内容は以下のような設定をします。下記のバケットポリシーはCloudFrontからのみS3のバケットにアクセスできる設定となります。
{
"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が設定される]"
}
}
}
]
}S3のバケットに移動し、バケットポリシーを編集します。生成された上記内容をコピーして設定します。
CloudFrontのURLとファイル名を指定することで、以下のようにファイルにアクセスすることができます。
まとめ
CloudFrontとS3を連携させてWebアプリを公開する方法のまとめ
本記事では、AWS上でSPAアプリケーションをCloudFrontとS3を組み合わせてWebアプリを公開する方法を紹介しました。
AWSでSPAのアプリケーションを公開する場合は、HTTPS通信が必須となります。HTTPS通信はCloudFrontとS３を連携しなければ実現できないため、この構成が必須となります。本記事で紹介した方法を知っておくことで、アプリケーションの構成図が間違いなく書けるようになると思います。
本記事が皆様の参考になれば幸いです。
コメント