NuxtHubと画像処理ライブラリの相性が悪かった
Liry24NuxtHub にデプロイする予定のWebアプリケーションで、外部ライブラリで画像を圧縮しようとして嵌った。
NuxtHub は Cloudflare Pages や Workers などのサービスを、Nuxt と密接に連携する形で利用できるもの。
プレビュー環境と本番環境をいつでも切り替えて作業できるなど、便利機能が多い。
NuxtHub Blob は実際のところ Cloudflare R2 であり、R2 をそのまま使うよりクエリとかやりやすくなっている。多分。
本件では、画像のアップロードサイズをできる限り小さくするために画像をjpeg圧縮する必要があり、そのために Compressor.js や sharp などのライブラリを使用する予定だった。
Compressor.js の場合、変換処理の際にImage is not definedというエラーが出てしまう。
お恥ずかしながら私はWeb開発については素人同然なので、このエラーが解決できず、環境との相性と考え断念。
sharp の場合、nuxt devでは上手く動作するのにnuxt buildだとCannot resolve @img/sharp-wasm32/versions等のエラーでビルドできない。
導入の仕方が悪いのかと色々と試したが、どうやらこれは Nitro の preset cloudflare-pagesでビルドすると起こるバグのようで、以下のIssueで示されている解決方法でも私の環境では解決しなかった。
NuxtHub を使う場合、nuxthub deployでビルドとデプロイを行うことになるが、このコマンドが preset を半ば強制的にcloudflare-pagesにしてビルドすることに起因している。
それ以外の preset にしようとすると怒られる。
つまるところ解決方法が無さそうだった。
上記とは別に、nuxt dev --remote=previewで立ち上げても何故か production 環境のリモートストレージに接続されてしまう問題に悩まされていたので、
最終的に Blob を Supabase Storage で管理し、Supabase Edge Functions に圧縮処理をさせることにした。
既に認証とDBに Supabase を利用していたので、ほぼ完全に Supabase に依存する形となったが、構成がシンプルになってよかったかもしれない。
Edge Functions では ImageScript を用いて実装した。
Deno便利。