画像・ファイル管理におけるKurocoFilesとKurocoFrontの使い分けについて

Kurocoで画像やファイルを保存する場合、下記2パターンがあります。

  • KurocoFilesを利用する
  • KurocoFrontを利用する

本チュートリアルでは、それぞれの特徴と、利用シーンに応じた適切な配置場所を解説します。

KurocoFilesについて

KurocoFilesは管理画面から更新ができるファイルアップロード機能です。
KurocoFiles内にあるファイルは、Kuroco管理画面[ファイル] -> [KurocoFiles]から確認できます。

Image (fetched from Gyazo)

KurocoFrontについて

KurocoFrontは、CDNを利用した静的コンテンツホスティングサービスです。 GitHubと連携することで、ファイルをKurocoFrontに配置することができます。

参考)

KurocoFilesとKurocoFrontの使い分けについて

画像・ファイルを配置するのに、KurocoFilesとKurocoFrontのどちらを利用するのが良いかをご説明します。

KurocoFilesをおすすめする場合

コンテンツに利用する画像等、定期的に更新するファイルはKurocoFilesを利用することをおすすめします。

KurocoFrontをおすすめする場合

HTMLやJS/CSSなどのサイトを構成するファイル群はKurocoFrontのassetとして利用することをおすすめします。

注意点

主なフロントエンドフレームワークはファイルパスにハッシュを付けてキャッシュクリアをしやすいような工夫がありますので、外部に連絡するURLなどにハッシュ付きでファイルを配置することは適切ではありません。
(フロントエンドフレームワークの配置フォルダなどの機能でハッシュを付けない配置の方法もあります)

なお、KurocoFiles、KurocoFront共に画像最適化機能がありますので、その点は特に考慮する必要はありません。
参考) 画像の動的変換について

キャッシュのクリアの仕組み

KurocoFilesの場合

ファイル更新時に該当フォルダのCDNキャッシュがクリアされます。

KurocoFrontの場合

Githubからコミットハッシュ毎に一括で更新をされ、一括でCDNキャッシュがクリアされます。

コストについて

転送料のコストは同じです。
ただし、KurocoFrontに関してはファイルがコミットハッシュ毎に溜まっていきますのでストレージ料金が余計にかかります。
また、KurocoFrontはGithub Actionsを利用してビルド・デプロイをしております。そのため、KurocoFrontで利用するファイル容量が多い場合には、Github側の料金もかかってくる場合がありますのでご注意ください。

まとめ

以上がKurocoFilesとKurocoFrontの違いです。再度まとめると以下のようになります。

項目KurocoFilesKurocoFront
おすすめ用途コンテンツに利用する画像等、定期的に更新するファイルHTMLやJS/CSSなどのサイトを構成するファイル
管理している場所Kuroco管理画面Githubレポジトリ
キャッシュのクリアタイミングファイル更新時Githubからコミットハッシュ毎に一括で更新後
コストストレージ・転送量のコストストレージ・転送量のコストとGithub Actionsコスト

おすすめ用途を記載しておりますが、必ずこちらの運用をしなくてはいけないということではないので、サイト運用者と相談の上決定してください。
ご不明点ございましたらお問い合わせフォームよりご連絡ください。