【Rails + Vue.js】axiosのbaseURLを環境ごとに切り替える方法

はじめに

Rails + Vue.jsの開発において、ローカル環境では、http://localhost:3000/ からデータを取得して、本番環境ではデプロイしたURLからデータ取得する方法を書きます。

import axios from "axios";

export default () => {
  const instance1 = axios.create({
    baseURL: 'http://localhost:3000/v1',
  })
  return instance1;
};

上記のコードでは、本番環境でもhttp://localhost:3000 にアクセスされるため、データを取得できません。これを変更していきます。

参考

https://cli.vuejs.org/guide/mode-and-env.html#modes

.envファイルを準備する

.env.development や .env.production というファイルをVueプロジェクト直下に作成します。VUE_APP_ の命名規則に従って、以下のようにURLを記述します。

.env.development

NODE_ENV='development'
VUE_APP_API_ORIGIN='http://localhost:3000'

.env.production

NODE_ENV='production'
VUE_APP_API_ORIGIN='https://prod-example.com'

package.jsonにビルドコマンドを追加する

下記のように、--modeでビルドコマンドを追加します。

package.json

 "scripts": {
    "serve": "vue-cli-service serve",
    "dev-serve": "vue-cli-service serve --mode development",
    "prod-serve": "vue-cli-service serve --mode producution",
    "build": "vue-cli-service build",
    "dev-build": "vue-cli-service build --mode development",
    "prod-build": "vue-cli-service build --mode producution",
    ...
  }, 

切り替わっているか確認

process.env.VUE_APP_API_ORIGINで指定したURLが確認できます。script内で切り替わっていれば成功です。

console.log(process.env.VUE_APP_API_ORIGIN)

axiosで指定するbaseURLも以下のように変更すれば、環境ごとに切り替えることができます。

import axios from "axios";

export default () => {
  const instance1 = axios.create({
    baseURL: `${process.env.VUE_APP_API_ORIGIN}/v1`,
  })
  return instance1;
};