schedule2018-07-09

CroudFrontとAPI Gatewayで自作ブログサイトを改善しました

この記事について

こんにちは、suzu6です。

以前、こちらでざっくりとご紹介した本ウェブサイトの構成を変更しました。

AWSで始めるサーバレスなブログサービス

まだPV数もありませんが、すでに構成上の問題点が浮き彫りになったので、修正しました。

引き続き、AWS Lambda上にPython+Flaskを使ってサーバレスな構成で運用しています。

変更する前の構成

まずは、変更前のAWSの構造を見て下さい。

変更前

LambdaにFlaskのアプリを置き、S3から画像やアイコンを直接取得する構成にしていました。

問題点1:Lambdaへのリクエスト数が多すぎ!

ひとつのLambdaの中に、アプリの処理だけでなくjsライブラリやCSSファイルも同梱して置いていました。

この場合、クライアント側でHTMLを読み込む時に何度もLambdaへリクエストをしているようです。まだPV数も自分で確認した100回程しかないのに、Lambdaへの13,847回もリクエストが飛んでいました。

Lambdaは計算時間だけでなく、リクエスト回数も従量制です。無料枠の1%ほどのリクエストですが、今後PV数が増えることを願って今のうちに対策を立てたいと思います。

問題点2:S3から直接取るのはどうなの?

API Gatewayにカスタムドメインを設定して、基本はLambdaで処理しています。画像やアイコンはS3に置いて、S3から直接取得するようにURLを記述していました。

一人で運用しているので、S3にファイルを置いてリンクを記事に貼り付けて。。。といった作業はまだ苦痛ではありません。

しかし、クロスドメインの問題があり、ブラウザによっては推奨されないようです。

クロスドメイン (cross domain)とは

解決策1:S3に静的ファイルを集めてCloudFrontを使おう!

Lambdaへのリクエスト数を減らすため、S3にjsライブラリやCSSファイルを置きました。

ついでにCloudFrontを使って高速化もしましょう!CloudFrontはコンテンツをキャッシュ化して、通信にかかるレイテンシ(遅延)を改善します。こちらも無料枠が50GBあるので早速利用します。

主にclassmethodさんのこちらの記事を参考にしています。

CloudFront + S3 によるCDN (Cache Distribution パターン) 構築手順

まず、ライブラリとCSSをS3に置きました。

CloudFrontのDistributionを作成して、Origin Domain NameからS3のbucketを選択します。

cloudfront_s3

Restrict Bucket Accessを「Yes」にしておきます。

不確かで申し訳ありませんが、Origin Access Identityを「Create a New Identity」、Grant Read Permissions on Bucketを「Yes, Update Bucket Policy」としていたと思います。

作成すると「*******.cloudfront.net」のURLができるので確認して下さい。

解決策2:API Gatewayに紐づけて、同じドメインで取得できるようにしよう!

Lambdaの関数はAPI Gatewayを通して公開しています。API GatewayはURLのリソースにAWSのサービスを紐づけることができます。

今回はFlaskのでの構成と同じく、「/static」以下にS3のbucketの内容を紐づけました。

api_gateway_resource

「/」と「/{proxy+}」にLambda関数が紐づいています。

「/static」を作成してその下に「/{proxy+}」となるように、リソースを作成します。そして「/{proxy+}」にメソッドを作成します。メソッドは安全のためGETのみ許可しました。

セットアップでは、統合タイプを「HTTPプロキシ」、エンドポイントURLに先ほど作ったCloudFrontのURLを入力します。 そのURLには「/{proxy}」をつけて下さい。

api_gateway_method

最後にアクションからAPIのデプロイをして完了です。

新しい構成

以上2点を改善した結果、新しい構成は以下のようになりました。

新しい構成

クロスドメインの問題も解消され、さらに静的ファイルのキャッシュ化とS3のセキュリティ面での強化もできました。 また、同一ドメインの同じリソース「/static」から取得できます。よって、ローカル環境のテストはstaticフォルダから、デプロイ先ではS3のbucketから同じURLで取得できます。

AWSのサービスを学んでいくと、便利で優れた構成が実現できると思います。 これからも、どんどん新しいことを吸収していきます!!

手順や構成面で誤りや不備がありましたら、footerのメールアドレスまでお知らせください。 コメント欄は今後実装する予定です。


AWS Lambdaなどサーバレス なシステム構成については、こちらの書籍がおすすめです。

最後までご覧いただきありがとうございました。