前段
vuex の actions 内で this.$axios を使ってAPIを叩きたい。
エンドポイントは 環境ごとに分けたい。
- local : http://localhost:3000/api - production : http://hogehoge.jp/api
しかし、現在ローカルでは
axios: {
host: 'localhost',
port: 3000,
prefix: '/api'
// See https://github.com/nuxt-community/axios-module#options
},
と定義していた。
@nuxtjs/dotenvの導入
環境ごとにエンドポイントの設定を分ける方法として、 @nuxtjs/dotenv を導入する。
/package.json
"dependencies": {
"@nuxtjs/dotenv": "^1.3.0",
},
ruby on rails でも同じ名前の Gem があるね。
/nuxt.config.js の頭に下記定義を追加。
require('dotenv').config()
/nuxt.config.js のmodulesにも追加。
modules: [
'@nuxtjs/dotenv',
'@nuxtjs/axios'
],
/.env ファイルを用意することで、環境変数を定義することが出来る。
API_URL=http://localhost:3000/api
環境変数に API_URL が定義してあれば、 axios の defaults.baseUrl に自動で設定してくれる。
本番環境では
あとは、本番環境でも同様に環境変数を指定してあげれば良さそう。
API_URL を定義しておけば良さそう
初め何かで見た下記のような定義をしていて、エンドポイントが設定されなくて（デフォルトの http://localhost:3000/ のままで）ハマった。
axios: {
baseURL: process.env.baseUrl
},
この定義は特に必要なく、 '@nuxtjs/axios' では環境変数に API_URL を定義しておけば自動で設定してくれる。
やっぱソースを読むの大事。
個人的にはドキュメントを読むよりも大事なのではと思ったり思わなかったりｗ
