ローカルと本番でfetchAPIのURLを変えたい

Question

当方reactとrailsでアプリを作成中なのですが、ローカル環境のみの開発となっているため（デプロイしていない）
下のように

componentDidMount(){
    fetch('http://localhost:3000/api/v1/deeds')
    .then((response) => {
      return response.json()
    })
    .then((dones) => {
      this.setState({dones})
    });
  }

fetchのapiがlocalhostとなっています。コレを本番にデプロイしたときに、
本番用のURL変更したいのですが、いいやり方が思いつかず。。。（調べても出てこなかったです）
自分の理想としては、本番環境では本番用のURLが使われ、ローカルではローカル用のURLが呼び出されるとやりたいです。
コレは本番なのかlocalなのかを認識できるメソッドでもあればと思っているのですが。。。。
どなたかお教えいただければと思います。

何卒よろしくお願いします。

Answer 1

Webpacker内にあるJavaScriptから環境切り分けを行う場合、process.env.NODE_ENVを見る方法があります。

なお、開発と本番でディレクトリ構造が変わらないのであれば、fetch('/api/v1/deeds')とサーバを書かないことで済ませる、という方法も考えられます。

Comments

[tomoharu]

ありがとうございます。
fetch('/api/v1/deeds')
で一度指定してみたんですけど、サーバー側から取得できなかったんですよね。。。

[tomoharu]

すいません。
process.env.NODE_ENVでいけました。ありがとうございます。

Answer 2

Rails.env # => "development"

Comments

[tomoharu]

ありがとうございます。react側で使いたいので、Rails.envは認識されないんじゃ？と思ったのですが。。

[winterboum]

おっと、そうですね、脊髄反射してしまいました。

Answer 3

本番環境にテスト情報が残るのは流石にみっともないですよ

var url="http://localhost:3000/api/v1/deeds";
fetch(url)・・・
として、本番アップ直前にgrep置換するなどなんらかの
処理が必要でしょう

Comments

[yambejp]

本来ディレクトリ構造さえ同じであればディレクトリの指定だけで
いけそうなんですけど、ローカルのテスト環境では
ポートを変えているようなので結構きびしそうです。
テスト環境用のjsファイルを一つ作ってそこにデバッグ情報をまとめ
本番環境にはアップしないとかでお茶を濁すとかでしょうかね

[maisumakun]

> 本番環境にテスト情報が残るのは流石にみっともないですよ

条件をprocess.env.NODE_ENVなどで書いておくと、適切に設定すれば「コンパイル時に置き換わって条件が定数化」→「minifyで消し飛ぶ」という流れにできます。

[yambejp]

ああ、railsでしたね

[tomoharu]

ありがとうございます。この問題って結構起こり得ると思うのですが。。。皆さんはどう解消されているのでしょうか？