なみひらブログ

学んだことを日々記録する。～ since 2012/06/24 ～

Webアプリの静的コンテンツをAWSのS3＋CloudFrontに配置したときの作業メモ

AWS ときメモ インフラ サーバ構築 運用

背景

AWSを利用してWebアプリを作るなら、静的コンテンツはAWSのS3とCloudFrontを利用したほうが最近知ったので、それをやってみたときの作業メモです。
※静的コンテンツ＝例：アプリが保持する画像、ドキュメント、cssなどなど

用語確認と位置づけ

  • S3
    • AWSが提供するクラウドストレージ。以下にいろいろ記載があるが、使う上ではただのオンラインストレージとしか思っていない(；´Д｀)
    • 主に（？）利用している量と通信料（インとアウト）の従量課金。
    • Webアプリ内に取り込む必要がないファイル（例：アップロードした画像など）は、いろいろ圧迫しないように外出しのストレージ側に置いておいたほうがいい。
  • CloudFront
    • AWSが提供するコンテンツ配信サービス
    • 主に（？）利用している量と通信料（インとアウト）の従量課金。
    • 位置づけ的にはS3においたファイルを配信する際（ブラウザから取得するなど）に効率的に配信してくれるサービス。
      • 効率的＝一番近いサーバから配信してくれたり、キャッシュを使ってS3にアクセスなしで配信してくれたり。
    • 画像とかを多く使うサイトは、ユーザーアクセスの度にアプリ（＆DBとかS3）に大量のアクセスがくるので、キャッシュの機構を入れておいたほうがいい。CloudFrontはその実現例の1つ。

作業メモ

以下の作業を実施します。

  • S3の設定/S3へのコンテンツ配置
  • CloudFrontの設定
  • Route53へのDNSレコード追加

＃全部の作業をAWSマネジメントコンソールで作業できます。

■S3の設定/S3へのコンテンツ配置

バケット作成

S3は"バケット"と言われる単位で設定が管理され、構成管理でいう”リポジトリ”のようなものです。
バケット名の例：static-app-example-com
気をつけた点は以下です。

アクセス許可設定

バケットのプロパティで、「バケットポリシーの編集」でポリシーを追加する。
フリーフォーマットでの入力なので以下を入力する。 バケット名を変えるだけであとはおまじない。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::static-app-example-com/*"
        }
    ]
}

静的ウェブサイトホスティング設定
「静的ウェブサイトホスティングを有効にする」。これで指定されたエンドポイントのURLを介してS3のファイルにアクセスできるようになる。
＃静的コンテストサイト（htmlファイルを置いてアクセスされるサイト）でなくてもインデックスページの指定が必須。使わない場合はとりあえず"index.html"と指定しておけばOK。

フォルダ作成とコンテンツアップロード
普通のオンラインストレージを操作は同じ感じでただアップロードする。
＃S3はAWSコマンドで操作できるので、そのうちスクリプトを組みたい(；´Д｀)

アクセスしてみる
指定されたエンドポイントを介してアクセししてみる。
URLの例：http://static-app-example-com.s3-website-us-east-1.amazonaws.com/hoge.jpg

■CloudFrontの設定

AWSマネジメントコンソールで"CloudFront"を選択し、設定を行います。

配信設定をする
CloudFrontの配信設定はそれぞれS3に対応して作成されます。 「Create Distribution」を押下し、上で作成したS3に設定を行います。

気をつけた点は以下です。

  • 形態は「Web」を選択。（＝RTMPではない）
  • 各種設定
    • Origin Domain Name：上で作成したS3のドメイン名。選択肢としてでてくるのでそれを選択する。
    • Origin ID：識別子。S3とヒモ付けがわかるような名前がいい。static-app-example-com
    • Alternate Domain Names (CNAMEs)：CloudFrontが発行するドメイン名以外でアクセスしたい場合はここにドメイン名を記載する。アクセししたい場合はさらにRoute53でCNAMEレコードを追加する必要がある（後述）。←Route53だけで管理させて欲しい(；´Д｀)
    • Price Class：デフォルトで全リージョンへのコンテンツ配信になっていて高いプランなので、日本リージョンが含まれる「Use Only US, Europe and Asia」にしておいたほうがいい(；´Д｀)

この設定が完了したら、CloudFrontとしてのドメイン（xxx.cloudfront.net）が発行される。xxxは一般にランダムが値になっている。

アクセスしてみる
上記で発行されたドメインでアクセスするとファイルが見える。例：http://xxx.cloudfront.net/hoge.jpg

■Route53へのDNSレコード追加

AWSマネジメントコンソールでRoute53に移動する。アクセスするドメインとCloudFrontのドメインを紐付ける。

DNSの設定

アクセスしてみる
最終的にDNSに登録したドメインでアクセスできる。例：http://static.app.example.com/hoge.jpg
＃通信経路：ブラウザ→CloudFront→（適宜）→S3

このあと本当はS3への直接アクセスを禁止するように（アクセスポリシー削除？）したほうがいいかもしれませんが、動作確認しづらいのでとりあえずこのまま(；´Д｀)

まとめ

AWSのUI触っていたら簡単にできた。AWSのサービスを利用して最適化できた(*´Д｀*)（おそらく）
どのくらいの費用がかかるか現状わかっていないので、ちょっと怖い(；´Д｀)

参考