Herokuデプロイ後、axiosのリクエスト先がlocalhostのままになる

前提・実現したいこと

バックをDjango、フロントをReactでアプリケーションを作成しHerokuにデプロイしました。
axiosを使用してバックからAPIデータを取得しています。
axiosに指定するURLを.env.developmentにlocalhostのURLを、.env.productionにデプロイ後のURLを記載してビルド時に切り替える様に設定しました。

ですが、ローカル環境ではlocalhostのURLにリクエストを送っているものの、本番環境ではデプロイ後のURLにリクエストを送ってくれません。(localhostのURLにリクエストを送っていてエラーになっています)

様々なwebサイトを参照して色々と検証したものの、解決策が見つからず困っております。
解答の為に必要な情報が他にあれば教えてください。

宜しくお願いいたします。

試したこと

本番環境のURLをそのままaxiosに指定してみましたがlocalhostのままでした。

axiosで指定するURLをwindow.location.origin+'/api/entry/'としてみましたが、やはりローカル環境ではうまくいくものの本番環境ではリクエスト先がlocalhostのままでした。

発生している問題・エラーメッセージ

GET http://localhost:8000/api/task/
net::ERR_CONNECTION_REFUSED

Uncaught (in promise) Error: Network Error
    at e.exports (main.776647e88695.js:2)
    at XMLHttpRequest.p.onerror (main.776647e88695.js:2)

該当ソースコード

↓.env.development

REACT_APP_API_URL=http://localhost:8000

↓.env.production

REACT_APP_API_URL=https://hoge.herokuapp.com

↓webpack.config.development.js

const path = require('path');
const Dotenv = require('dotenv-webpack');

module.exports = {
  =省略=
  plugins: [
    new Dotenv({
      path: path.resolve(__dirname, './.env.development')
    })
  ]
}

↓webpack.config.js

const path = require('path');
const Dotenv = require('dotenv-webpack');

module.exports = {
  =省略=
  plugins: [
    new Dotenv({
      path: path.resolve(__dirname, './.env.production')
    })
  ]
}

↓package.json

{
  =省略=
  "scripts": {
    "start": "react-scripts start",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build": "webpack --env production --config webpack.config.js",
    "dev": "webpack --env development --config webpack.config.development.js"
  }
  =省略=
}

↓axios.getのコード

React
1apiGet = async () => {
2    const API_URL = process.env.REACT_APP_API_URL
3    try{
4      const res = await axios.get(`${API_URL}/api/task/`);
5      this.setState({ posts: res.data });
6    }catch(error){
7      console.log(error.response)
8    }
9  }

↓.gitignore

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

.env.development
.env.production

itepechi

2021/01/02 23:05

.gitignoreと.slugignore（あれば）の内容を追記していただくことは可能ですか？

CHAN_

2021/01/03 08:13

.gitignoreを追加いたしました。宜しくお願いいたします。

行動規範の内容に同意します

回答3件

自己解決

参照されているファイルの認識に誤りがありました。
collectstaticを再度実行したところ、エラーが解消されました！

投稿2021/01/03 16:53

CHAN_

総合スコア3

axiosに指定するURLを.env.developmentにlocalhostのURLを、.env.productionにデプロイ後のURLを記載してビルド時に切り替える様に設定しました。

.env.development や .env.production を使って URL を切り替えているそうですが、.gitignore に

.env.development
.env.production

が含まれていますので、.env.development や .env.production が、デプロイされていないように思われます。

.env.development や .env.production がない場合は、どのような動作をするのでしょうか？

投稿2021/01/03 09:01

CHERRY

総合スコア25218

CHAN_

2021/01/03 09:22

コメントありがとうございます。ビルド時に環境に合わせてどちらかのファイルを読み込んでURLを切り替えて、ビルドされたファイルをデプロイしているので.envファイルはデプロイされていなくても良いという認識でした。 .envファイルがない場合はURLを切り替えられないので、リクエストURLがローカル環境はhttp://localhost:8000/undefind/api/task/となってエラーになります。本番環境はhttp://localhost:8000/api/task/となってエラーになります。