Xserver で, アイコン画像が正常に表示されません & 画像のクロップできない | Blurred Avatar and can't Cropping Image

[Lefioty]

💡 Summary

皆様、ご迷惑をおかけして申し訳ありません。

私はXserver VPSを使ってMisskeyのサイトを立ち上げ、2024.3.1版にアップデートしたばかりです。
現在、「アイコン画像を変更」の操作を行った後、アイコン画像が正常に表示されません。
「画像のクロップ」時に、読み込み中の円が回り続けてクロップ動作ができない状態です。

これらの問題を修正するにはどうすればよいでしょうか？

どうぞよろしくお願いいたします。

Hello guys, I apologize for the inconvenience.

I just set up a Misskey website using an Xserver VPS and updated it to the 2024.3.1 version.

Currently, after performing the "Change Avatar" operation, the avatar cannot be displayed normally.
When "Cropping Image", the loading circle keeps spinning and the cropping action cannot be performed.

How can I fix these issues?

Thank you very much.

🥰 Expected Behavior

「アイコン画像を変更」の操作を行った後、アイコン画像が正常に表示する。
「画像のクロップ」とUIの表示。

Change Avatar and shows avatar correctely. Cropping images and showing the UI.

🤬 Actual Behavior

現在、「アイコン画像を変更」の操作を行った後、アイコン画像が正常に表示されません。
「画像のクロップ」時に、読み込み中の円が回り続けてクロップ動作ができない状態です。

Currently, after performing the "Change Avatar" operation, the avatar cannot be displayed normally.
When "Cropping Image", the loading circle keeps spinning and the cropping action cannot be performed.

📝 Steps to Reproduce

Xserver VPSの手順に従ってください：

1. Misskeyアプリイメージを利用する
2. Let's EncryptでSSL鍵を適用し、SSHコンソールでssl_setupを設定する
3. SSHコンソールでupdate_misskeyを実行し、misskeyをアップデートする
4. CDN (Cloudflare) の設定は公式の通りです

---

Follow instructions of Xserver VPS:

1. Install misskey using Xserver VPS misskey image
2. Applying SSL key via Let's Encrypt and setup in SSH console ssl_setup
3. Update misskey in SSH console update_misskey
4. CDN (Cloudflare) configuration as the official guide.

💻 Frontend Environment

* Model and OS of the device(s): GIGABYTE AERO 5 XE4 + Win10 HOME
* Browser: Google Chrome 123.0.6312.106 （Official Build） （arm64）
* Server URL: misskey.usakoya.net
* Misskey:v2024.3.1

🛰 Backend Environment (for server admin)

* Installation Method or Hosting Service: Xserver VPS / Misskey intance
* Misskey: v2024.3.1
* Node: v20.12.1
* PostgreSQL:psql (PostgreSQL) 15.6 (Ubuntu 15.6-1.pgdg22.04+1)
* Redis: redis-cli 7.2.4
* OS and Architecture: Ubuntu 22.04.4 LTS (GNU/Linux 5.15.0-102-generic x86_64)

[samunohito]

自分の開発環境で試してみたところ、以下の画像の状態のまま先に進みませんでした。同じような状況でしょうか？

自分のPCでも発生したことからフロントエンド側のバグだと思われます。

[samunohito]

「ドライブから」を選ぶとクロップ画面を表示できる模様。アップロード→クロップの時におかしくなる可能性あり

[samunohito]

開発ツールからぼかしのdivを剥がすと表示に失敗しているアイコンが…

[Lefioty]

私は連合に接続しようとしましたが、GTLのすべての画像がCWとしてマークされていなくてもぼやけています。
I tried to connect to federation and all images in GTL are blurred even they are not marked CW.

これの原因として考えられるのは何でしょうか？
What could possibly cause this?

[Lefioty]

自分の開発環境で試してみたところ、以下の画像の状態のまま先に進みませんでした。同じような状況でしょうか？ !
自分のPCでも発生したことからフロントエンド側のバグだと思われます。

同じです
Same as you.

[zyoshoka]

Cloudflare のキャッシュをパージしてみるとどうでしょうか？

[Lefioty]

Cloudflare のキャッシュをパージしてみるとどうでしょうか？

先ほどこの方法をテストしましたが、効果がありませんでした。😔 ご提案ありがとうございます。🙇‍♂️
I just tested this method, but it didn't work. 😞 Thank you for your suggestion. 🙏

[samunohito]

pnpm clean-allでビルド成果物およびnode_modulesをすべて廃棄し、
新たにpnpm iとpnpm buildでビルドしなおしたところ、自分の環境ではクロップ時の現象が起こらなくなりました。

とても不可解ですが、一度試してみる価値はあると考えています。

[Lefioty]

pnpm clean-allでビルド成果物およびnode_modulesをすべて廃棄し、 新たにpnpm iとpnpm buildでビルドしなおしたところ、自分の環境ではクロップ時の現象が起こらなくなりました。

とても不可解ですが、一度試してみる価値はあると考えています。

/home/misskey/misskey/ ディレクトリで上記のコマンドを実行してみました。
I tried executing the above command in the /home/misskey/misskey/ directory.

現在、ウェブサイトはこのような状態になっています：
Currently, the website looks like this:

コマンドを実行すると、いくつかのエラーがあるようです：
There seem to be some errors when executing the command:

pnpm build

とりあえずイメージファイルを使ってVPSを復元しましたが、どこに問題があるのかわかりません。🤔
For now, I've restored the VPS using the image file, but I'm not sure where the problem lies. 🤔

[samunohito]

（提供いただいたキャプチャの一部を切り抜きました）

お使いのVPSに搭載されているメモリが足りず、OutOfMemoryとなっているようでした。

お使いのVPSに十分な量のswapが備わっていることが前提となりますが、pnpm buildの実行時に--max-old-space-size=3072を設定¹してからビルドすると改善される可能性があります。

Footnotes

1. package.jsonにオプションを書き加えるか、NODE_OPTIONS環境変数の設定など ↩

[Lefioty]

（提供いただいたキャプチャの一部を切り抜きました） お使いのVPSに搭載されているメモリが足りず、OutOfMemoryとなっているようでした。

お使いのVPSに十分な量のswapが備わっていることが前提となりますが、pnpm buildの実行時に--max-old-space-size=3072を設定1してからビルドすると改善される可能性があります。

Footnotes

1. package.jsonにオプションを書き加えるか、NODE_OPTIONS環境変数の設定など ↩

返信が遅くなり申し訳ありません。🙇‍♂️
Sorry for the late reply. 🙇‍♂️

昨日、提供していただいたコマンドパラメータをテストした後も、メモリ不足のレポートが表示されました（現在のインスタンススペック：Ram 2GB | CPU 3コア | SSD 50GB）。一方、別のXserver VPSインスタンス（Ram 4GB | CPU 4コア | SSD 100GB）に新しくMisskeyインスタンスをインストールしたところ、上記のようなバグや問題（画像のクロップや画像のぼやけなど）は一切ありませんでした。😊 Misskeyのバージョンは2023.11.0です（おそらくmisskeyのバージョンはまだ更新されていません）。

Yesterday, after testing the command parameters you provided, I still received reports of insufficient memory (current instance specs: Ram 2GB | CPU 3 core | SSD 50GB). However, when I reinstalled the Misskey instance on another Xserver VPS instance (Ram 4GB | CPU 4 core | SSD 100GB), there were no bugs or issues mentioned above (such as cropping and image blurring). 😊 The Misskey version is 2023.11.0 (probably the misskey version hasn't been updated yet).

どの部分に問題があるのか、さらにテストしてみます。ご協力ありがとうございます。🙏
I will further test which part of the process is causing the problem. Thank you for your assistance. 🙏

[samunohito]

OutOfMemoryの件については、 #13177 で対策されました。フロントエンドのビルド時に使用するメモリを抑える対応が取り込まれています。最新のdevelopには反映済みですので、次のリリースには取り込まれると思います。

別のXserver VPSインスタンス（Ram 4GB | CPU 4コア | SSD 100GB）に新しくMisskeyインスタンスをインストールしたところ、上記のようなバグや問題（画像のクロップや画像のぼやけなど）は一切ありませんでした

もし新バージョンにアップデートする予定があり、なおかつクロップの動作に問題ないことがわかりましたら、このissueを閉じていただけると嬉しいです。

[Lefioty]

承知しました。ありがとうございます。😊
Understood. Thank you. 😊