Ruby on Rails + Assets on Cloud をCloudFront経由で高速化

##はじめに
ファイルサイズの大きい画像などをクラウドに配置することでウェブサーバーへのリクエストを減らし、ネットワークリソースの節約と海外からのアクセスもあるため、CloudFrontでアクセスポイントからもっとエッジサーバーへ誘導させる設定を行う

* S3のバケット作成
* CloudFrontのDistributions作成
* IAMの作成
* Gemのインストールと設定 (asset_sync/asset_host)
* デプロイ


## 手順

### S3バケット作成

* バケットの作成
![S3_Management_Console.png](https://qiita-image-store.s3.amazonaws.com/0/70031/a19d62d7-d665-a244-5bd4-838771accd1a.png "S3_Management_Console.png")


* ホスティングの有効化 (エンドポイントは後ほど、CloudFrontのオリジンサーバーに利用)
![S3_Management_Console.png](https://qiita-image-store.s3.amazonaws.com/0/70031/f3064544-11d5-b136-6839-9aff3a5dcdc9.png "S3_Management_Console.png")


### CloudFrontのDistributions作成
![AWS_CloudFront_Management_Console.png](https://qiita-image-store.s3.amazonaws.com/0/70031/3660661d-daec-c9c9-660e-20fc9a1f5427.png "AWS_CloudFront_Management_Console.png")


![AWS_CloudFront_Management_Console.png](https://qiita-image-store.s3.amazonaws.com/0/70031/bec7769e-61dd-f19d-ca01-d19f3d4e4372.png "AWS_CloudFront_Management_Console.png")

* Distributionの設定

<table>
<tr><th></th><th></th></tr>
<tr><td>Origin Domain Name</td><td>オリジンサーバーの設定(今回はS3のエンドポイント)</td></tr>

<tr><td>Origin Path</td><td> 	CloudFrontへのリクエストをオリジンサーバの特定のパスにルーティングしたい場合は設定</td></tr>
<tr><td>Origin ID</td><td>なんでもOK</td></tr>
<tr><td>Restrict Bucket Access</td><td>今回はNoで設定</td></tr>
</table>
その他、諸々は下記を参照
http://aws.amazon.com/jp/cloudfront/details/

![AWS_CloudFront_Management_Console.png](https://qiita-image-store.s3.amazonaws.com/0/70031/9fbf3998-caaf-b056-776c-caa4e0cc000e.png "AWS_CloudFront_Management_Console.png")

### IAMの作成
RailsAppからバケットへのアクセス権限を渡します。

* ユーザーの作成
![IAM_Management_Console.png](https://qiita-image-store.s3.amazonaws.com/0/70031/bbf05802-4ef9-f16e-902d-f1dc274ec902.png "IAM_Management_Console.png")

![IAM_Management_Console.png](https://qiita-image-store.s3.amazonaws.com/0/70031/c273b5ef-56af-d1b1-4e75-7a6cab12f90b.png "IAM_Management_Console.png")

![IAM_Management_Console.png](https://qiita-image-store.s3.amazonaws.com/0/70031/004f5ff5-4b72-01ce-e143-3ae3f997f3e9.png "IAM_Management_Console.png")


* s3へのアクセス許可

![IAM_Management_Console.png](https://qiita-image-store.s3.amazonaws.com/0/70031/0f42bcb0-9a2d-bc69-3aec-67dbe4be63f1.png "IAM_Management_Console.png")


![IAM_Management_Console.png](https://qiita-image-store.s3.amazonaws.com/0/70031/7056a3e3-02a9-f0fc-5e69-f2661fb6fefb.png "IAM_Management_Console.png")


### Gemのインストールと設定 (asset_sync/asset_host)

* assetsとs3の連携にasset_syncを利用

```
    gem 'asset_sync'
```


* 設定ファイルの作成
  * aws_access_key_idとaws_secret_access_keyに作成したIAMのIDとシークレットキーを設定
  * fog_directoryに作成したバケット名を指定
  * リージョンを任意で設定した場合はfog_regionを設定


```config/asset_sync.yml
defaults: &defaults
  fog_provider: 'AWS'
  aws_access_key_id: 'hogehoge'
  aws_secret_access_key: 'hogehoge'
  # To use AWS reduced redundancy storage.
  # aws_reduced_redundancy: true
  fog_directory: "develop-hogehoge" # バケット名を指定
  # You may need to specify what region your storage bucket is in
  # fog_region: "eu-west-1"
  existing_remote_files: keep
  # To delete existing remote files.
  # existing_remote_files: delete
  # Automatically replace files with their equivalent gzip compressed version
  # gzip_compression: true
  # Fail silently.  Useful for environments such as Heroku
  # fail_silently: true

development:
  <<: *defaults
  enabled: false

test:
  <<: *defaults
  enabled: false

staging:
  <<: *defaults
  fog_directory: "staging-hogehoge"

production:
  <<: *defaults
  fog_directory: "production-hogehoge"

```

* asset_hostの設定

作成した、DistributionのドメインNameをasset_hostに設定

```config/environments/production.rb
Rails.application.configure do
  config.action_controller.asset_host = '//hogehoge.cloudfront.net'
end
```

### デプロイ
デプロイ時の設定は特になし、rake assets:precompile時にs3へコピーされます。

![S3_Management_Console.png](https://qiita-image-store.s3.amazonaws.com/0/70031/cdbd1995-08f5-7600-e1ce-6e3a73c0e974.png "S3_Management_Console.png")

* コンソールからもcloudfrontが呼ばれていることを確認
![XVOLVE___main.png](https://qiita-image-store.s3.amazonaws.com/0/70031/01f00083-7613-e42c-373a-fc75ec23adc9.png "XVOLVE___main.png")


簡単に設定できますね！


## 参考

CloudFrontとの連携 
http://tiro105.hateblo.jp/entry/2015/06/21/200542

heroku+CloudFrontで静的ファイルを配信する（Webフォント対応）
http://qiita.com/Oakbow/items/9ceb93d47d918aeafe3a


AWS S3 + Cloudfrontでwebサイトを公開する手順
http://blog.ybbo.net/2014/05/14/aws-s3-cloudfront%E3%81%A7web%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B%E6%89%8B%E9%A0%86/

Railsアプリケーションを公開するならAssets on Cloudパターンを使おう
http://d.hatena.ne.jp/lettas0726/20130320/1363773153