いわりょのBlog

IT関連で学んだことを書いていきます。

自作railsアプリをデプロイする 番外編 Cloud Frontを使って画像を高速配信する

ryo10leo.hatenablog.com
ryo10leo.hatenablog.com

上の記事を通して、以下のようなインフラを作成しました。↓

f:id:Ryo10Leo:20200118134334p:plain

EC2の中身はこんな感じです。↓

f:id:Ryo10Leo:20200115230205p:plain

Railsアプリケーションから投稿した画像を「S3」のバケットに保存することができました。

今回は「Cloud Front」を使って、画像配信をより効率的にしていこうと思います。

Cloud Frontを軽く理解する

概要

Cloud Frontとは、高速にコンテンツを配信するサービス。(CDNサービス)

オリジンサーバー( 配信元のサーバー、ここでいうS3)上にあるコンテンツを世界100カ国以上あるエッジロケーションにコピーして、そこから配信する。

簡単にいうと、配信に関する遅延は少ない状態にすることができます。

特徴

・高速

ユーザー(クライアント)から最も近いエッジサーバーからコンテンツを配信するため速い。

・効率的

エッジサーバーで配信をするため、オリジンサーバーへの負荷をかけることなく配信できる。

導入事例

Amazon Prime Video、Huluなど

作成するものを図で理解する

全体から見た設置図はこんな感じ↓

f:id:Ryo10Leo:20200121005208p:plain

動作としては以下のような仕組みで動いています。↓

f:id:Ryo10Leo:20200121010254p:plain

Cloud Frontがキャッシュからコンテンツを配信することで「高速」になり、コンテンツをS3から取得しておくことでクライアントからのリクエストによる「S3の負荷を軽減」することができます。

CloudFrontを設定する

ディストリビューションの作成

コンソールから「 Cloud Front」を選択。

f:id:Ryo10Leo:20200121011541p:plain

Create Distribution」を選択。

f:id:Ryo10Leo:20200121011727p:plain

Webの方で「Get Started」を選択。

ディストリビューションの各種設定をしていきます。

f:id:Ryo10Leo:20200121012154p:plain

Origin Domain Name

S3で作成したキャッシュさせたいバケットを選択。

Origin Path

指定したディレクトリのみキャッシュさせたい場合は指定。
今回は空。

Origin ID

今回はこのまま

Restrict Bucket Access

Cloud Frontのみにアクセスさせたい場合は「Yes」を選択。

Origin Custom Headers

今回は空

下の「Default Cache Behavior Settings」はいじりません。

さらに下の「Distribution Settings」は、
Price Class」が「Use All Edge Locations(Best Performance)」であればOK。

設定が終わったら「Create Distribution

作成完了です。

この時点でS3に保存されているコンテンツはCloudFrontから配信されるようになります。

しかし、Cloud Frontから配信を行う場合、画像のURLのドメインが「Cloud Frontのドメイン」になります。

f:id:Ryo10Leo:20200121013744p:plain

上記の画像のように「~~~.cloudfront.net」がドメインになります。

今回は独自のドメインをCloud Frontに紐付けて配信ができるようにしていきます。

例えばドメインを「static.myapp.com」としたら、そのドメインで「~~~.cloudfront.net」に接続して画像を配信できます。

ドメイン設定のための準備

独自ドメインを紐付けるためには、「SSL証明書」を発行する必要があります。(ここでは詳しく書きません)

なのでSSL証明書をまずは発行していきます。

CloudFront Distributions」の画面から、先ほど作成したディストリビューションの「ID」をクリック。

その先の画面で「Edit」を選択します。

f:id:Ryo10Leo:20200121015043p:plain

移動した画面で「Request or Import a Certificate With ACM」を選択。

ドメインを追加していきます。↓

f:id:Ryo10Leo:20200121015337p:plain

「*.myapp.com」「myapp.com」などのように、サブドメイン全てを許容するものとドメイン本体を追加しておきましょう。↓

f:id:Ryo10Leo:20200121015946p:plain

次へ」を選択。

f:id:Ryo10Leo:20200121020117p:plain

DNS」の検証にチェックして「次へ

タグ」は何もしません。

設定を確認します。↓

f:id:Ryo10Leo:20200121020509p:plain

間違いがなければ「確定とリクエス

続いて検証作業をやっていきます。↓

f:id:Ryo10Leo:20200121021357p:plain

Route 53でのレコード作成」を選択して、出た画面でさらに「作成」をクリック。

以下の画面が出たら「続行」を選択。

f:id:Ryo10Leo:20200121021749p:plain

SSL証明書」が発行されるまで待ちます。

発行された準備は完了です。

Cloud Frontの独自ドメインの設定

発行されたらEdit Distributionの画面に戻ります。↓

f:id:Ryo10Leo:20200121022331p:plain

以下のように設定していきます。

Alternate Domain Names

Cloud Frontで使われる独自のドメインを入力します。
「myapp.com」がドメインの本体だった場合、「static.myapp.com」や「image.myapp.com」などの名前を入力します。(写真ではstatic.~~~にしています)

SSL Certificate

SSLが発行されると、「Custom SSL Certificate」が選択可能になるのでそちらを選択します。

写真の赤丸内の空欄のところをクリックし、表示されたものを選択します。

残りの設定はいじらずに、「Yes,Edit」を選択。

ディストリビューションの設定が完了しました。

これで「static.~~~.com」のドメイン名も、Cloud Frontのドメイン名として使えるよ。という段階まできました。

しかしあとやることが以下のように2つあります。

  1. Route 53で独自ドメインとCloud Frontの紐付け
  2. Rails側のCarirrWaveの設定

終わらせます。

Route 53で独自ドメインとCloud Frontの紐付け

まずはRoute 53の設定です。

「static.~~~.com」の接続先はCloud Frontの「~~~cloudfront.net」だという認識をRoute53で設定します。

Route 53」の「ホストゾーン」を選択して、使っているドメインをクリックします。

レコードセットの作成」を選択。

f:id:Ryo10Leo:20200121024812p:plain

名前

ディストリビューションで設定した独自ドメイン名にします。

タイプ

CNAME -正規名

ディストリビューション作成時に、発行されたCloud Frontのドメイン

ルーティングポリシー

シンプル

作成」を選択。

AWS側の設定はこれにて終了です。

Rails側のCarrierWaveの設定

RailsでCarrierWaveを使用していれば、設定ファイルは以下のようになっているはずです。↓

config/carrier_wave.rb

    CarrierWave.configure do |config|
      config.fog_credentials = {
        # Amazon S3用の設定
        :provider              => 'AWS',
        :region                => ENV['S3_REGION'],   
        :aws_access_key_id     => ENV['S3_ACCESS_KEY'],
        :aws_secret_access_key => ENV['S3_SECRET_KEY']
      }
      config.fog_directory     =  ENV['S3_BUCKET']
    end

ここにAWS側で設定したドメインでコンテンツのURLを表示するように設定します。

以下のように追加すれば完了です。

config/carrier_wave.rb

    CarrierWave.configure do |config|
      config.fog_credentials = {
        # Amazon S3用の設定
        :provider              => 'AWS',
        :region                => ENV['S3_REGION'],   
        :aws_access_key_id     => ENV['S3_ACCESS_KEY'],
        :aws_secret_access_key => ENV['S3_SECRET_KEY']
      }
      config.fog_directory     =  ENV['S3_BUCKET']
     #以下を追加↓
      config.asset_host = 'https://static.~~~.com'
    end

設定できているか確認する

f:id:Ryo10Leo:20200121030639p:plain

ディベロッパーツールで確認したところ、配信したコンテンツのソースが独自ドメインで表示されていることが確認できました。

これで「独自ドメインでCloud Frontにアクセスして S3にあるコンテンツを取得する」ことができました!