はじめに
ローカル環境にてActive Storageに保存された画像のURLパスを取得したとしても、実機では画像を表示できません。
この原因は、開発環境のデフォルト設定では、Active Storageの画像URLがhttp://localhost:3000/... のようになり、実機からアクセスできないためです。
（ これは実機からAPIを叩く場合でも同じですね ）
この記事では、この問題を解決し、React Nativeの実機からActive Storageの画像に正しくアクセスするための設定方法を解説します。
ここで解説する方法は開発環境向けです。本番環境ではS3などのオブジェクトストレージサービスを利用することが一般的であり、設定方法も異なります。
解決策
具体的には config/enviroments/development.rb を編集していきます。
IPアドレスが必要なので、ターミナルにて以下を実行して取得しておきましょう。
Macの場合
ifconfig | grep "inet "
Windowsの場合
ipconfig | findstr "IPv4 アドレス"
IPアドレスの確認後に、以下を追加します。
Rails.application.configure do
# 既存のコード
# これを追加
Rails.application.routes.default_url_options = {
host: 'ここに自分のIPアドレスを追加',
port: 3000,
protocol: 'http'
}
end
複数人にて開発してる場合や、IPアドレスが良く変更される場合は、環境変数などに、それぞれのIPアドレスを格納するのがいいですね
設定後のURLと実機からのアクセス
上記の設定を行うと、Active Storageが生成する画像のURLは以下のように変化します。
変更前: http://localhost:3000/rails/active_storage/blobs/redirect/...
変更後: http://設定したIPアドレス/rails/active_storage/blobs/...
これで、React Nativeの実機からこのURLにアクセスできるようになり、画像が表示されるはずです！
まとめ
僕自身Railsに入門して間もないですが、とても便利な反面、自動的にこんなことまでしてくれてるのかと驚くことがあります。
何となく使えてるけど.. という点を減らしていけるよう頑張りたいです。