Help us understand the problem. What is going on with this article?

carrierwaveでS3にアップした画像に有効期限をつけると共にCloud Frontで配信するための手順

More than 3 years have passed since last update.

概要

  • carrierwaveでアップロードした画像に有効期限のメタデータをつける
  • cdn (cloudfront)で画像を配信するための設定
  • 応用編 srcの表示をCloudFrontのドメイン名ではなく、独自のドメイン名を使う

環境

  • rails 5.1(参考拙記事
  • carrierwaveでS3にアップロードできている(参考拙記事
  • AWS Route 53でドメインを設定している(参考拙記事

手順

carrierwaveでアップロードした画像に有効期限のメタデータをつける

デフォルトの設定では、carrierwaveでアップロードした画像には有効期限を表すメタデータがつけられていないため、以下のメタデータを付与するようにcarrierwaveの設定を修正する。

  • (例 一年後までブラウザキャッシュを保持して欲しい場合)に付与するメタデータ
    • cache-control: max-age=315576000
    • expires:Wed, 27 Jun 2018 09:34:29 GMT

carrierwave設定の修正

Raisアプリを修正する

config/initializers/carrierwave.rb
CarrierWave.configure do |config|
  省略
  config.fog_attributes = {cache_control: 'max-age=31536000', expires: 1.year.from_now.httpdate}
end

この設定の修正により、今後carrierwaveでアップロードされた画像には全てメタデータが付与されます。

メタデータが付与されたことの確認

メタデータが付与されているかどうかはS3のバケットの実際の画像データにアクセスすればわかます。

実際にS3でアップロードした画像のメタデータは下記のようになります。(expiresはアップロードした日時からの一年後の日時なので、アップロードのタイミングにより異なります。)

https://gyazo.com/ed8f58e11232a3afe4e55419ec525409

cdn (cloudfront)で画像を配信するための設定

AWSにログインし、CloudFrontを選択する

https://gyazo.com/7715061ede1dd97927f856c404703dd3

Create Distributionを押す

https://gyazo.com/77ebe88b392ef2524c8e44c9f31d635d

Webの方の Get Startedを押す

https://gyazo.com/581f2fdd42a2df42d5ff685ad2dbec42

Origin Domain Nameを押して、出てくる選択肢からcarrierwaveがアップロードした先のS3のバケットを選ぶ。

https://gyazo.com/8ff1388a09b440b8b921b821c0a09fa0

Origin IDが自動的に設定されるのを確認する
https://gyazo.com/4deffb427e1ab8d4c57c9aee8fa7cac5

色々設定があるけど無視してページの最下部にあるCreate Distributionボタンを押す

https://gyazo.com/91ed1969d168f6d79627f134842c48b0

これで、画像を配信するためのdistributionが作成がされる。

CloudFrontのドメインをcarrierwaveに登録する

CloudFrontのドメインをコピーする。

作成されたdistributionをクリックする

https://gyazo.com/2705091f214fa9f96cc9529125b29bff

Domain Nameをコピーする

https://gyazo.com/f30ea27c0eca54fde4f53b7337ff5270

carrierwaveに登録する

Raisアプリを修正する。config.fog_publicをtrueにし、コピーしたcloudfrontのドメインをconfig.assset_hostに設定する。

config/initializers/carrierwave.rb
CarrierWave.configure do |config|
  省略
  config.fog_attributes = {cache_control: 'max-age=31536000', expires: 1.year.from_now.httpdate}
  config.fog_public = true
  config.asset_host = 'https://コピーしたcloudfrontのドメイン'
end

確認する

carrierwaveでアップロードした画像のソースを見てください。 <img src="xxxxx"> の xxxxxの箇所に、CloudFrontのドメインが含まれていれば成功です。

https://gyazo.com/38bdd3d6bce8499af29063b7617b00f0

応用編 srcの表示をCloudFrontのドメイン名ではなく、独自のドメイン名を使う

機能としては、問題ないですがCloudFrontのドメイン名がむき出しなのはちょっとかっこ悪いので cdn.サイト名 を使うように設定を修正する。

cdn.サイト名 のCNAMEに CloudFrontのドメイン名 を登録して、それらをCloudFrontとcarrierwaveに反映すればいい。

CNAMEの設定はなにでやってもいいですが、今回はRoute53での例を示します。

Route53でCloudFrontのドメイン名をCNAMEに設定する。

(以下の設定は既に自分のサイトのDomain NameをRoute 53で管理している事が必要です。)

AWSのRoute 53を選択する

https://gyazo.com/e5bf2f76d08a27502729e85badfdce00

Hosted zones → 自分のサイトの Domain Nameをクリック後、Create Record Setボタンを押す

https://gyazo.com/e791a90e49d1f94da219a9333debd015

画面横のウィンドウに独自のドメイン名(例では cdn.サイト名 )とcloud Frontのドメイン名を入力する。

https://gyazo.com/cb30c97e9faa207ab4bba8c2a4ec1f2b

Save Record Setボタンを押す

https://gyazo.com/14e9d378deaa5a683c517aa03ec6c299

CloudFrontにcdn.サイト名を設定する

CloudFrontに戻り、 cdn.サイト名 を登録する

作成されたdistributionをクリックする

https://gyazo.com/2705091f214fa9f96cc9529125b29bff

Editを押す

https://gyazo.com/cbfe1854c0806b201f29f6ae8b31bbf3

Alternate Domain NamesにRoute 53で設定したcdn.サイト名を入力する

https://gyazo.com/f88109b5bd96ef47ce99bc676c638318

Yes Editを押して保存する。

https://gyazo.com/e3e4e0b825dc5daed66fe6e560b87261

cdn.サイト名をcarrierwaveに反映

Raisアプリを修正する。config.assset_hostのCloud Frontのドメイン名を入力した箇所を cdn.サイト名 に置換する。

config/initializers/carrierwave.rb
CarrierWave.configure do |config|
  省略
  config.fog_attributes = {cache_control: 'max-age=31536000', expires: 1.year.from_now.httpdate}
  config.fog_public = true
  config.asset_host = 'https://cdn.サイト名'
end

確認する

carrierwaveでアップロードした画像のソースを見てください。 <img src="xxxxx"> の xxxxxの箇所に、CloudFrontのドメインが含まれていた箇所が cdn.サイト名 に置換されて表示されていれば成功です。

https://gyazo.com/7383d59a29a78d8ea5a385ad045e9af6

参考

junara
10年間医療の研究していたが、Webサービス作りたくて、エンジニアへ。 Rails, Javascritptのエンジニアとして働きながら、生命科学学会検索サービスを作りました。 https://www.dokode.work
bldt
"Your growth, Improve the world" をビジョンに掲げ、自社事業やシステム開発サービスを提供しています
https://bldt.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away