【2024-12-10】wrangler.tomlで環境ごとのBindingを設定する方法

背景

Cloudflare PagesからCloudflare Workersにしてからというもの、デプロイするごとに「変数とシークレット」と「バインディング」がリセットされてしまうということに気づいた。
Cloudflare Pagesと同じくWeb上で設定したはずなのに動かなくなったのでどこかと思ったら...。

ということでこれらをwrangler.tomlに書く。

書き方

https://developers.cloudflare.com/workers/wrangler/environments/
https://developers.cloudflare.com/workers/runtime-apis/bindings/

[env.staging]
name = "appname-staging"

[[env.staging.r2_buckets]]
binding = "BUCKET"
bucket_name = "appname-staging"

[env.production]
name = "appname"

[[env.production.r2_buckets]]
binding = "BUCKET"
bucket_name = "appname"

【2024-12-11】画像の最適化を行いたい

やりたいこと

• アップロード時にでかい画像を小さくしたい
• WebPとかも使って高品質でより小さくしたい
• 同じ画像でもURLのクエリを変えることで取得する画像のサイズを変えたい
  • けど第三者にURLをいじられたくない

Cloudflare って画像周りどんなサービスあるんだっけ...？

https://zenn.dev/saneatsu/scraps/898a0a4f69736c

過去の自分のまとめでおさらい。自分のScrapを自分で参照すること結構あるな〜。
ただ、このまとめで参照している記事は1年以上前なのでPlanとかサービス内容とか結構変わってそう。

プランを確認

まずは無料の枠内でできることをしていきたい。
上記自分のまとめの記事では月200ドルのBusinessプランじゃないとImage Resizing使えないって書いていたけど無料で使えそうな感じがするな？

公式ドキュメント

https://developers.cloudflare.com/images/

明日から公式サイト読み進める。

【2024-12-11】Observatory (beta)

そういえばObservatoryを有効化したら週1でパフォーマンスを計測してくれるようになった。
Freeプランだからかどうかわからんが、リージョンがアイオワしか選択できない。
月25ドルのProにしたら東京選べるのかな？

まだBeta版だけど課金してもいいからそのうちデプロイごとに計測してくれるようになると嬉しいな。

【2024-12-11】Cloudflareの画像系サービスの違い

https://delt.co.jp/article/710

ここは表でもまとまってたし、最近も更新かけられていたので良かった。

できること全般

• 画像のアップロード、保存
• リサイズと最適化
  • これに関していくつかのサービスがあってややこしいのでここでまとめる
• CDNを利用した配信
  • 応答時間を短縮できる
• セキュアな画像管理
  • 特定のドメインや IPアドレスに制限できるので、画像の直リンクなどを防げる

Cloudflare Images

• ドキュメント
  • Cloudflare Image
• 説明
  • Cloudflare サーバー上に画像配信環境を構築して、画像の保存や、配信、サイズ変更、最適化を行う
    • これが一番代表みたいな名前をしているのは、他のサービスのように変換を行うだけではなく、ストレージとしての役割も果たしているからだと思っている
  • あらかじめサイズ変更やぼかしなど画像変換方式を指定して使う（元画像を変更する）
  • 画像品質の調整は不可
• 利用可能プラン
  • 無料プラン以上
• 価格
  • ストレージ
    • 保存10万点あたり5ドル（対象となるのはオリジナル画像のみ）
      • 画像の"枚数"で課金されるので画像のサイズは関係ない
      • 自身のストレージを使うことも可能（その場合当然お金はかからない）
  • 従量課金
    • 配信10万点あたり1ドル
    • Images Transformations 2000枚あたり1ドル

Image Resizing

• ドキュメント
  • Cloudflare Image > Transform Image
• 説明
  • クライアント環境に合わせて動的に画像のサイズ変更、品質の調整、WebP または AVIF 形式への変換を行う
  • Variantsとは違い、ストレージにはオリジナル画像のみが保存され、リサイズされた画像は自動でキャッシュされるため、画像は1つ用意しておけば良くなりストレージが節約できるのがポイント（元画像を変更しない）
  • 画像品質の調整も可能
• 利用可能プラン
  • Proプラン（25ドル/月）以上
• 価格
  • 従量課金（リサイズ数）

Polish

• ドキュメント
  • Cloudflare Image > Cloudflare Polish
• 説明
  • 既存の画像をURLを変更せずに自動的に最適化する
  • 主に画像の圧縮と、WebPへの自動変換を行う
  • Image Resizingと違って画像の品質を落とさない
    • Image Resizingとの併用は不可。やるならImagesと併用する。
• 利用可能プラン
  • Proプラン（25ドル/月）以上
• 価格
  • 従量課金なし

Mirage

Mirageはドキュメントの場所からも分かる通り厳密にはCloudflare Imageのサービスの1つではないが、画像関連なのでここに書いておく

• ドキュメント
  • Speed > Optimization > Image optimization > Cloudflare Mirage
• 説明
• 利用可能プラン

【2024-12-12】Cloudflare Imagesの公式ドキュメントを読もう

今回の自分のユースケースではとりあえずCloudflare ImagesとPolishだけ学べば良さそう。

Overview

1. 画像を効率的に保存して配信します。Cloudflare Images に画像をアップロードし、同じ元の画像の複数のバリエーションを動的に配信できます。
2. Images の外部に保存されている画像を最適化します。インターネット上で公開されている画像を最適化するために、変換リクエストを行うことができます。

Get started

「Images > Transformations」へ行き任意のゾーンのTransformationを有効化しておく。

Images Transformations: 2,000 枚あたり $1.00 の画像が変換されました

月に1ドルもかからなさそう。

Upload Images

対応形式は以下。HEICは非対応。

• PNG
• GIF
• JPEG
• WebP (Cloudflare Images はアニメーション WebP ファイルのアップロードもサポートしています)
• SVGA

サイズ制限は以下。

• 画像の最大寸法は 12,000 ピクセルです。
• 最大画像領域は 100 メガピクセル (例: 10,000×10,000 ピクセル) に制限されます。
• 画像のメタデータは 1024 バイトに制限されています。
• 画像のサイズ制限は 10 メガバイト (MB) です。
• すべてのフレームを含むアニメーション GIF/WebP は、50 メガピクセル (MP) に制限されます。

Create variants

• どこの機能か
  • Cloudflare Images ← ここ
  • Image Resizing
  • Polish
  • Mirage
• これは何？
  • アップロード時に画像のサイズを変更することができる
  • Variantsというのは、画像サイズを変更する際の1つのルールを指す
    • デフォルトではpublicというVariantsが適用される

ルールは以下がある。

• Scale down
  • 画像は指定された幅または高さに完全に収まるように縮小されますが、拡大されることはありません
• Contain
  • 縦画像はアスペクト比を保ったまま、指定された幅または高さ内で可能な限り大きくなるようにリサイズ（縮小または拡大）されます。Scale downと異なり拡大されるケースもある
• Cover
  • 画像は、幅と高さで指定された領域全体を正確に埋めるようにリサイズされ、必要に応じてトリミングされます
• Crop
  • 画像は縮小され、幅と高さで指定された領域内に収まるように切り取られます
  • 画像は拡大されない。
  • 与えられた寸法より小さい画像の場合は、scale-downと同じです。
  • 与えられた寸法より大きい画像に対しては、coverと同じです。
• Pad
  • 画像は縦横比を保ったまま、指定された幅または高さの範囲内で可能な限り大きくなるようにリサイズ（縮小または拡大）されます。 余分な領域は背景色（デフォルトでは白）で塗りつぶされます。

Enable flexible variants

ここに書いてある変換パラメータをURLに含めることで上記5つ以外に高機能な画像変換を行うことができる。

具体的には blur をかけたり、画像を明るくしたり、圧縮したり、borderをつけたりなどができる。

ただ、blurは以下のようにUIからも設定できるっぽい。

＜todo...＞

【2024-12-12】Cloudflare Imagesを使うのって適切なんだっけ？

https://zenn.dev/masa5714/articles/59d5b8ec4b495c#料金について

この記事を見ながら思ったけどそもそもServerで加工してR2に保存じゃだめなんだっけか。

あと、Cloudflare Imagesだとオリジナル画像だけにお金がかかるけど、自分のユースケースでは1つの画像から3パターンの画像を作成したい。
この場合ってCloudflare Imagesを使うの適切なんだろうか？
3回同じ処理をしなきゃいけないってこと？
だったらImage Resizingの方が良かったりするのでは？？

next/imageを使ってしまうと、Next.jsをホスティングしているサーバーで画像の最適化処理が行われてしまう。これでは帯域幅の節約にはならない。生HTMLのimgタグを使用しましょう。

なるほどね。Next.js使ってないけど。

https://delt.co.jp/article/710
ここにはCloudflare Imagesで複数サイズ扱うのが適切とか書かれている。なんでだ。
ま、そんなお金かからないしとりあえず使ってみよう。