あすたぴ.dev

cloudflare で Nuxt + Heroku のアプリを無料独自ドメイン + CDNキャッシュ

2019/10/20 01:26:41

このブログは Nuxt.js で作成しています。それを Heroku 上で動かしております。
Herokuでは、独自ドメイン( このサイトでいう astapi.dev )を設定するためにはオプションで課金が必要になります。
また無料の Dyno (サーバー)では一定時間アクセスがないとスリープし次のアクセス時にサーバーを起動するため、初回実行が非常に遅い。というデメリットがあります。(無料なのは最高です)

それを cloudflare という CDN のサービスを利用することでハックしちゃう。という話しになります。

CDNとは

CDNとは Content Delivery Network の略で、静的なファイル、主に html, css, js, image を高速に配信するための技術です。

世界中にエッジサーバーと呼ばれるサーバーを配置しており、CDNを通すことでアクセス元から一番近いエッジサーバーを選択し、エッジサーバーにキャッシュ(一時的に保存してくれること)されている静的ファイルを返してくれます。

かんたんにいうとサイトを速くするために使います。

cloudflare を使う

CDNのサービスは他にもあり有名なところではFastly, Akamai があります。それらのサービスはいずれも登録時点で有料ですが、cloudflare は1サイトに限り、無料で使用することができます。(すごすぎない?)
https://www.cloudflare.com/ja-jp/

登録は割愛します。

登録したら、使用したいドメインを設定します。

上記のように、使用するCNAME、ドメイン、ターゲットにはHerokuのデプロイしたアプリのドメインを入れます。

次にページルールを設定します。
ページルールとは、指定したURLのルールにそって動作を指定することです。

設定内容はこんな感じです。
astapi.dev へのアクセスは www.astapi.dev へリダイレクト
www.astapi.dev/* へのアクセスはすべてキャッシュ、エッジサーバーへの保存期間は1ヶ月

これで1度キャッシュしてしまえば1ヶ月はHerokuへアクセスがいくことがなくなります。
記事を更新したり、ブログを修正した場合はキャッシュをcloudflareのコンソールからキャッシュを消します。

Copyright © astapi