Nuxt.js 2.6.2 / axios 5.0.0 で、axios の deafaults.baseUrl を設定するハナシ

前段

vuexactions 内で 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 が定義してあれば、 axiosdefaults.baseUrl に自動で設定してくれる。

本番環境では

あとは、本番環境でも同様に環境変数を指定してあげれば良さそう。

API_URL を定義しておけば良さそう

初め何かで見た下記のような定義をしていて、エンドポイントが設定されなくて(デフォルトの http://localhost:3000/ のままで)ハマった。

  axios: {
    baseURL: process.env.baseUrl
  },

この定義は特に必要なく、 '@nuxtjs/axios' では環境変数API_URL を定義しておけば自動で設定してくれる。

github.com

やっぱソースを読むの大事。

個人的にはドキュメントを読むよりも大事なのではと思ったり思わなかったりw

参考

nuxtでaxiosのhostの設定について - とろろこんぶろぐ

ボーダーライン:ソルジャーズ・デイ

ボーダーライン:ソルジャーズ・デイ(字幕版)

今の所今年観た映画で一番よかった!かも?

一切のユーモアを排除して、重厚感だけで物語が進行していき、音楽とも相まって没入感がすごかった。

冒頭からラスト手前まで手に汗握ってある種の疲労感を覚えるほど。

ラストだけちょっとあれー?という感じだったのだのが少し残念だけど、ジョシュ・ブローリンとベニチオ・・デル・トロの関係など、いろいろ気になる。

多分3作目でるのでは?

すげえ良かった。

達人プログラマー システム開発の職人から名匠への道

新装版 達人プログラマー 職人から名匠への道

なんとなく気になったので読書。

プログラマープログラマーとして上のステップに行くためのチップスや、考え方などを凝縮した一冊。

と言いつつ、実は最終章さえ読めばよいのでは?と思ってしまった(それだけ最終章がうまくまとめられている)。

この本で紹介されている「直交性」の原則という考え方がとてもステキだった。

直交性とは

グラフの座標軸のように交わる2点の線分は”直交”しており、”直交”とはXの値が変わってもYの値は変わらないことを指す。

つまり、2つ以上の物事で片方に変更が加わっても、もう片方に影響を与えないような設計をするべきで、例えばメソッド間や、データベースとUIなどを”直交”させるべきとのこと。

直交性のある設計(機能・コンポーネント)は修正が容易となるので、生産性向上とリスク低減ができる。

なるほど。