今月初頭に社内ISUCONを開いたという記事を書きました。
その環境を仮想環境で構築してローカルでも試せるようにとVagrantを使って準備したのですが、自分がそれを使っていてハマッたのでメモ。
Vagrant上では、nginxを経由して表示するようにしているので、VMの80番ポートを20080番ポートにポートフォワーディングするようにしました。
ちなみに、10080番ポートはChromeがデフォルトで閉じている模様…。参考記事はこちら。
urlで出力するとポート番号が消える
ActiveStorageのstorage.ymlでserviceをDiskにしている場合で、Userモデルが画像avatorをActiveStorageで登録しているとしたら、Viewで表示するときは、通常はこう。
<%= image_tag user.avator %>
しかし、これだとデフォルトでURLが発行されてしまいます。RailsアプリはVagrantでポートフォワーディングされているということは知りませんから、http://localhost/rails/active_storage/blob/...のようなURLが発行されていて、表示することができません。
pathで出力すると問題なし
ということなので、pathで出力しましょう。Rails 6.1からですが、恒久URLを発行できるようになったので、これでOK。
<%= image_tag rails_storage_proxy_path(user.avator) %>
こうすると、/rails/active_storage/blob/proxy/...というパスが発行されるため、めでたく画像が表示されます👍
サムネイルもpathで出力
vipsを使って大きな画像のサムネイルをオンデマンドで作成するようにしていたら、同様に表示できず…。そりゃそうだ…。
<%= image_tag user.avator.variant(resize_to_limit: [200, 200]).processed %>
これもまた、同様にrails_storage_proxy_pathを使います。
<%= image_tag rails_storage_proxy_path(user.avator.variant(resize_to_limit: [200, 200]).processed) %>
以上！
