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

  • 0
    いいね
  • 0
    コメント

    概要

    • 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

    参考