本番環境でのVue.jsにおけるaxiosの書き方

axiosとは？

まず前提としてaxiosはVueファイルからRailsなどのバックエンドでの処理を呼び出す際に使用します。
例えば config/routes.rb

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :tasks do
    end
  end    
end

というルーティングを設定しているときにVueファイルにて

this.$axios.post("http://localhost:3000/api/v1/tasks", task)

とするとapp/controllers/api/v1/tasks_controller.rbのindexアクションを呼び出すことができます。

baseURLで省略可能だが...

上のhttp://localhost:3000/api/v1の部分はaxiosを使用する際に共通となるのでbaseURLとして以下のように設定できます。
app/javascript/plugins/axios.js

const axiosInstance = axios.create({
  baseURL: 'api/v1'
})

このように書いておけばVueファイルにおいて

this.$axios.post("tasks", task)

こんな感じで省略ができコードの簡略化につながります。
さらにこのように設定しておくだけで本番環境でも対応できます！

ただ上記のbaseURLは何故かparamsを使用するようなshow・update・destroyのようなアクションには対応できないようです。 (私の調べ不足かもしれませんが) なので私は開発環境ではそのままURLを書いて開発をしていました↓

this.$axios.get( `http://localhost:3000/api/v1/tasks/${this.$route.params.id}`)

ただこれでは本番環境に対応できないという問題が生じます。

URLを環境変数で設定する

そうした問題に対応するために以下のようなコードに変更をしました↓

this.$axios.get( `${process.env.VUE_BASE_API}/tasks/${this.$route.params.id}`)

VUE_BASE_APIは環境変数です。

開発環境ではgem 'dotenv-rails'を使用して以下のファイルを作成すると環境変数が使用できます↓
.env

VUE_BASE_API='http://localhost:3000/api/v1'

そして本番環境でももちろん環境変数を設定しなければなりません。
私はHerokuを使用してデプロイをしています。
Herokuで環境変数を設定する方法としてはターミナルにて

$ heroku config:set 環境変数名=値

とすればOKです。
またHerokuのWebページにて設定する方法もあります。 詳しくは以下のURLにて記述がありました↓

qiita.com