Herokuで運営しているアプリにFastlyを導入しようとしたのですが、一筋縄ではいかず、一旦保留にすることに決めました。CDN導入以外にもやるべきことがたくさんあるので。。
いつかまた挑戦する時のために、今回の学びをまとめておきます。
(2020/06/02追記)
Cloudflareを導入しました。かなり良い感じです!
Cloudflareを使ってみた - Qiita
用語
- Aレコード
- 名前解決方法の1つ。
- hogehoge.com = 123.456.78.90 みたいに指定する
- CNAMEレコード
- 名前解決方法の1つ。
- hogehoge.com = fugafuga.com みたいに指定する
- apexドメイン
- wwwがないドメイン
Fastlyを導入しようとした経緯
ページの表示が遅いのでCDNの導入を検討。
Herokuを使う場合、CloudFrontとFastlyの2種類があり、Fastlyの方がおすすめされている雰囲気だったのでFastlyに決定。
全てのCDNサービスの中でFastlyだけ?がインスタントパージという機能を提供している。
CDNにキャッシュされているデータを、任意のタイミングでプログラム側から即時削除できるらしい。
これにより(画像やCSSだけでなく)ページデータ全体をキャッシュすることができ、かなりの高速化+変更があった時には即時反映することができる。Dev.toやResumeで利用されているらしい。(月6000円くらいかかる+設定はわりと大変)
Fastly + Rails + Herokuでページをキャッシュする方法 | Cat Knows
やったこと
- Herokuアプリのダッシュボードから「Resources」>「Fastly」を検索>「Provision」
- Fastlyのダッシュボードにアクセスし「Configure」>「Edit Configurations」>「Domains」>「Create Domain」より、自分のサイトのドメインを追加
- ドメイン一覧が表示される画面に移動するので、追加したドメイン横の「Test domain」をクリック
-
hogehoge.com.global.prod.fastly.netというURLで自分のサービスのトップページが表示- 自分のサービスのURLがhogehoge.comの場合
- ドメイン追加から10分くらい経過していないと、エラー画面が表示された
- DelelopertoolのNetworkタブを開いてからページを再読み込み→読み込まれた画像を選択すると、Response Headers内に
X-Cache: HITという項目があることが確認できた- このページの画像はCDNを経由して取得されたということ
- 今度はhogehoge.comにアクセスして同様の手順を踏んでみると、
X-Cache: HITという項目があることが確認できない- このURLではCDNから配信されていないということ
hogehoge.comにアクセスした時にCDNから配信できていないと意味がないので、どうにかせねば、となった
調べてわかったこと
- hogehoge.comにアクセスした時にもCDNから配信できるようにするためには、DNS周りの設定を変更する必要がある (hogehoge.comへのアクセスをFastlyにリダイレクトする必要があるため)
- CNAMEレコードの設定を編集して対応する方法が推奨されている
- apexドメインを使っている場合、CNAMEレコードを編集する方法が使えないので、Aレコードを編集する別の方法で解決
- Aレコードを編集する際に設定するIPアドレスは、各自でFastlyに問い合わせて教えてもらう必要がある
導入を見送った理由
私のサイトはapexドメインで運用しているので、色々めんどくさそうだと思って導入を見送りました。
ドメイン周りはPointDNSというHerokuアドオンで設定しているのですが、PointDNSの設定自体もあまり理解していないまま適当に片付けてしまったので、そもそもどこかのタイミングでDNS周りの勉強をした方が良さそうです。
私のサイトは他にも改善できるポイントがたくさんあるので、それらの修正が終わってからきちんとDNS周りの勉強をして、そこでFastlyも導入をしようと思います。
疑問
Fastly側でSSLの設定をしないとどうなる?
アセットを取得する時の通信がSSLじゃなくなって、ブラウザに表示されるURLは https://hogehoge.com のままだと思っているんですけど、合ってますか?