HerokuでAPIデータをうまく取得できない時の対処法とは？

みなさんこんにちは！
イザナギです！
最近、風呂に入るのにハマってます。いやー、ほんといいですよね！
心が洗われるようです。落ち着いたら温泉巡りしたいです！
さて、今回は前回の記事に引き続き「Nuxt」に関する話題です。
前回はNuxtで作ったアプリをWeb上にデプロイまで行いました。
nuxtアプリをherokuでデプロイしてみた！
しかし！
デプロイはうまくいったもののNuxtアプリの一部がうまく動きませんでした！
何でだろう？
ローカルではうまく動くのに、 Heroku上ではうまく動かない！
内容としては、APIのデータを表示するところにデータが反映されていない。
ですので、今回の記事はそんな時に試した対処法をいくつか紹介したいと思います。

Herokuの環境変数を入れ直してみる

前回の記事で「heroku-config」を使って、envファイルの設定を反映させてました。
「そこに何か問題がある？」と考えた私はHeroku上で環境変数を全て削除し、入れ直して見ました。
Heroku上の環境変数は「setting」の以下の項目から削除できます。

画像の青い部分をクリックすると、今まで設定してきた環境変数を編集することができます。
そこで変数を削除し、手入力で入れ直して見たり、「””や”」などを削除して見ました。
しかし、結果は変わりませんでした。

Axiosの設定がおかしい？

私は「nuxtjs-axios」を用いて非同期通信を行っています。

npm i @nuxtjs/axios

「こちらで設定した内容がおかしいのかな？」と考えたので、設定を変えてみることにしました。
今考えると、これはNuxtアプリをAPIする設定ではと感じていますが、一応実行。
「nuxt.confing.js」に以下を追加します。

axios: {  baseURL: process.env.BASE_URL    || '/'  },

そして、ターミナル上で以下のコマンドを実行します。

heroku config:set API_URL=$(heroku info -s | grep web_url | cut -d= -f2)

まあ、予想通りなのですが、反映されていませんでした。

コードがおかしい（これが原因！）

結果を言えば、これが原因でした。
私は現状、非同期通信して得たデータを「vuex-persistedstate」を使ってstoreに格納してリロードしてもデータを消えないようにしています。
その非同期通信を実行していたのが、Nuxtの「fetch メソッド」でした。
Deploy Nuxt on Heroku
ネットで調べても、Nuxtの「fetch メソッド」で行っている記事を見つけたので、採用していました。
結果、ローカル環境では実行できたのですが、Herokuに上げた途端実行されていませんでした。
なので、Nuxtの「fetch メソッド」を他のメソッドに変えてみることにしました。
私はNuxtのライフサイクルである「created」で実行できるようにしました。
そうしたところ、HerokuでもAPIのデータを取れるようになりました！
やっとできたー！

原因を考察

まず一つとして、ローカル環境でしか開発していなかったのでが、原因だと考えられます。
やはり、本番環境に適したもので開発を行えば良かったと感じております。
二つ目として、Nuxtの理解が足りなかったという点ですね。
Nuxtの「fetch メソッド」を使って開発していたのですが、本番環境ではAPIのデータを取得できませんでした。
これは、Nuxtのライフサイクルや「fetch メソッド」「asyncDataメソッド」などへの理解が足りていなかったためだと思います。
なので、これからは理解も深めていきたいと思います！

まとめ

今回は、NuxtをHerokuでデプロイした時のAPIデータが取得できなかった時の対処法について書いてきました。
初めは、env（環境変数）が適応されていないのかなと思いましたが、APIのデータが取れていないだけでした。
やはりまだ、Nuxtの理解を深められてない！
なので、これからも勉強していきたいと思います。
それでは、今回はここで筆を置かせていただきます！
最後まで記事をご覧いただきあろがとうございました！