AWS S3を使ってRailsのassetをCloud hostさせる
RailsのassetファイルをS3において表示速度を上げる方法。
HerokuはUS(かEU)のAWSがホストになるのでどうしても大きめの画像ファイルの表示しようとすると時間がかかってしまう。 そこで、AmazonS3のTokyoインスタンスを使って、静的なファイルはそちらからダウンロードするようにして画面描画速度を早める方法を書いてみる。
メリット
- ページのロード時間の短縮
- サーバの負荷の減少
- Herokuの場合、SlugSizeの減少
デメリット
- deployに時間がかかる
- S3の料金が発生する（ことがある）
手順
※環境はruby2.0 + Rails4
Gem "asset_sync" を追加
gem 'asset_sync'
Herokuのlab機能を有効化
$ heroku labs:enable user-env-compile -a appName
AWSのアクセスキーと秘密キーの取得
AWSのアカウントS3のバケットの設定をすませ、
https://portal.aws.amazon.com/gp/aws/securityCredentials#access_credentials
の中段でキーを発行
Herokuにキーを追加
AWS_ACCESS_KEYとAWS_SECRET_ACCESS_KEY
$ heroku config:set FOG_PROVIDER=AWS AWS_ACCESS_KEY_ID=xxx AWS_SECRET_ACCESS_KEY=yyy
S3のバケット名を設定
$ heroku config:set FOG_DIRECTORY=bucket_name
production.rbにasset_hostのパスを追加
config.action_controller.asset_host = "https://#{ENV['FOG_DIRECTORY']}.s3.amazonaws.com"
asset_syncの設定
asset_syncはデフォルトだとリージョンがusを指しているようで、tokyoリージョンを指すように設定をへんこうする必要があります。
設定ファイルを作成
$ rails generate asset_sync:install --provider=AWS
作成されたasset_sync.rbを編集
config.fog_region = 'ap-northeast-1'
公式によると、カスタムの設定ファイルはエラーを履くことがあるので
if defined?(AssetSync)で括る必要がある。
if defined?(AssetSync) AssetSync.configure do |config| .... end
push heroku
いつもの
$ git push heroku master ... ... Running: rake assets:precompile ...
その中でrake assets:precompileが呼ばれる。
（precompileをやり直しているので結構時間がかかる）
完了
herokuのアプリにアクセスして、Chromeの開発ツールのNetworkタブを確認すると
こんな感じs3でホストされていることが分かります。
実測はしてないのですが、画面を開いた時の画面の読み込みはかなり早くなって、特に背景に大きめの画像など使っている場合は顕著にわかると思います。
S3は ストレージ5GB/データ送信 15 GBまでは無料で利用できるので（超過しても安いもんです）利用してみてはいかがでしょうか。
herokuの記事はこちら https://devcenter.heroku.com/articles/cdn-asset-host-rails31
